Can I target specific sections of the CMS with my view?

Yes, you can use conditions like 'Umb.Condition.CollectionAlias' to target Documents, Media, Members, or custom data collections.

What is an Umbraco Collection View?

A Collection View is an extension that defines how data is displayed in the Umbraco backoffice, allowing users to switch between layouts like tables, grids, or custom card views.

Is it possible to add icons and labels to the view switcher?

Absolutely. The skill configures the meta properties in the manifest, including label, icon, and pathName for deep linking.

Does this skill follow Umbraco 14+ best practices?

Yes, it is specifically designed for the modern Umbraco backoffice using TypeScript, Lit elements, and the new Extension Registry system.

How does the skill handle data fetching?

The skill implements patterns using the Umbraco Context API to consume collection data and observe state changes for reactive UI updates.

Umbraco Collection View Builder

Name: Umbraco Collection View Builder
Author: umbraco

byumbraco

•

内容管理

Streamlines the implementation of custom data visualizations and collection views for the Umbraco CMS backoffice.

The Umbraco Collection View skill enables developers to extend the Umbraco CMS backoffice by creating specialized visual representations for entity lists, such as custom tables, grids, and card layouts. It automates the generation of manifests and Lit-based view elements while ensuring full compatibility with the Umbraco Context API and State Management systems. By fetching the latest documentation, the skill provides accurate implementation patterns for displaying data from documents, media, members, and custom collections.

主要功能

01Supports conditional display logic based on Umbraco entity aliases

02Integrates seamlessly with UMB_COLLECTION_CONTEXT for real-time data binding

031 GitHub stars

04Creates reactive Lit elements utilizing the UmbLitElement base class

05Provides templates for table, grid, card, and thumbnail layouts

06Generates standardized Umbraco manifest configurations for collection views

使用场景

01Building a high-density thumbnail view for the Umbraco Media library

02Adding specialized data columns to standard member and user lists

03Developing a custom card-based dashboard for product catalog management

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add umbraco/umbraco-cms-backoffice-skills umbraco-collection-view

For use in Claude.ai and ChatGPT

Download Skill