POC: Dynamic Dashboards / Dashboard apps

[Franck-Boost]

Dynamic Dashboards / Dashboard Apps

Context: umbraco#19575 (comment)

Register a dashboard

{
  type: 'dashboard',
  kind: 'default',
  alias: 'My.Dashboard',
  name: 'My Dashboard',
  weight: '1000',
  meta: {
    label: 'My Dashboard',
    pathname: 'my-dashboard',
   },
  conditions: [
    {
      alias: 'Umb.Condition.SectionAlias',
      match': UMB_USER_MANAGEMENT_SECTION_ALIAS,
    },
  ]
},

Register an app

 {
  type: 'dashboardApp',
  alias: 'My.DashboardApp',
  name: 'My Dashboard App',
  weight: 100,
  element: () => import('./my-dashboard-app.element.js'),
  meta: {
    headline: 'My App',
    size: 'small',
  },
 }

App Element

import { html, customElement, property } from '@umbraco-cms/backoffice/external/lit';
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import type { ManifestDashboardApp, UmbDashboardAppElement, UmbDashboardAppSize } from '@umbraco-cms/backoffice/dashboard';

@customElement('my-dashboard-app')
export class MyDashboardAppElement extends UmbLitElement implements UmbDashboardAppElement {
  @property({ type: Object })
  manifest?: ManifestDashboardApp;

  @property({ type: String })
  size?: UmbDashboardAppSize;

  override render() {
    return html`
      <umb-dashboard-app-layout headline="My Dashboard App">
        <p>My Dashboard App</p>
      </umb-dashboard-app-layout>
    `;
  }
}

export { MyDashboardAppElement as element };

declare global {
  interface HTMLElementTagNameMap {
    ['my-dashboard-app']: MyDashboardAppElement;
  }
}