Collection: Introduce Collection Item Card extension type

[madsrasmussen]

Collection views need a consistent, pluggable way to render per-entity “cards”. That can be used across Collection Workspace Views and in the future Collection Item Pickers. Creating a reusable extension point centralizes the contract and lets packages provide tailored rendering (for example, user avatar or document status) without duplicating collection logic.

The PR introduces a new extension point entityCollectionItemCard that defines the contract for rendering individual entity cards inside collection views. The PR also adds two concrete implementations:

• user-entity type
• document- entity type

What to test:

• Please ensure that the Document Collection Card View still works as expected
  • Select/Deselect
  • Renders the configured "column" data in each card
• Please ensure that the User Collection Card View still works as expected
  • Select/Deselect
  • Renders avatars, user groups, etc.

Manifest Example

{
  type: 'entityCollectionItemCard',
  alias: 'My.EntityCollectionItemCard.CustomType',
  name: 'My Custom Type Entity Collection Item Card',
  element: () => import('./my-custom-type-collection-item-card.element.js'),
  forEntityTypes: ['my-custom-type'],
}

Basic Element Example

@customElement('my-custom-type-collection-item-card')
export class MyCustomTypeCollectionItemCardElement extends UmbLitElement {
	
  @property({ type: Object })
  item = false;

  @property({ type: Boolean })
  selectable = false;

  @property({ type: Boolean })
  selected = false;

  @property({ type: Boolean })
  selectOnly = false;

  @property({ type: String })
  href?: string;

  #onSelected(event: CustomEvent) {
    if (!this.item) return;
    event.stopPropagation();
    this.dispatchEvent(new UmbSelectedEvent(this.item.unique));
  }

  #onDeselected(event: CustomEvent) {
    if (!this.item) return;
    event.stopPropagation();
    this.dispatchEvent(new UmbDeselectedEvent(this.item.unique));
  }

  override render() {
    if (!this.item) return nothing;
    return html` <div>My Card rendering</div> `;
  }

  static override styles = [css``];
}

[Copilot]

Pull request overview

This PR introduces a new pluggable extension system for rendering collection item cards across the Umbraco backoffice. It creates a reusable entityCollectionItemCard extension point that allows packages to provide tailored card rendering for different entity types (e.g., user avatars, document status) without duplicating collection logic. The PR refactors existing user and document grid collection views to use this new extension system and provides two initial implementations.

Key Changes:

• Added new entityCollectionItemCard extension type with manifest definitions and a wrapper element that dynamically loads entity-specific card implementations
• Implemented user and document entity collection item cards that encapsulate entity-specific rendering logic previously embedded in grid collection views
• Refactored user and document grid collection views to use the new umb-entity-collection-item-card component

Reviewed changes

Copilot reviewed 20 out of 20 changed files in this pull request and generated 5 comments.

Show a summary per file

File	Description
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.extension.ts	Defines the manifest interface for the new extension type
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/entity-collection-item-card.element.ts	Main wrapper element that dynamically loads entity-specific card implementations based on entity type
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/entity-collection-item-card/default-collection-item-card.element.ts	Fallback card element used when no entity-specific implementation is registered
src/Umbraco.Web.UI.Client/src/packages/core/collection/item/types.ts	Adds UmbCollectionItemDetailPropertyConfig interface and exports entity collection item card types
src/Umbraco.Web.UI.Client/src/packages/core/collection/global-components.ts	Registers entity collection item card components globally
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/item/user-collection-item-card.element.ts	User-specific card implementation that renders user avatar, state, groups, and login information
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/item/manifests.ts	Registers user collection item card extension for user entity type
src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts	Refactored to use new umb-entity-collection-item-card component, removing inline user card rendering
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/document-collection-item-card.element.ts	Document-specific card wrapper that delegates to existing umb-document-grid-collection-card
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/manifests.ts	Registers document collection item card extension for document entity type
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/item/types.ts	Moves UmbDocumentCollectionItemModel and UmbEditableDocumentCollectionItemModel to item directory
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/types.ts	Re-exports collection item types from item subdirectory
src/Umbraco.Web.UI.Client/src/packages/documents/documents/collection/views/grid/document-grid-collection-view.element.ts	Refactored to use new umb-entity-collection-item-card component with detailProperties prop

Comments suppressed due to low confidence (1)

src/Umbraco.Web.UI.Client/src/packages/user/user/collection/views/grid/user-grid-collection-view.element.ts:51

• The _loading state variable (line 18) is checked in the render method (line 51) but is never updated to true anymore since the user groups loading logic was removed in this PR. Either remove the unused state variable and its check, or remove the unused check in the render method:

// Option 1: Remove the state variable and its check in render
override render() {
  return html`
    <div id="user-grid">
      ${repeat(
        this._users,
        (user) => user.unique,
        (user) => this.#renderUserCard(user),
      )}
    </div>
  `;
}

// Option 2: Keep if loading states will be added later
// But document why it's kept

	@state()
	private _loading = false;

	#collectionContext?: UmbUserCollectionContext;

	constructor() {
		super();

		this.consumeContext(UMB_USER_COLLECTION_CONTEXT, (instance) => {
			this.#collectionContext = instance;

			this.observe(
				this.#collectionContext?.selection.selection,
				(selection) => (this._selection = selection ?? []),
				'umbCollectionSelectionObserver',
			);

			this.observe(
				this.#collectionContext?.items,
				(items) => (this._users = items ?? []),
				'umbCollectionItemsObserver',
			);
		});
	}

	#onSelect(user: UmbUserDetailModel) {
		this.#collectionContext?.selection.select(user.unique ?? '');
	}

	#onDeselect(user: UmbUserDetailModel) {
		this.#collectionContext?.selection.deselect(user.unique ?? '');
	}

	override render() {
		if (this._loading) return nothing;

---

You can also share your feedback on Copilot code review for a chance to win a $100 gift card. Take the survey.

[leekelleher]

Testing out, all working as expected! 🚀