14.0.0-rc3 • Published 6 days ago

@umbraco-cms/backoffice v14.0.0-rc3

Weekly downloads
-
License
MIT
Repository
github
Last release
6 days 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' } });
	}

	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"
				}
			]
		}
	]
}
14.0.0-rc3

6 days ago

14.0.0-rc2

18 days ago

14.0.0-rc1

26 days ago

14.0.0-8d2a75e2

9 months ago

14.0.0-9986c334

10 months ago

14.0.0-a8030000

8 months ago

14.0.0-211750b8

10 months ago

14.0.0-7247a987

11 months ago

14.0.0-88da744e

8 months ago

14.0.0-d335c2c2

11 months ago

14.0.0-626fae63

10 months ago

14.0.0-8a5fc0ad

10 months ago

14.0.0-00685bde

10 months ago

14.0.0-0fa1ea6c

10 months ago

14.0.0-f71de1dd

9 months ago

14.0.0-2f667994

9 months ago

14.0.0-1ab621da

7 months ago

14.0.0-0062f100

8 months ago

14.0.0-45828375

8 months ago

14.0.0-c074e160

8 months ago

14.0.0-f42361a8

9 months ago

14.0.0-49dc460b

10 months ago

14.0.0-f95bc152

9 months ago

14.0.0-2a03783e

9 months ago

14.0.0-2088fc4f

7 months ago

14.0.0-5f7ff12f

11 months ago

14.0.0-ad074301

7 months ago

14.0.0-d542ed7d

10 months ago

14.0.0-5a9880ee

8 months ago

14.0.0-abd22b1c

8 months ago

14.0.0-3ba3eccb

8 months ago

14.0.0-d9a74398

9 months ago

14.0.0-ffdc9ddb

10 months ago

14.0.0-a8a86579

11 months ago

14.0.0-204d19ad

8 months ago

14.0.0-631d8769

8 months ago

14.0.0-ef334a6d

8 months ago

14.0.0-5de3fef4

9 months ago

14.0.0-1782709d

8 months ago

14.0.0-b0704cee

10 months ago

14.0.0-41f35ef1

10 months ago

14.0.0-8f7cbf82

8 months ago

14.0.0-828c62a3

11 months ago

14.0.0-d1e3dd1a

10 months ago

14.0.0-1c3e1277

11 months ago

14.0.0-bd6f74b3

9 months ago

14.0.0-c5787966

9 months ago

14.0.0-e7aa9547

10 months ago

14.0.0-78252bab

9 months ago

14.0.0-c26a40c4

9 months ago

14.0.0-258b103a

10 months ago

14.0.0-d1fdb88f

8 months ago

14.0.0-f96e8145

10 months ago

14.0.0-3ffd4766

8 months ago

14.0.0-a0074b6e

8 months ago

14.0.0-e72b5840

10 months ago

14.0.0-ce7724db

8 months ago

14.0.0-2e9e732b

8 months ago

14.0.0-eb4f487e

8 months ago

14.0.0-178e68bb

9 months ago

14.0.0-d87d656d

10 months ago

14.0.0-fee20147

8 months ago

14.0.0-3e938fa1

9 months ago

14.0.0-4f2c7caf

8 months ago

14.0.0-2715ec0f

8 months ago

14.0.0-3926df31

10 months ago

14.0.0-96df70e1

9 months ago

14.0.0-9cc9c792

8 months ago

14.0.0-af04d43f

8 months ago

14.0.0-43239cee

7 months ago

14.0.0-59f7ab3a

9 months ago

14.0.0-7a343e97

10 months ago

14.0.0-0ffe56e5

8 months ago

14.0.0-8c1d7e37

10 months ago

14.0.0-40e04294

8 months ago

14.0.0-695f1c3f

8 months ago

14.0.0-5c4aa044

8 months ago

14.0.0--preview003

7 months ago

14.0.0--preview004

7 months ago

14.0.0-3aaba617

11 months ago

14.0.0-38c20fca

8 months ago

14.0.0-709b3cbf

8 months ago

14.0.0-1ebba150

10 months ago

14.0.0-e0d20272

11 months ago

14.0.0-5a2334a0

11 months ago

14.0.0-84ca069c

11 months ago

