umbracoprereleases - @umbraco-cms/backoffice 14.3.1
> npm install @umbraco-cms/backoffice@14.3.1
@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"
}
]
}
]
}
Ownersumbraco |
AuthorsUmbraco A/S (backoffice@umbraco.com) |
LicenseMIT |
Info71 total downloads |
1 downloads for version 14.3.1 |
Download (10.26 MB) |
Package history
Version | Size | Last updated | Downloads | Mirrored? | |||
---|---|---|---|---|---|---|---|
15.1.1 | 9.99 MB | Thu, 12 Dec 2024 14:00:05 GMT | 2 | ||||
15.1.0-rc2 | 9.96 MB | Thu, 28 Nov 2024 14:10:11 GMT | 0 | ||||
15.0.0 | 10.58 MB | Wed, 13 Nov 2024 18:55:05 GMT | 67 | ||||
15.0.0-rc4 | 10.58 MB | Wed, 13 Nov 2024 13:31:39 GMT | 1 | ||||
14.3.1 | 10.26 MB | Mon, 21 Oct 2024 10:35:58 GMT | 1 |