umbraco-dashboard

Umbraco Dashboard

What is it?

Dashboards are customizable components that appear in Umbraco's backoffice sections to display information and functionality. They show an 'editor' for the selected item in the tree or default section information when no item is selected. Dashboards use conditions to control where and when they appear in the backoffice.

Documentation

Always fetch the latest docs before implementing:

• Main docs: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-types/dashboard
• Foundation: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/foundation
• Extension Registry: https://docs.umbraco.com/umbraco-cms/extend-your-project/backoffice-extensions/extending-overview/extension-registry
• Tutorial: https://docs.umbraco.com/umbraco-cms/extend-your-project/tutorials/creating-a-custom-dashboard

Reference Example

The Umbraco source includes a working example:

Location: /Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/

This example demonstrates a dashboard that uses property datasets for data binding. Study this for production patterns.

Related Foundation Skills

If you need to explain these foundational concepts when implementing dashboards, reference these skills:

• Umbraco Element / UmbElementMixin: When implementing dashboard elements, explaining UmbElementMixin, UmbLitElement, or base class patterns

  • Reference skill: umbraco-umbraco-element

• Context API: When implementing context consumption (consumeContext), providing contexts, or accessing services like UMB_NOTIFICATION_CONTEXT

  • Reference skill: umbraco-context-api

• Localization: When implementing translations, using localize.term(), or adding multi-language support

  • Reference skill: umbraco-localization

• State Management: When implementing reactive state, using observables, UmbState, or @state() decorator

  • Reference skill: umbraco-state-management

• Conditions: When implementing visibility controls, section restrictions, or conditional rendering

  • Reference skill: umbraco-conditions

Workflow

1. Fetch docs - Use WebFetch on the URLs above
2. Ask questions - What section? What functionality? Who can access?
3. Generate files - Create manifest + implementation based on latest docs
4. Explain - Show what was created and how to test

Minimal Examples

Manifest (umbraco-package.json)

{
  "type": "dashboard",
  "alias": "my.dashboard",
  "name": "My Dashboard",
  "element": "/App_Plugins/MyDashboard/dashboard.js",
  "meta": {
    "label": "My Dashboard",
    "pathname": "my-dashboard"
  },
  "conditions": [
    {
      "alias": "Umb.Condition.SectionAlias",
      "match": "Umb.Section.Content"
    }
  ]
}

Implementation (dashboard.js)

import { LitElement, html, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

export default class MyDashboardElement extends UmbElementMixin(LitElement) {
  render() {
    return html`
      <uui-box headline="My Dashboard">
        <p>Dashboard content goes here</p>
      </uui-box>
    `;
  }

  static styles = css`
    :host {
      display: block;
      padding: var(--uui-size-space-4);
    }
  `;
}

customElements.define('my-dashboard', MyDashboardElement);

That's it! Always fetch fresh docs, keep examples minimal, generate complete working code.