umbraco-collection-view skill by umbraco

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:

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.

Property

Description

label

Display name in view switcher

icon

Icon in view switcher

pathName

URL path segment for deep linking

umbraco-collection-view

Documentation

Documentation