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.