14.0.0-500b9dc0

11 months ago

14.0.0-b4220695

11 months ago

1.0.0-next.8aae7c05

11 months ago

1.0.0-next.4806711d

12 months ago

1.0.0-next.89a86779

12 months ago

1.0.0-next.1b15a442

11 months ago

1.0.0-next.3e9c9808

12 months ago

1.0.0-next.c8d079d2

12 months ago

1.0.0-next.2fa43897

12 months ago

1.0.0-next.4ca219c0

12 months ago

1.0.0-next.93ea2ba6

12 months ago

1.0.0-next.a1f8739a

12 months ago

1.0.0-next.6773b0c0

11 months ago

1.0.0-next.70bfba05

12 months ago

14.0.0-21bc0c4e

11 months ago

1.0.0-next.04da68ae

12 months ago

1.0.0-next.602f2496

12 months ago

1.0.0-next.d3799bce

11 months ago

1.0.0-next.b435296e

12 months ago

1.0.0-next.41f66c17

12 months ago

1.0.0-next.014cf38c

12 months ago

14.0.0-1042e691

11 months ago

1.0.0-next.6046d163

11 months ago

1.0.0-next.443bb13f

11 months ago

1.0.0-next.480098a9

12 months ago

1.0.0-next.75b6c41a

12 months ago

1.0.0-next.02cd8954

12 months ago

1.0.0-next.f625a26b

11 months ago

1.0.0-next.f7d2d3b5

11 months ago

1.0.0-next.4ed2b734

12 months ago

1.0.0-next.4af77e6f

11 months ago

1.0.0-next.8f27ff33

12 months ago

1.0.0-next.e6f5fdea

11 months ago

1.0.0-next.d00e5ce3

12 months ago

1.0.0-next.386e13e7

12 months ago

1.0.0-next.27d8e47c

12 months ago

1.0.0-next.27fe3b4b

12 months ago

1.0.0-next.93ffdc6a

12 months ago

1.0.0-next.92acfa89

12 months ago

1.0.0-next.965e6eec

12 months ago

14.0.0-efb93e33

11 months ago

1.0.0-next.202a8bfa

11 months ago

1.0.0-next.0a77f13f

11 months ago

1.0.0-next.d3d67db5

12 months ago

1.0.0-next.8b7043b9

12 months ago

1.0.0-next.271d4acb

11 months ago

1.0.0-next.84ba68c2

12 months ago

1.0.0-next.90f9c709

12 months ago

1.0.0-next.c1d5520a

11 months ago

1.0.0-next.94806f68

11 months ago

1.0.0-next.af912d14

11 months ago

1.0.0-next.ed0b8881

12 months ago

1.0.0-next.84b71a2f

12 months ago

1.0.0-next.6cb667b0

12 months ago

1.0.0-next.3ef9a292

12 months ago

1.0.0-next.62b76059

12 months ago

1.0.0-next.c216900c

12 months ago

1.0.0-next.d488063a

12 months ago

1.0.0-next.1393b9f7

12 months ago

1.0.0-next.47874b74

12 months ago

1.0.0-next.075428d1

12 months ago

14.0.0-a353ecfe

11 months ago

1.0.0-next.20caa88a

11 months ago

1.0.0-next.05c58308

11 months ago

1.0.0-next.186405ee

12 months ago

1.0.0-next.752d37d9

12 months ago

1.0.0-next.81b4603f

12 months ago

1.0.0-next.b2711768

12 months ago

1.0.0-next.47679773

12 months ago

1.0.0-next.264a3c21

12 months ago

1.0.0-next.49f05cfb

12 months ago

1.0.0-next.3cd9a407

12 months ago

1.0.0-next.ebf3d30a

11 months ago

1.0.0-next.ea1e6e6f

12 months ago

14.0.0-335b4f13

11 months ago

1.0.0-next.c3ee1ee0

11 months ago

1.0.0-next.64807396

12 months ago

1.0.0-next.eac9576f

11 months ago

1.0.0-next.af81f4c7

12 months ago

1.0.0-next.c2cff3d5

11 months ago

1.0.0-next.16e6a8bf

12 months ago

1.0.0-next.416f0335

12 months ago

0.0.2

1 year ago

0.0.1

1 year ago