umbraco-modals

Implement dialogs and sidebars in the Umbraco backoffice with token-based communication.

26|13|Updated Nov 30, 2025
One-click install
npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-modals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: umbraco-modals
Source: https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills/tree/main/plugins/umbraco-backoffice-skills/skills/umbraco-modals
Command: npx skills add https://github.com/umbraco/Umbraco-CMS-Backoffice-Skills --skill umbraco-modals

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers implement modals (dialogs and sidebars) within the Umbraco backoffice, providing a structured way to interact with users and gather information.

Core Features & Use Cases

  • Modal Implementation: Create custom dialogs or sidebars using Umbraco's extension system.
  • Route Registration: Make modals accessible via URLs for deep-linking.
  • Token-based Communication: Ensure type-safe data transfer between modals and the backoffice.
  • Use Case: You need to create a confirmation dialog before a user deletes an item in the Umbraco backoffice. This skill guides you through creating that modal.

Quick Start

Use the umbraco-modals skill to create a new sidebar modal for editing content properties.

Frequently Asked Questions about umbraco-modals

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

FAQPage Schema
How do I implement a modal dialog in the Umbraco backoffice?▼

To implement an Umbraco backoffice modal dialog, you create custom modal elements and manifests using Umbraco's extension system. This approach provides a structured way to interact with users and gather information directly within the backoffice interface.

How does token-based communication work for Umbraco modals?▼

Token-based communication for Umbraco modals ensures type-safe data transfer between the modal and the backoffice. It facilitates creating specific tokens that maintain data integrity during interactions with the modal manager context.

Can I make Umbraco sidebar modals accessible via URLs for deep-linking?▼

Yes, you can make Umbraco sidebar modals accessible via URLs by using route registration. This allows users to navigate directly to specific modal states through deep-linking within the backoffice.

When do I need to use the extension registry for Umbraco modals?▼

You need to use the Umbraco extension registry when you want to integrate custom modal elements into the backoffice. It supports the creation of manifests and tokens required for type-safe modal communication.

What is the best way to create a confirmation dialog before deleting an item in Umbraco?▼

The best way to create a confirmation dialog in Umbraco is by implementing a custom modal dialog. This provides a structured interface to interact with users and confirm actions like deletion before they execute.