For the complete documentation index, see llms.txt. This page is also available as Markdown.

Custom View

Learn how to register a custom Collection View.

When the existing Collection View kinds do not meet your requirements, you can create a custom Collection View from scratch.

A Custom Collection View renders items produced by a Collection. The collection is responsible for fetching items through its Collection Repository.

Manifest

umbraco-package.json
{
  "type": "collectionView",
  "alias": "My.CollectionView.Custom",
  "name": "My Custom Collection View",
  "element": "/App_Plugins/my-collection-view/my-collection-view.js",
  "meta": {
    "label": "My View",
    "icon": "icon-list",
    "pathName": "my-view"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.CollectionAlias",
      "match": "My.Collection" // Collection alias to display this collection view for
    }
  ]
}

Implementation

Implement the Collection View as a Lit element that extends UmbCollectionViewElementBase. The base class provides the collection items via _items, handles selection state, and exposes helper methods such as _isSelectableItem and _isSelectedItem. Override render() to define how the collection is displayed.

Split the view into two elements:

  • A view element that handles the overall layout.

  • An item element that handles rendering individual items delegated to it by the view element.

The item element receives the item model as a property and dispatches UmbSelectedEvent and UmbDeselectedEvent when the user interacts with the selection control. The base class on the parent view handles these events automatically.

Common Collection Match Values

Use the match property in your manifest to target a specific collection type.

Match Value

Description

Umb.Collection.Document

Targets the Document collection (content items).

Umb.Collection.Media

Targets the Media collection (images, videos, files).

Umb.Collection.Member

Targets the Member collection.

Umb.Collection.MemberGroup

Targets the Member Group collection.

Umb.Collection.User

Targets the User collection.

Umb.Collection.UserGroup

Targets the User Group collection.

Umb.Collection.Dictionary

Targets the Dictionary collection.

Last updated

Was this helpful?