15.3.0-rc2 • Published 4 months ago

@umbraco-cms/backoffice v15.3.0-rc2

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

@umbraco-cms/backoffice

This package contains the types for the Umbraco Backoffice.

Installation

npm install -D @umbraco-cms/backoffice

Usage

Vanilla JavaScript

Create an umbraco-package.json file in the root of your package.

{
	"name": "My.Package",
	"version": "0.1.0",
	"extensions": [
		{
			"type": "dashboard",
			"alias": "my.custom.dashboard",
			"name": "My Dashboard",
			"js": "/App_Plugins/MyPackage/dashboard.js",
			"weight": -1,
			"meta": {
				"label": "My Dashboard",
				"pathname": "my-dashboard"
			},
			"conditions": [
				{
					"alias": "Umb.Condition.SectionAlias",
					"match": "Umb.Section.Content"
				}
			]
		}
	]
}

Then create a dashboard.js file the same folder.

import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

const template = document.createElement('template');
template.innerHTML = `
  <style>
    :host {
      padding: 20px;
      display: block;
      box-sizing: border-box;
    }
  </style>

  <uui-box>
    <h1>Welcome to my dashboard</h1>
    <p>Example of vanilla JS code</p>

    <uui-button label="Click me" id="clickMe" look="secondary"></uui-button>
  </uui-box>
`;

export default class MyDashboardElement extends UmbElementMixin(HTMLElement) {
	/** @type {import('@umbraco-cms/backoffice/notification').UmbNotificationContext} */
	#notificationContext;

	constructor() {
		super();
		this.attachShadow({ mode: 'open' });
		this.shadowRoot.appendChild(template.content.cloneNode(true));

		this.shadowRoot.getElementById('clickMe').addEventListener('click', this.onClick.bind(this));

		this.consumeContext(UMB_NOTIFICATION_CONTEXT, (_instance) => {
			this.#notificationContext = _instance;
		});
	}

	onClick = () => {
		this.#notificationContext?.peek('positive', { data: { headline: 'Hello' } });
	};
}

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

TypeScript with Lit

First install Lit and Vite. This command will create a new folder called my-package which will have the Vite tooling and Lit for WebComponent development setup.

npm create vite@latest -- --template lit-ts my-package

Go to the new folder and install the backoffice package.

cd my-package
npm install -D @umbraco-cms/backoffice

Then go to the element located in src/my-element.ts and replace it with the following code.

// src/my-element.ts
import { LitElement, html, customElement } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { UmbNotificationContext, UMB_NOTIFICATION_CONTEXT } from '@umbraco-cms/backoffice/notification';

@customElement('my-element')
export default class MyElement extends UmbElementMixin(LitElement) {
	private _notificationContext?: UmbNotificationContext;

	constructor() {
		super();
		this.consumeContext(UMB_NOTIFICATION_CONTEXT, (_instance) => {
			this._notificationContext = _instance;
		});
	}

	onClick() {
		this._notificationContext?.peek('positive', { data: { message: '#h5yr' } });
	}

	override render() {
		return html`
			<uui-box headline="Welcome">
				<p>A TypeScript Lit Dashboard</p>
				<uui-button look="primary" label="Click me" @click=${() => this.onClick()}></uui-button>
			</uui-box>
		`;
	}
}

declare global {
	interface HTMLElementTagNameMap {
		'my-element': MyElement;
	}
}

Finally add an umbraco-package.json file in the root of your package folder my-package.

{
	"name": "My.Package",
	"version": "0.1.0",
	"extensions": [
		{
			"type": "dashboard",
			"alias": "my.custom.dashboard",
			"name": "My Dashboard",
			"js": "/App_Plugins/MyPackage/dist/my-package.js",
			"weight": -1,
			"meta": {
				"label": "My Dashboard",
				"pathname": "my-dashboard"
			},
			"conditions": [
				{
					"alias": "Umb.Condition.SectionAlias",
					"match": "Umb.Section.Content"
				}
			]
		}
	]
}
15.3.0-rc2

4 months ago

14.3.3

4 months ago

15.2.3

4 months ago

15.3.0-rc

4 months ago

15.2.2

5 months ago

15.2.1

5 months ago

15.2.0

5 months ago

15.2.0-rc

6 months ago

15.1.2

6 months ago

14.3.2

6 months ago

15.1.1

7 months ago

15.1.0

7 months ago

15.1.0-rc

8 months ago

15.0.0

8 months ago

15.0.0-rc4

8 months ago

15.0.0-rc3

8 months ago

14.3.1

9 months ago

15.0.0-rc2

9 months ago

15.0.0-rc1

9 months ago

14.3.0

9 months ago

