skills.rest
albanist
albanistCOMMUNITY
Explore all skills by this author →
GitHub

umbraco-collection-view

Implement custom Umbraco backoffice collection views with TypeScript and LitElement.

4|Updated Mar 6, 2026
Search Tags:#typescript#customization#frontend development#umbraco#backoffice#collection view
One-click install
npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-collection-view-albanist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-collection-view
Source: https://github.com/albanist/umbraco_CLI/tree/main/skills/extensions/umbraco-collection-view
Command: npx skills add https://github.com/albanist/umbraco_CLI --skill umbraco-collection-view-albanist

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill enables the creation of custom visual representations for data collections within the Umbraco backoffice, moving beyond default table or list views.

Core Features & Use Cases

  • Customizable Views: Design unique layouts like grids, cards, or specialized tables for displaying collection items.
  • Dynamic Data Presentation: Integrate with Umbraco's context API to display item data effectively.
  • Use Case: Implement a card-based view for media items, showing thumbnails and basic details, or a detailed table view for content items with custom sortable columns.

Quick Start

Use the umbraco-collection-view skill to create a new card-based view for the 'Umb.Collection.Media' collection.

Frequently Asked Questions about umbraco-collection-view

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a custom collection view in the Umbraco backoffice?▼

A custom collection view in Umbraco uses TypeScript and LitElement to define manifest files and view elements, enabling dynamic data presentation for unique layouts like grids or specialized tables.

What is needed to customize Umbraco collection displays beyond default tables?▼

Customizing Umbraco collection displays requires understanding Umbraco extension types and the collection context API to integrate dynamic data presentation and design unique visual representations like card-based layouts.

Can I build a card-based layout for Umbraco media items?▼

Yes, you can build a card-based layout for Umbraco media items by implementing a custom collection view that integrates with the context API to display thumbnails and basic details dynamically.

Does customizing Umbraco backoffice collections require LitElement?▼

Yes, creating custom collection views for the Umbraco backoffice requires LitElement and TypeScript to implement the view elements that render dynamic data presentations.

How do I display dynamic data in an Umbraco custom collection view?▼

To display dynamic data in an Umbraco custom collection view, integrate with the Umbraco collection context API within your TypeScript and LitElement view elements to fetch and present item data effectively.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-search-result-item

Generate custom search result item components for the Umbraco backoffice.

Official
Intermediate
albanistalbanist
4

umbraco-tree-item

Implement custom Umbraco backoffice tree items with dynamic icons and labels.

Community
Intermediate
umbracoumbraco
26

umbraco-picker-data-source

Implement custom picker data sources for Umbraco backoffice property editors.

Official
Intermediate
kraftvaerkkraftvaerk

umbraco-collection

Implement custom collections in the Umbraco backoffice with TypeScript and LitElement.

Official
Advanced