Back to Details

umbraco-dashboard

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Umbraco Dashboard

Umbraco 仪表盘

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.
仪表盘是Umbraco后台区域中可自定义的组件，用于展示信息和功能。它们会为树状结构中选中的项目显示一个“编辑器”，当没有选中项目时则显示默认区域信息。仪表盘通过条件控制其在后台中的显示位置和时机。

Documentation

文档参考

Always fetch the latest docs before implementing:
在开始实现前，请务必获取最新文档：

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.
Umbraco源码中包含一个可运行的示例：
位置：
/Umbraco-CMS/src/Umbraco.Web.UI.Client/examples/dashboard-with-property-dataset/
该示例展示了一个使用属性数据集进行数据绑定的仪表盘。可参考此示例了解生产环境中的实现模式。

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
如果在实现仪表盘时需要解释这些基础概念，请参考以下技能：
  • Umbraco Element / UmbElementMixin：在实现仪表盘元素时，解释UmbElementMixin、UmbLitElement或基类模式
    • 参考技能：
      umbraco-umbraco-element
  • Context API：在实现上下文消费（consumeContext）、提供上下文或访问UMB_NOTIFICATION_CONTEXT等服务时
    • 参考技能：
      umbraco-context-api
  • Localization：在实现翻译、使用localize.term()或添加多语言支持时
    • 参考技能：
      umbraco-localization
  • State Management：在实现响应式状态、使用 observables、UmbState或@state()装饰器时
    • 参考技能：
      umbraco-state-management
  • Conditions：在实现可见性控制、区域限制或条件渲染时
    • 参考技能：
      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
  1. 获取文档 - 使用WebFetch访问上述URL
  2. 明确需求 - 要在哪个区域？需要什么功能？谁可以访问？
  3. 生成文件 - 根据最新文档创建清单文件和实现代码
  4. 讲解说明 - 展示创建的内容以及测试方法

Minimal Examples

最简示例

Manifest (umbraco-package.json)

清单文件（umbraco-package.json）

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"
    }
  ]
}
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)

实现代码（dashboard.js）

javascript
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.
javascript
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);
就是这样！请始终获取最新文档，保持示例简洁，生成完整可运行的代码。