skills.rest
umbraco
umbracoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

umbraco-controllers

Create Umbraco backoffice controllers extending UmbControllerBase with lifecycle methods.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers understand and create controllers in the Umbraco backoffice, which are essential for managing reusable logic and component lifecycles.

Core Features & Use Cases

  • Controller Creation: Learn to write custom controllers extending UmbControllerBase.
  • Lifecycle Management: Understand and implement hostConnected, hostDisconnected, and destroy methods for side-effect management.
  • Context Access: Utilize controllers to access and interact with Umbraco contexts like notifications.
  • Use Case: Develop a controller to manage a timer within a backoffice component, ensuring proper cleanup when the component is removed from the DOM.

Quick Start

Fetch the latest documentation on Umbraco controllers and generate a custom controller that logs messages during its lifecycle events.

Frequently Asked Questions about umbraco-controllers

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

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

To create a custom Umbraco backoffice controller, you write a TypeScript class extending `UmbControllerBase` to encapsulate reusable component logic. This approach integrates your custom functionality directly into the Umbraco front-end architecture.

How does component lifecycle management work for Umbraco controllers?▼

Lifecycle management in Umbraco controllers uses `hostConnected`, `hostDisconnected`, and `destroy` methods. These methods allow you to manage side effects and ensure proper resource cleanup when components are removed from the DOM.

What do I need to know to build controllers for Umbraco backoffice components?▼

Building Umbraco backoffice controllers requires understanding TypeScript, Web Components, and Umbraco's class API. This foundational knowledge is necessary for effectively implementing component logic and extending the backoffice architecture.

Can I use Umbraco controllers to access backoffice notifications?▼

Yes, you can use Umbraco controllers to access and interact with backoffice contexts like notifications. Controllers serve as a bridge to consume these contexts within your custom Web Components.

What is the best way to handle side effects when removing an Umbraco backoffice component from the DOM?▼

The best way to handle side effects during DOM removal is implementing the `hostDisconnected` and `destroy` methods in your Umbraco controller. This ensures proper cleanup, such as stopping a timer, when the component is removed.

Related Skills

Explore More Software Engineering Skills→
kraftvaerkkraftvaerk

umbraco-controllers

Create and manage Umbraco backoffice controllers with TypeScript lifecycle methods.

Official
Intermediate
albanistalbanist
4

umbraco-controllers

Create and manage Umbraco backoffice controllers with code examples.

Community
Intermediate
kraftvaerkkraftvaerk

umbraco-umbraco-element

Generate Umbraco Elements with UmbElementMixin and UmbLitElement for the Umbraco Backoffice.

Official
Intermediate
albanistrefialbanistrefi
4

umbraco-controllers

Create reusable Umbraco backoffice controllers extending UmbControllerBase with lifecycle methods.

Community
Intermediate