14.3.0-rc

10 months ago

14.2.0

11 months ago

14.2.0-rc3

11 months ago

14.1.2

11 months ago

14.2.0-rc2

11 months ago

14.2.0-rc

11 months ago

14.1.0-rc2

1 year ago

14.1.0

1 year ago

14.1.1

12 months ago

14.0.0

1 year ago

14.1.0-rc

1 year ago

14.0.0-rc4

1 year ago

14.0.0-rc5

1 year ago

14.0.0-rc3

1 year ago

14.0.0-rc2

1 year ago

14.0.0-rc1

1 year ago

14.0.0-8d2a75e2

2 years ago

14.0.0-9986c334

2 years ago

14.0.0-a8030000

2 years ago

14.0.0-211750b8

2 years ago

14.0.0-7247a987

2 years ago

14.0.0-88da744e

2 years ago

14.0.0-d335c2c2

2 years ago

14.0.0-626fae63

2 years ago

14.0.0-8a5fc0ad

2 years ago

14.0.0-00685bde

2 years ago

14.0.0-0fa1ea6c

2 years ago

14.0.0-f71de1dd

2 years ago

14.0.0-2f667994

2 years ago

14.0.0-1ab621da

2 years ago

14.0.0-0062f100

2 years ago

14.0.0-45828375

2 years ago

14.0.0-c074e160

2 years ago

14.0.0-f42361a8

2 years ago

14.0.0-49dc460b

2 years ago

14.0.0-f95bc152

2 years ago

14.0.0-2a03783e

2 years ago

14.0.0-2088fc4f

2 years ago

14.0.0-5f7ff12f

2 years ago

14.0.0-ad074301

2 years ago

14.0.0-d542ed7d

2 years ago

14.0.0-5a9880ee

2 years ago

14.0.0-abd22b1c

2 years ago

14.0.0-3ba3eccb

2 years ago

14.0.0-d9a74398

2 years ago

14.0.0-ffdc9ddb

2 years ago

14.0.0-a8a86579

2 years ago

14.0.0-204d19ad

2 years ago

14.0.0-631d8769

2 years ago

14.0.0-ef334a6d

2 years ago

14.0.0-5de3fef4

2 years ago

14.0.0-1782709d

2 years ago

14.0.0-b0704cee

2 years ago

14.0.0-41f35ef1

2 years ago

14.0.0-8f7cbf82

2 years ago

14.0.0-828c62a3

2 years ago

14.0.0-d1e3dd1a

2 years ago

14.0.0-1c3e1277

2 years ago

14.0.0-bd6f74b3

2 years ago

14.0.0-c5787966

2 years ago

14.0.0-e7aa9547

2 years ago

14.0.0-78252bab

2 years ago

14.0.0-c26a40c4

2 years ago

14.0.0-258b103a

2 years ago

14.0.0-d1fdb88f

2 years ago

14.0.0-f96e8145

2 years ago

14.0.0-3ffd4766

2 years ago

14.0.0-a0074b6e

2 years ago

14.0.0-e72b5840

2 years ago

14.0.0-ce7724db

2 years ago

14.0.0-2e9e732b

2 years ago

14.0.0-eb4f487e

2 years ago

14.0.0-178e68bb

2 years ago

14.0.0-d87d656d

2 years ago

14.0.0-fee20147

2 years ago

14.0.0-3e938fa1

2 years ago

14.0.0-4f2c7caf

2 years ago

14.0.0-2715ec0f

2 years ago

14.0.0-3926df31

2 years ago

14.0.0-96df70e1

2 years ago

14.0.0-9cc9c792

2 years ago

14.0.0-af04d43f

2 years ago

14.0.0-43239cee

2 years ago

14.0.0-59f7ab3a

2 years ago

14.0.0-7a343e97

2 years ago

14.0.0-0ffe56e5

2 years ago

14.0.0-8c1d7e37

2 years ago

14.0.0-40e04294

2 years ago

14.0.0-695f1c3f

2 years ago

14.0.0-5c4aa044

2 years ago

14.0.0-3aaba617

2 years ago

14.0.0-38c20fca

2 years ago

14.0.0-709b3cbf

2 years ago

14.0.0-1ebba150

2 years ago

14.0.0-e0d20272

2 years ago

14.0.0-5a2334a0

2 years ago

14.0.0-84ca069c

2 years ago

14.0.0-500b9dc0

2 years ago

14.0.0-b4220695

2 years ago

14.0.0-21bc0c4e

2 years ago

14.0.0-1042e691

2 years ago

14.0.0-efb93e33

2 years ago

14.0.0-a353ecfe

2 years ago

14.0.0-335b4f13

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago