Umbraco Collection View

What is it?

A Collection View defines how data is displayed within a collection. It allows you to create custom visual representations of entity lists - such as tables, grids, cards, or any custom layout. Collection views can be added to existing collections or custom ones, and users can switch between available views.

Documentation

Always fetch the latest docs before implementing:

• Main docs: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/collections/collection-view

• Collections: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-types/collections

• Foundation: https://docs.umbraco.com/umbraco-cms/customizing/foundation

• Extension Registry: https://docs.umbraco.com/umbraco-cms/customizing/extending-overview/extension-registry

Related Foundation Skills

Context API: For accessing collection context and items data

• Reference skill: umbraco-context-api

State Management: For subscribing to collection data changes

• Reference skill: umbraco-state-management

Umbraco Element: For implementing the view element

• Reference skill: umbraco-umbraco-element

Workflow

• Fetch docs - Use WebFetch on the URLs above

• Ask questions - What collection? Table, grid, or custom layout? What columns/fields?

• Generate files - Create manifest + view element based on latest docs

• Explain - Show what was created and how to test

Minimal Examples

Manifest (manifests.ts)

import type { ManifestCollectionView } from '@umbraco-cms/backoffice/extension-registry';

const manifest: ManifestCollectionView = { type: 'collectionView', alias: 'My.CollectionView.Cards', name: 'Card View', element: () => import('./card-view.element.js'), meta: { label: 'Cards', icon: 'icon-grid', pathName: 'cards', }, conditions: [ { alias: 'Umb.Condition.CollectionAlias', match: 'My.Collection', }, ], };

export const manifests = [manifest];

View Element (card-view.element.ts)

import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-card-view') export class MyCardViewElement extends UmbLitElement { @state() private _items: Array<any> = [];

constructor() { super();

this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
  this.observe(context.items, (items) => {
    this._items = items;
  });
});

}

render() { return html <div class="card-grid"> ${this._items.map( (item) => html <div class="card"> <h3>${item.name}</h3> <p>${item.description || 'No description'}</p> </div> )} </div> ; }

static styles = css` .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--uui-size-space-4); padding: var(--uui-size-space-4); }

.card {
  background: var(--uui-color-surface);
  border: 1px solid var(--uui-color-border);
  border-radius: var(--uui-border-radius);
  padding: var(--uui-size-space-4);
}

`; }

export default MyCardViewElement;

declare global { interface HTMLElementTagNameMap { 'my-card-view': MyCardViewElement; } }

Table View Example

import { html, css, customElement, state } from '@umbraco-cms/backoffice/external/lit'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UMB_COLLECTION_CONTEXT } from '@umbraco-cms/backoffice/collection';

@customElement('my-table-view') export class MyTableViewElement extends UmbLitElement { @state() private _items: Array<any> = [];

constructor() { super();

this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => {
  this.observe(context.items, (items) => {
    this._items = items;
  });
});

}

render() { return html <uui-table> <uui-table-head> <uui-table-head-cell>Name</uui-table-head-cell> <uui-table-head-cell>Status</uui-table-head-cell> <uui-table-head-cell>Updated</uui-table-head-cell> </uui-table-head> ${this._items.map( (item) => html <uui-table-row> <uui-table-cell>${item.name}</uui-table-cell> <uui-table-cell>${item.status}</uui-table-cell> <uui-table-cell>${item.updateDate}</uui-table-cell> </uui-table-row> )} </uui-table> ; } }

export default MyTableViewElement;

View for Built-in Collection (e.g., Media)

const manifest: ManifestCollectionView = { type: 'collectionView', alias: 'My.CollectionView.MediaThumbnails', name: 'Thumbnail View', element: () => import('./thumbnail-view.element.js'), weight: 100, // Higher weight = appears first in view switcher meta: { label: 'Thumbnails', icon: 'icon-picture', pathName: 'thumbnails', }, conditions: [ { alias: 'Umb.Condition.CollectionAlias', match: 'Umb.Collection.Media', }, ], };

Accessing User-Defined Columns

this.consumeContext(UMB_COLLECTION_CONTEXT, (context) => { // Get configured columns/properties this.observe(context.userDefinedProperties, (properties) => { this._columns = properties; });

// Get items this.observe(context.items, (items) => { this._items = items; }); });

Meta Properties

Property Description

label

Display name in view switcher

icon

Icon in view switcher

pathName

URL path segment for deep linking

Common Collection Aliases for Conditions

• Umb.Collection.Document

• Umb.Collection.Media

• Umb.Collection.Member

• Umb.Collection.User

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.