umbraco-controllers

Create reusable Umbraco backoffice controllers extending UmbControllerBase with lifecycle methods.

4|Updated Mar 6, 2026
One-click install
npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-controllers-albanistrefi
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: umbraco-controllers
Source: https://github.com/albanistrefi/umbraco_CLI/tree/main/skills/foundation/umbraco-controllers
Command: npx skills add https://github.com/albanistrefi/umbraco_CLI --skill umbraco-controllers-albanistrefi

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the challenge of adding structured, reusable UI logic to Umbraco backoffice components without mixing lifecycle concerns into element code.

Core Features & Use Cases

  • Understand controllers and lifecycles: Learn how hostConnected(), hostDisconnected(), and destroy() manage timers, subscriptions, and cleanup.
  • Create minimal working controllers: Implement controllers by extending UmbControllerBase and let them auto-register with the host element.
  • Compose and reuse logic: Use controller composition so one controller can host another, and access contexts when needed.
  • Use safe API patterns: Ensure API calls from controllers avoid raw fetch() and instead use the generated OpenAPI client configured with Umbraco auth.

Quick Start

Ask: "Using the Umbraco controller docs, generate a complete TypeScript controller that starts a timer on hostConnected, clears it on hostDisconnected, and exposes a getter for elapsed seconds, then show how to host it inside an element."

Frequently Asked Questions about umbraco-controllers

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

FAQPage Schema
How do I manage timers and subscriptions in Umbraco backoffice controllers?

Umbraco backoffice controllers manage timers and subscriptions by extending UmbControllerBase. Implement lifecycle methods like hostConnected() to start timers and hostDisconnected() or destroy() to safely clear them and clean up subscriptions.

How do I create a reusable controller in Umbraco that accesses contexts?

To create a reusable controller in Umbraco, extend UmbControllerBase and let it auto-register with the host element. You can access required Umbraco contexts directly within the controller class to compose and reuse UI logic safely.

How do I call APIs from an Umbraco backoffice controller without using raw fetch?

Calling APIs from an Umbraco backoffice controller requires using the generated OpenAPI client instead of raw fetch. This ensures your controller-driven workflows automatically include the correct Umbraco authentication and configuration.

What is the best way to handle side effects in Umbraco backoffice UI development?

Handling side effects in Umbraco backoffice UI development is best done by encapsulating them in reusable controllers. This approach separates lifecycle-bound logic like timers and subscriptions from your element code, ensuring safe composition.

Can one Umbraco controller host another controller for composition?

Yes, one Umbraco controller can host another to enable controller composition. This pattern allows you to nest reusable logic, where parent controllers manage the lifecycle and context access of their child controllers.

Why do I need to use hostConnected and hostDisconnected in Umbraco controllers?

You need hostConnected and hostDisconnected in Umbraco controllers to manage lifecycle-bound side effects. These methods ensure resources like timers and event subscriptions are initialized when the host is active and cleaned up upon disconnection.