From 91774da31f38f9bdc82e3b020a955f87e03c3ff6 Mon Sep 17 00:00:00 2001 From: "Alina-Magdalena Tincas (Umbraco HQ)" Date: Thu, 2 May 2024 16:53:03 +0200 Subject: [PATCH 1/5] update v14 manifest files --- .../creating-a-custom-dashboard/README.md | 2 +- .../adding-localization-to-the-dashboard.md | 16 +++++++++++++--- .../tutorials/creating-your-first-extension.md | 6 +++--- 3 files changed, 17 insertions(+), 7 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md index 9cea103a1f8..f14a3004bb1 100644 --- a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md +++ b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/README.md @@ -66,7 +66,7 @@ At each step, you will find a dropdown for `welcome-dashboard.element.ts`, `and "type": "dashboard", "alias": "my.welcome.dashboard", "name": "My Welcome Dashboard", - "js": "/App_Plugins/welcome-dashboard/dist/welcome-dashboard.js", + "element": "/App_Plugins/welcome-dashboard/dist/welcome-dashboard.js", "elementName": "my-welcome-dashboard", "weight": -1, "meta": { diff --git a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md index 95a81d0f677..185f65f35e2 100644 --- a/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md +++ b/14/umbraco-cms/tutorials/creating-a-custom-dashboard/adding-localization-to-the-dashboard.md @@ -22,6 +22,7 @@ The steps we will go through in second part are: * Add the following code to `en-us.js` {% code title="en-us.js" lineNumbers="true" %} + ```javascript export default { welcomeDashboard: { @@ -31,11 +32,13 @@ export default { } }; ``` + {% endcode %} * Add the following code to `da-dk.js` {% code title="da-dk.js" lineNumbers="true" %} + ```javascript export default { welcomeDashboard: { @@ -45,6 +48,7 @@ export default { } }; ``` + {% endcode %} ## Register Localization Files @@ -52,6 +56,7 @@ export default { Now let's update our `umbraco-package.json` extensions object to register our new localization files: {% code title="umbraco-package.json" %} + ```typescript { ... @@ -78,6 +83,7 @@ Now let's update our `umbraco-package.json` extensions object to register our ne ] } ``` + {% endcode %}
@@ -85,6 +91,7 @@ Now let's update our `umbraco-package.json` extensions object to register our ne See the entire file: umbraco-package.json {% code title="umbraco-package.json" lineNumbers="true" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -95,7 +102,7 @@ Now let's update our `umbraco-package.json` extensions object to register our ne "type": "dashboard", "alias": "my.welcome.dashboard", "name": "My Welcome Dashboard", - "js": "/App_Plugins/welcome-dashboard/dist/welcome-dashboard.js", + "element": "/App_Plugins/welcome-dashboard/dist/welcome-dashboard.js", "elementName": "my-welcome-dashboard", "weight": -1, "meta": { @@ -130,6 +137,7 @@ Now let's update our `umbraco-package.json` extensions object to register our ne ] } ``` + {% endcode %}
@@ -145,6 +153,7 @@ We can use the `umb-localize` element to get the localizations out, which takes Let's start using the localizations. Update the `welcome-dashboard.element.ts`: {% code title="welcome-dashboard.element.ts" %} + ```typescript render() { return html` @@ -168,6 +177,7 @@ render() { `; } ``` + {% endcode %}
@@ -175,6 +185,7 @@ render() { See the entire file: welcome-dashboard.element.ts {% code title="welcome-dashboard.element.ts" lineNumbers="true" %} + ```typescript import { LitElement, css, html, customElement} from "@umbraco-cms/backoffice/external/lit"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @@ -222,6 +233,7 @@ declare global { } } ``` + {% endcode %}
@@ -241,8 +253,6 @@ This is how our dashboard should now look like:

Dashboard if the user's language is English / Fallback

- -

Dashboard if the user's language is Danish

diff --git a/14/umbraco-cms/tutorials/creating-your-first-extension.md b/14/umbraco-cms/tutorials/creating-your-first-extension.md index 1a2a323bf41..4f31ebe6d1d 100644 --- a/14/umbraco-cms/tutorials/creating-your-first-extension.md +++ b/14/umbraco-cms/tutorials/creating-your-first-extension.md @@ -213,7 +213,7 @@ import { UMB_NOTIFICATION_CONTEXT, } from "@umbraco-cms/backoffice/notification"; -@customElement("my-typescript-element") +@customElement('my-typescript-element') export default class MyTypeScriptElement extends UmbElementMixin(LitElement) { #notificationContext?: UmbNotificationContext; @@ -246,7 +246,7 @@ export default class MyTypeScriptElement extends UmbElementMixin(LitElement) { declare global { interface HTMLElementTagNameMap { - "my-typescript-element": MyTypeScriptElement; + 'my-typescript-element': MyTypeScriptElement; } } @@ -282,7 +282,7 @@ After running the build, you will see a new file in the `dist` folder with the n "type": "dashboard", "alias": "My.Dashboard.MyTypeScriptExtension", "name": "My TypeScript Extension", - "js": "/App_Plugins/my-typescript-extension/dist/my-typescript-extension.js", + "element": "/App_Plugins/my-typescript-extension/dist/my-typescript-extension.js", "weight": -1, "meta": { "label": "My TypeScript Extension", From efd9297b3fa9c275d524436813e980849f1ddff8 Mon Sep 17 00:00:00 2001 From: "Alina-Magdalena Tincas (Umbraco HQ)" Date: Fri, 3 May 2024 13:54:45 +0200 Subject: [PATCH 2/5] update some more articles --- .../development-flow/vite-package-setup.md | 2 +- .../extension-types/dashboards.md | 32 ++--- .../property-editors/property-editor-ui.md | 112 +++++++++--------- 3 files changed, 73 insertions(+), 73 deletions(-) diff --git a/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md b/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md index 02e217c83fb..b429174fc8d 100644 --- a/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md +++ b/14/umbraco-cms/extending-backoffice/development-flow/vite-package-setup.md @@ -138,7 +138,7 @@ This example declares a Dashboard as part of your Package, using the Vite exampl "type": "dashboard", "alias": "My.Dashboard.MyExtension", "name": "My Dashboard", - "js": "/App_Plugins/my-dashboard/dist/my-dashboard.js", + "element": "/App_Plugins/my-dashboard/dist/my-dashboard.js", "elementName": "my-element", "meta": { "label": "My Dashboard", diff --git a/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md b/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md index 7376b31471c..61e8b412e25 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/dashboards.md @@ -25,21 +25,21 @@ Insert this as an entry of extensions in your `Umbraco-package.json` or register ```jsx { - "type": "dashboard", - "alias": "my.welcome.dashboard", - "name": "My Welcome Dashboard", - "js": "/App_Plugins/WelcomeDashboard/dashboard.js", - "elementName": "my-welcome-dashboard", - "weight": -1, - "meta": { - "label": "Welcome Dashboard", - "pathname": "welcome-dashboard" - }, - "conditions": [ - { - "alias": "Umb.Condition.SectionAlias", - "match": "Umb.Section.Content" - } - ] + "type": "dashboard", + "alias": "my.welcome.dashboard", + "name": "My Welcome Dashboard", + "element": "/App_Plugins/WelcomeDashboard/dashboard.js", + "elementName": "my-welcome-dashboard", + "weight": -1, + "meta": { + "label": "Welcome Dashboard", + "pathname": "welcome-dashboard" + }, + "conditions": [ + { + "alias": "Umb.Condition.SectionAlias", + "match": "Umb.Section.Content" + } + ] } ``` diff --git a/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md b/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md index 85a780d109c..69bf0770b41 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/property-editors/property-editor-ui.md @@ -16,17 +16,17 @@ The Property Editor UI is a pure front-end extension. This determines how the da ```json { - "type": "propertyEditorUi", - "alias": "Umb.PropertyEditorUi.TextBox", - "name": "Text Box Property Editor UI", - "elementName": "my-text-box", - "js": "/App_Plugins/my-text-box/dist/my-text-box.js", - "meta": { - "label": "My Text Box", - "propertyEditorSchema": "Umbraco.TextBox", - "icon": "icon-autofill", - "group": "common" - } + "type": "propertyEditorUi", + "alias": "Umb.PropertyEditorUi.TextBox", + "name": "Text Box Property Editor UI", + "element": "/App_Plugins/my-text-box/dist/my-text-box.js", + "elementName": "my-text-box", + "meta": { + "label": "My Text Box", + "propertyEditorSchema": "Umbraco.TextBox", + "icon": "icon-autofill", + "group": "common" + } } ``` @@ -44,28 +44,28 @@ The Property Editor UI inherits the Settings of its Property Editor Schema. ```json { - "type": "propertyEditorUi", - "alias": "My.PropertyEditorUI.TextArea", - //... more - "meta": { - //... more - "settings": { - "properties": [ - { - "alias": "rows", - "label": "Number of rows", - "description": "If empty - 10 rows would be set as the default value", - "propertyEditorUi": "Umb.PropertyEditorUi.Number", - }, - ], - "defaultData": [ - { - "alias": "rows", - "value": 10, - }, - ], - }, - }, + "type": "propertyEditorUi", + "alias": "My.PropertyEditorUI.TextArea", + //... more + "meta": { + //... more + "settings": { + "properties": [ + { + "alias": "rows", + "label": "Number of rows", + "description": "If empty - 10 rows would be set as the default value", + "propertyEditorUi": "Umb.PropertyEditorUi.Number", + }, + ], + "defaultData": [ + { + "alias": "rows", + "value": 10, + }, + ], + }, + }, }; ``` @@ -87,28 +87,28 @@ import { UmbPropertyValueChangeEvent } from '@umbraco-cms/backoffice/property-ed @customElement('my-text-box') export default class UmbPropertyEditorUITextBoxElement extends UmbElementMixin(LitElement) { - - @property() - value: string | undefined; - - @property({ attribute: false }) - public config: UmbPropertyEditorConfigCollection | undefined; - - private onInput(e: InputEvent) { - this.value = (e.target as HTMLInputElement).value; - this.dispatchEvent(new UmbPropertyValueChangeEvent()); - } - - render() { - return html``; - } - - static styles = [ - css` - uui-input { - width: 100%; - } - `, - ]; + + @property() + value: string | undefined; + + @property({ attribute: false }) + public config: UmbPropertyEditorConfigCollection | undefined; + + private onInput(e: InputEvent) { + this.value = (e.target as HTMLInputElement).value; + this.dispatchEvent(new UmbPropertyValueChangeEvent()); + } + + render() { + return html``; + } + + static styles = [ + css` + uui-input { + width: 100%; + } + `, + ]; } ``` From 5024bce773f295363fff75a718c0213de7aa21d4 Mon Sep 17 00:00:00 2001 From: "Alina-Magdalena Tincas (Umbraco HQ)" Date: Mon, 6 May 2024 13:16:22 +0200 Subject: [PATCH 3/5] changing to element for creating a property editor tutorial manifest file --- .../creating-a-property-editor/README.md | 26 +++++++++++++++++-- ...ding-configuration-to-a-property-editor.md | 20 +++++++++++++- 2 files changed, 43 insertions(+), 3 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/README.md b/14/umbraco-cms/tutorials/creating-a-property-editor/README.md index 4780ddf247a..0bfbd158ec2 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/README.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/README.md @@ -42,6 +42,7 @@ At each step, you will find a dropdown for`suggestions-property-editor-ui.elemen 3. Add the following code to `umbraco-package.json`: {% code title="umbraco-package.json" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -52,7 +53,7 @@ At each step, you will find a dropdown for`suggestions-property-editor-ui.elemen "type": "propertyEditorUi", "alias": "My.PropertyEditorUi.Suggestions", "name": "My Suggestions Property Editor UI", - "js": "/App_Plugins/Suggestions/dist/suggestions.js", + "element": "/App_Plugins/Suggestions/dist/suggestions.js", "elementName": "my-suggestions-property-editor-ui", "meta": { "label": "Suggestions", @@ -64,6 +65,7 @@ At each step, you will find a dropdown for`suggestions-property-editor-ui.elemen ] } ``` + {% endcode %} {% hint style="info" %} @@ -78,6 +80,7 @@ Now let's create the web component we need for our property editor. 2. In this new file, add the following code: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { LitElement, html, customElement, property } from "@umbraco-cms/backoffice/external/lit"; import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; @@ -98,9 +101,10 @@ declare global { } } ``` + {% endcode %} -3. In the `vite.config.ts` file replace the `entry` to our newly created `.ts` file: +3. In the `vite.config.ts` file replace the `entry` to our newly created `.ts` file: ```typescript entry: "src/suggestions-property-editor-ui.element.ts" @@ -132,6 +136,7 @@ Let's start by creating an input field and some buttons that we can style and ho 1. Update the render method to include some input fields and buttons in the `suggestions-property-editor-ui.element.ts` file: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript render() { return html` @@ -163,6 +168,7 @@ render() { `; } ``` + {% endcode %} {% hint style="info" %} @@ -172,14 +178,17 @@ The Umbraco UI library is already a part of the backoffice, which means we can s 2. Add some styling. Update the import from lit to include CSS: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { LitElement, html, css, customElement, property } from "@umbraco-cms/backoffice/external/lit"; ``` + {% endcode %} 3. Add the CSS: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript render() { ... @@ -198,6 +207,7 @@ static styles = [ `, ]; ``` + {% endcode %} It should now look something like this: @@ -220,14 +230,17 @@ We then have to dispatch an `property-value-change` event which can be done in t 1. Add the import so the event can be used: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { UmbPropertyValueChangeEvent } from "@umbraco-cms/backoffice/property-editor"; ``` + {% endcode %} 2. Add the event to the property editor: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript #onInput(e: InputEvent) { this.value = (e.target as HTMLInputElement).value; @@ -252,6 +265,7 @@ import { UmbPropertyValueChangeEvent } from "@umbraco-cms/backoffice/property-ed .... } ``` + {% endcode %} Let's look at the suggestions button next. @@ -264,14 +278,17 @@ Let's look at the suggestions button next. 1. Update the import for Lit: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { LitElement, html, css, customElement, property, state } from "@umbraco-cms/backoffice/external/lit"; ``` + {% endcode %} 2. Add suggestions to the property editor: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript @state() private _suggestions = [ @@ -282,11 +299,13 @@ import { LitElement, html, css, customElement, property, state } from "@umbraco- ]; render() {...} ``` + {% endcode %} 3. Update the suggestion button in the render method to call a `onSuggestion` method when we press the button: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript #onSuggestion() { const randomIndex = (this._suggestions.length * Math.random()) | 0; @@ -312,6 +331,7 @@ import { LitElement, html, css, customElement, property, state } from "@umbraco- `; } ``` + {% endcode %}
@@ -319,6 +339,7 @@ import { LitElement, html, css, customElement, property, state } from "@umbraco- See the entire file: suggestions-property-editor-ui.element.ts {% code title="suggestions-property-editor-ui.element.ts" lineNumbers="true" %} + ```typescript import { LitElement, css, html, customElement, property, state } from "@umbraco-cms/backoffice/external/lit"; import { UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; @@ -404,6 +425,7 @@ declare global { } } ``` + {% endcode %}
diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md index be9f75bd10f..0c48925b48f 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/adding-configuration-to-a-property-editor.md @@ -26,6 +26,7 @@ To add a Data Type configuration field when using our Suggestion Property Editor 1. Add some `properties`: {% code title="umbraco-package.json" %} + ```json ... "meta": { @@ -49,6 +50,7 @@ To add a Data Type configuration field when using our Suggestion Property Editor ... } ``` + {% endcode %} Above we added two configuration fields. Each entry of the `properties` collection represents a Configuration field. Each has the information needed for a field. @@ -63,6 +65,7 @@ The Property Editor UI needs to be declared as it declares what User Interface s 2. We can now also set some default data on our new configurations: {% code title="umbraco-package.json" %} + ```json ... "meta": { @@ -82,6 +85,7 @@ The Property Editor UI needs to be declared as it declares what User Interface s } ... ``` + {% endcode %}
@@ -89,6 +93,7 @@ The Property Editor UI needs to be declared as it declares what User Interface s See the entire file: umbraco-package.json {% code title=" umbraco-package.json" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -99,7 +104,7 @@ The Property Editor UI needs to be declared as it declares what User Interface s "type": "propertyEditorUi", "alias": "My.PropertyEditorUi.Suggestions", "name": "My Suggestions Property Editor UI", - "js": "/App_Plugins/Suggestions/dist/suggestions.js", + "element": "/App_Plugins/Suggestions/dist/suggestions.js", "elementName": "my-suggestions-property-editor-ui", "meta": { "label": "Suggestions", @@ -137,6 +142,7 @@ The Property Editor UI needs to be declared as it declares what User Interface s ] } ``` + {% endcode %}
@@ -155,6 +161,7 @@ The next step is to gain access to our new configuration options. For this, open 1. Create some state variables that can store our configurations: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript @state() private _disabled?: boolean; @@ -165,19 +172,23 @@ The next step is to gain access to our new configuration options. For this, open @state() private _maxChars?: number; ``` + {% endcode %} 2. Let's create a config property. Add a new import and add the following property: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { type UmbPropertyEditorConfigCollection } from "@umbraco-cms/backoffice/property-editor"; ``` + {% endcode %} 3. Look up the alias of the config and then grab the value by said alias: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript @property({ attribute: false }) public set config(config: UmbPropertyEditorConfigCollection) { @@ -186,6 +197,7 @@ import { type UmbPropertyEditorConfigCollection } from "@umbraco-cms/backoffice/ this._maxChars = config.getValueByAlias("maxChars"); } ``` + {% endcode %} We can now use the configurations. Let's use the `placeholder` and `maxChars` for the input field and the `disabled` option for the suggestion button. @@ -193,14 +205,17 @@ We can now use the configurations. Let's use the `placeholder` and `maxChars` fo 4. Add a new import `ifDefined` : {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { ifDefined } from "@umbraco-cms/backoffice/external/lit"; ``` + {% endcode %} 5. Update the render method: {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript render() { return html` @@ -237,6 +252,7 @@ import { ifDefined } from "@umbraco-cms/backoffice/external/lit"; `; } ``` + {% endcode %}
@@ -244,6 +260,7 @@ import { ifDefined } from "@umbraco-cms/backoffice/external/lit"; See the entire file: suggestions-property-editor-ui.element.ts {% code title="suggestions-property-editor-ui.element.ts" %} + ```typescript import { LitElement, css, html, customElement, property, state, ifDefined } from "@umbraco-cms/backoffice/external/lit"; import { type UmbPropertyEditorUiElement } from "@umbraco-cms/backoffice/extension-registry"; @@ -349,6 +366,7 @@ declare global { } } ``` + {% endcode %}
From 99d61cd649df0f539e91ddbd5ada1f926a71b37c Mon Sep 17 00:00:00 2001 From: "Alina-Magdalena Tincas (Umbraco HQ)" Date: Tue, 7 May 2024 10:55:26 +0200 Subject: [PATCH 4/5] updating rest of the files --- 14/umbraco-cms/SUMMARY.md | 6 +- .../contexts/global-context.md | 4 +- .../extension-registry/entry-point.md | 12 +- .../extension-conditions.md | 60 ++++---- .../extension-registration.md | 2 +- .../extension-types/README.md | 10 +- .../extension-types/header-apps.md | 8 +- .../extension-types/menu/trees.md | 128 +++++++++--------- .../extension-types/modals/custom-modals.md | 8 +- .../README.md | 12 +- .../section-sidebar.md | 0 .../section-view.md | 0 .../workspaces/workspace-editor-views.md | 6 +- .../extending-backoffice/package-manifest.md | 4 +- 14 files changed, 136 insertions(+), 124 deletions(-) rename 14/umbraco-cms/extending-backoffice/extension-types/{sections-and-trees => sections}/README.md (90%) rename 14/umbraco-cms/extending-backoffice/extension-types/{sections-and-trees => sections}/section-sidebar.md (100%) rename 14/umbraco-cms/extending-backoffice/extension-types/{sections-and-trees => sections}/section-view.md (100%) diff --git a/14/umbraco-cms/SUMMARY.md b/14/umbraco-cms/SUMMARY.md index c87ad8f0574..d654741cf92 100644 --- a/14/umbraco-cms/SUMMARY.md +++ b/14/umbraco-cms/SUMMARY.md @@ -54,9 +54,9 @@ * [Workspace Context](extending-backoffice/extension-types/workspaces/workspace-context.md) * [Workspace Views](extending-backoffice/extension-types/workspaces/workspace-editor-views.md) * [Workspace Actions](extending-backoffice/extension-types/workspaces/workspace-editor-actions.md) - * [Section](extending-backoffice/extension-types/sections-and-trees/README.md) - * [Section View](extending-backoffice/extension-types/sections-and-trees/section-view.md) - * [Section Sidebar](extending-backoffice/extension-types/sections-and-trees/section-sidebar.md) + * [Section](extending-backoffice/extension-types/sections/README.md) + * [Section View](extending-backoffice/extension-types/sections/section-view.md) + * [Section Sidebar](extending-backoffice/extension-types/sections/section-sidebar.md) * [Menu](extending-backoffice/extension-types/menu/README.md) * [Trees](extending-backoffice/extension-types/menu/trees.md) * [Header Apps](extending-backoffice/extension-types/header-apps.md) diff --git a/14/umbraco-cms/extending-backoffice/contexts/global-context.md b/14/umbraco-cms/extending-backoffice/contexts/global-context.md index 758999f9297..681b0ec77eb 100644 --- a/14/umbraco-cms/extending-backoffice/contexts/global-context.md +++ b/14/umbraco-cms/extending-backoffice/contexts/global-context.md @@ -13,8 +13,8 @@ This page is a work in progress. type: 'globalContext', alias: 'My.GlobalContext.Products', name: 'My Products Context', - js: 'my-products.context.js', + api: 'my-products.context.js', } ``` -Read more about creating your own[ Context API ](../working-with-data/context-api.md)here. +Read more about creating your own[Context API](../working-with-data/context-api.md)here. diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md b/14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md index 1d4912ddd53..a1c160db8be 100644 --- a/14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md +++ b/14/umbraco-cms/extending-backoffice/extension-registry/entry-point.md @@ -4,12 +4,10 @@ This page is a work in progress. It will be updated as the software evolves. {% endhint %} -The `entryPoint` extension type can be used to run some JavaScript code at startup.\ +The `backofficeEntryPoint` extension type can be used to run some JavaScript code at startup.\ The entry point declares a single JavaScript file that will be loaded and run when the Backoffice starts. In other words this can be used as an entry point for a package. -The `entryPoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `entryPoint` to load in the external libraries to be shared by all your extensions. Additionally, **global CSS files** can also be used in the `entryPoint` extension. - - +The `backofficeEntryPoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `backofficeEntryPoint` to load in the external libraries to be shared by all your extensions. Additionally, **global CSS files** can also be used in the `backofficeEntryPoint` extension. The Entry Point manifest type is used to register an entry point for the backoffice. An entry point is a single javascript file that is loaded when the backoffice is initialized. This file can be used to do anything, this enables more complex logic to take place on startup. @@ -17,9 +15,9 @@ The Entry Point manifest type is used to register an entry point for the backoff ```typescript { - "type": "entryPoint", - "alias": "My.EntryPoint", - "js": "./index.js" + "type": "backofficeEntryPoint", + "alias": "My.EntryPoint", + "js": "./index.js" } ``` diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md b/14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md index 75f98c7800a..6abb2c3089c 100644 --- a/14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md +++ b/14/umbraco-cms/extending-backoffice/extension-registry/extension-conditions.md @@ -18,16 +18,16 @@ In the following example we define the manifest for a Workspace Action, this act ```typescript { - type: 'workspaceAction', - name: 'example-workspace-action', - alias: 'My.Example.WorkspaceAction', - elementName: 'my-workspace-action-element', - conditions: [ - { - alias: 'Umb.Condition.SectionAlias', - match: 'My.Example.Workspace' - } - ] + type: 'workspaceAction', + name: 'example-workspace-action', + alias: 'My.Example.WorkspaceAction', + elementName: 'my-workspace-action-element', + conditions: [ + { + alias: 'Umb.Condition.SectionAlias', + match: 'My.Example.Workspace' + } + ] } ``` @@ -52,29 +52,29 @@ You can make your own conditions by creating a class that implements the `UmbExt ```typescript import { UmbControllerBase } from '@umbraco-cms/backoffice/class-api'; import { - ManifestCondition, - UmbConditionConfigBase, - UmbConditionControllerArguments, - UmbExtensionCondition, + ManifestCondition, + UmbConditionConfigBase, + UmbConditionControllerArguments, + UmbExtensionCondition, } from '@umbraco-cms/backoffice/extension-api'; import { UMB_SECTION_CONTEXT } from '@umbraco-cms/backoffice/section'; type MyConditionConfig = UmbConditionConfigBase & { - match: string; + match: string; }; export class MyExtensionCondition extends UmbControllerBase implements UmbExtensionCondition { - config: MyConditionConfig; - permitted = false; - - constructor(args: UmbConditionControllerArguments) { - super(args.host); - // This condition aproves after 10 seconds - setTimeout(() => { - this.permitted = strue; - args.onChange(); - }, 10000); - } + config: MyConditionConfig; + permitted = false; + + constructor(args: UmbConditionControllerArguments) { + super(args.host); + // This condition aproves after 10 seconds + setTimeout(() => { + this.permitted = strue; + args.onChange(); + }, 10000); + } } ``` @@ -84,9 +84,9 @@ TODO: Make an example that will work from JSON (not a direct reference to the cl ```typescript export const manifest: ManifestCondition = { - type: 'condition', - name: 'My Condition', - alias: 'My.Condition.TenSecondDelay', - api: MyExtensionCondition, + type: 'condition', + name: 'My Condition', + alias: 'My.Condition.TenSecondDelay', + api: MyExtensionCondition, }; ``` diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md b/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md index 531593520ea..839ed789120 100644 --- a/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md +++ b/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md @@ -11,7 +11,7 @@ Declaring a new extension is done using an extension manifest depending where yo 1. Via a manifest JSON file on the server. 2. In JavaScript/TypeScript file. -These two options can be combined by defining a small extension in a JSON Manifest, which uses the extension type `entryPoint` or `bundle` to register a JS file, which then registers the rest of the extensions. +These two options can be combined by defining a small extension in a JSON Manifest, which uses the extension type `backofficeEntryPoint` or `bundle` to register a JS file, which then registers the rest of the extensions. #### Extension Manifest diff --git a/14/umbraco-cms/extending-backoffice/extension-types/README.md b/14/umbraco-cms/extending-backoffice/extension-types/README.md index e9e2f40cc04..8d28c41710e 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/README.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/README.md @@ -50,14 +50,14 @@ The bundle extension type can be used for declaring multiple Extension Manifests The bundle declares a single JavaScript file that will be loaded at startup. All the Extension Manifests exported from this Module will be registered in the Extension Registry. -Read more about the `bundle` extension type in the [Bundle ](../extension-registry/bundle.md)article. +Read more about the `bundle` extension type in the [Bundle](../extension-registry/bundle.md)article. -### Using `entryPoint` as your foundation +### Using `backofficeEntryPoint` as your foundation -The `entryPoint` extension type is special, it can be used to run any JavaScript code at startup.\ +The `backofficeEntryPoint` extension type is special, it can be used to run any JavaScript code at startup.\ This can be used as an entry point for a package.\ The entry point declares a single JavaScript file that will be loaded and run when the Backoffice starts. -The `entryPoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `entryPoint` to load in the external libraries to be shared by all your extensions. Loading **global CSS files** can also be used in the `entryPoint` extension. +The `entryPbackofficeEntryPointoint` extension is also the way to go if you want to load in external libraries such as jQuery, Angular, React, etc. You can use the `backofficeEntryPoint` to load in the external libraries to be shared by all your extensions. Loading **global CSS files** can also be used in the `backofficeEntryPoint` extension. -Read more about the `entryPoint` extension type in the [Entry Point](../extension-registry/entry-point.md) article. +Read more about the `backofficeEntryPoint` extension type in the [Entry Point](../extension-registry/entry-point.md) article. diff --git a/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md b/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md index f38d679b83d..f6cbc45a9d4 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/header-apps.md @@ -26,6 +26,7 @@ Below you can find an example of how to setup a Header App using the manifest fi 3. Add the following code to `umbraco-package.json`: {% code title="umbraco-package.json" lineNumbers="true" %} + ```typescript { "$schema": "../../umbraco-package-schema.json", @@ -47,6 +48,7 @@ Below you can find an example of how to setup a Header App using the manifest fi ] } ``` + {% endcode %} * First we define the type which is a `headerApp`. Then we add a unique alias and a name to define the extension UI. @@ -66,6 +68,7 @@ This is a continuation of the above steps from **Button Header App with Manifest 1. Add a reference to the .js file. Update the `umbraco-package.json` with the following: {% code title="umbraco-package.json" lineNumbers="true" %} + ```typescript { "$schema": "../../umbraco-package-schema.json", @@ -77,7 +80,7 @@ This is a continuation of the above steps from **Button Header App with Manifest "alias": "My.HeaderApp", "name": "My Header App", "kind": "button", - "js": "/App_Plugins/header-app/dist/header-app.js", + "element": "/App_Plugins/header-app/dist/header-app.js", "meta": { "label": "Hello Umbraco", "icon": "icon-hearts", @@ -87,11 +90,13 @@ This is a continuation of the above steps from **Button Header App with Manifest ] } ``` + {% endcode %} 2. Replace the content of the `src/my-element.ts file` with the following: {% code title="my-element.ts" lineNumbers="true" %} + ```typescript import { ManifestHeaderAppButtonKind, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; @@ -109,6 +114,7 @@ const manifest: ManifestHeaderAppButtonKind = { umbExtensionsRegistry.register(manifest); ``` + {% endcode %} 3. In the `header-app` folder run `npm run build` and then run the project. Then in the backoffice you will see our new Header App extension with **address book** **icon**: diff --git a/14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md b/14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md index 3c718288975..95c2a4cde9c 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/menu/trees.md @@ -23,21 +23,21 @@ Tree Manifest: ```typescript // TODO: add interface { - "type": "tree", - "alias": "My.Tree.Alias", - "name": "My Tree", - "meta": { - "repositoryAlias": "My.Repository.Alias" - } + "type": "tree", + "alias": "My.Tree.Alias", + "name": "My Tree", + "meta": { + "repositoryAlias": "My.Repository.Alias" + } }, { - "type": "treeItem", - "kind": "entity", - "alias": "My.TreeItem.Alias", - "name": "My Tree Item", - "conditions": { - "entityType": "my-entity-type", - }, + "type": "treeItem", + "kind": "entity", + "alias": "My.TreeItem.Alias", + "name": "My Tree Item", + "conditions": { + "entityType": "my-entity-type", + }, } ``` @@ -53,13 +53,13 @@ Tree Manifest: ```typescript { - "type": "treeItem", - "alias": "Umb.TreeItem.Alias", - "name": "My Tree Item", - "js": "./my-tree-item.element.js", - "conditions": { - "entityType": "my-entity-type", - }, + "type": "treeItem", + "alias": "Umb.TreeItem.Alias", + "name": "My Tree Item", + "element": "./my-tree-item.element.js", + "conditions": { + "entityType": "my-entity-type", + }, }; ``` @@ -73,22 +73,22 @@ import { UmbMyTreeItemContext, MyTreeItemDataModel } from './my-tree-item.contex @customElement('my-tree-item') export class MyTreeItemElement extends UmbElementMixin(LitElement) { - private _item?: MyTreeItemDataModel; - @property({ type: Object, attribute: false }) - public get item() { - return this._item; - } - public set item(value: MyTreeItemDataModel | undefined) { - this._item = value; - this.#context.setTreeItem(value); - } - - #context = new UmbMyTreeItemContext(this); - - render() { - if (!this.item) return nothing; - return html` Some custom markup `; - } + private _item?: MyTreeItemDataModel; + @property({ type: Object, attribute: false }) + public get item() { + return this._item; + } + public set item(value: MyTreeItemDataModel | undefined) { + this._item = value; + this.#context.setTreeItem(value); + } + + #context = new UmbMyTreeItemContext(this); + + render() { + if (!this.item) return nothing; + return html` Some custom markup `; + } } export default MyTreeItemElement; @@ -99,30 +99,30 @@ export default MyTreeItemElement; ```typescript // TODO: auto-generate this from the interface export interface UmbTreeItemContext { - host: UmbControllerHostElement; - unique?: string; - type?: string; - - treeItem: Observable; - hasChildren: Observable; - isLoading: Observable; - isSelectable: Observable; - isSelected: Observable; - isActive: Observable; - hasActions: Observable; - path: Observable; - - setTreeItem(treeItem: T | undefined): void; - - requestChildren(): Promise<{ - data: PagedResponse | undefined; - error: ProblemDetails | undefined; - asObservable?: () => Observable; - }>; - toggleContextMenu(): void; - select(): void; - deselect(): void; - constructPath(pathname: string, entityType: string, unique: string): string; + host: UmbControllerHostElement; + unique?: string; + type?: string; + + treeItem: Observable; + hasChildren: Observable; + isLoading: Observable; + isSelectable: Observable; + isSelected: Observable; + isActive: Observable; + hasActions: Observable; + path: Observable; + + setTreeItem(treeItem: T | undefined): void; + + requestChildren(): Promise<{ + data: PagedResponse | undefined; + error: ProblemDetails | undefined; + asObservable?: () => Observable; + }>; + toggleContextMenu(): void; + select(): void; + deselect(): void; + constructPath(pathname: string, entityType: string, unique: string): string; } ``` @@ -132,10 +132,10 @@ We provide a base class for the tree item context. This class provides some defa ```typescript export class UmbMyTreeItemContext extends UmbTreeItemContextBase { - constructor(host: UmbControllerHostElement) { - super(host, (x: MyTreeItemDataModel) => x.unique); - } + constructor(host: UmbControllerHostElement) { + super(host, (x: MyTreeItemDataModel) => x.unique); + } - // overwrite any methods or properties here if needed + // overwrite any methods or properties here if needed } ``` diff --git a/14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md b/14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md index a061e422ca0..2de9cfc309a 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/modals/custom-modals.md @@ -40,6 +40,7 @@ A modal element is a web component that is used to render the modal. It should i Additionally, the modal element can see its data parameters through the `modalContext` property. In this example, the modal data is of type `MyModalData` and the modal value is of type `MyModalValue`. The modal context is of type `UmbModalContext`. We are using the data to render a headline and the value to update the value and submit the modal. {% code title="my-modal.element.ts" %} + ```ts import { html, LitElement, property, customElement } from "@umbraco-cms/backoffice/external/lit"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @@ -78,18 +79,19 @@ export default class MyDialogElement } } ``` + {% endcode %} ## Register in the extension registry -The modal element needs to be registered in the extension registry. This is done by defining the modal in the manifest file. The `js` property should point to the file that contains the modal element. +The modal element needs to be registered in the extension registry. This is done by defining the modal in the manifest file. The `element` property should point to the file that contains the modal element. ```json { "type": "modal", "alias": "My.Modal", "name": "My Modal", - "js": "../path/to/my-modal.element.js" + "element": "../path/to/my-modal.element.js" } ``` @@ -98,6 +100,7 @@ The modal element needs to be registered in the extension registry. This is done To open the modal, you need to consume the `UmbModalManagerContext` and then use the modal manager context to open a modal. This example shows how to consume the Modal Manager Context: {% code title="my-element.ts" %} + ```ts import { MY_MODAL_TOKEN } from './my-modal.token'; import { UMB_MODAL_MANAGER_CONTEXT } from '@umbraco-cms/backoffice/modal'; @@ -132,4 +135,5 @@ class MyElement extends UmbElementMixin(LitElement) { } } ``` + {% endcode %} diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/README.md b/14/umbraco-cms/extending-backoffice/extension-types/sections/README.md similarity index 90% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/README.md rename to 14/umbraco-cms/extending-backoffice/extension-types/sections/README.md index 53059e1a788..c90717b7030 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/README.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/sections/README.md @@ -16,7 +16,6 @@ For example, when you load the backoffice, you'll see that the 'Content' section You can create your own sections and trees to extend Umbraco.\ -

Section

## **Creating a section** @@ -25,7 +24,7 @@ You can create your own sections and trees to extend Umbraco.\ When creating a new section it's recommended to use a [Entry Point](../../extension-registry/entry-point.md)-extension in your [Umbraco Package Manifest](../../package-manifest.md). This is to get better control over all the additional extensions required for the new section. -1. In the manifest file add the following: +1. In the manifest file add the following: ```typescript { @@ -34,13 +33,12 @@ When creating a new section it's recommended to use a [Entry Point](../../extens "extensions": [ { "name": "My Custom Section", - "type": "entryPoint", - "alias": "My.EntryPoint", - "js": "/App_Plugins/tree/dist/tree.js" + "type": "backofficeEntryPoint", + "alias": "My.Custom.Section", + "js": "/App_Plugins/section/dist/section.js" } ] } - ``` 2. Then in the element typescript file add the following: @@ -104,4 +102,4 @@ interface UmbSectionContext {} ## Examples of sections: -TODO: link to all [sections ](https://apidocs.umbraco.com/v14/ui/?path=/docs/umb-section-main--docs)in storybook. Can we somehow auto-generate this list? +TODO: link to all [sections](https://apidocs.umbraco.com/v14/ui/?path=/docs/umb-section-main--docs) in storybook. Can we somehow auto-generate this list? diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/section-sidebar.md b/14/umbraco-cms/extending-backoffice/extension-types/sections/section-sidebar.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/section-sidebar.md rename to 14/umbraco-cms/extending-backoffice/extension-types/sections/section-sidebar.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/section-view.md b/14/umbraco-cms/extending-backoffice/extension-types/sections/section-view.md similarity index 100% rename from 14/umbraco-cms/extending-backoffice/extension-types/sections-and-trees/section-view.md rename to 14/umbraco-cms/extending-backoffice/extension-types/sections/section-view.md diff --git a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md b/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md index 16012dd532e..39ce04eed55 100644 --- a/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md +++ b/14/umbraco-cms/extending-backoffice/extension-types/workspaces/workspace-editor-views.md @@ -25,6 +25,7 @@ The default workspace view is **'Info'** - displaying Links, History and Status 3. Add the following code to `umbraco-package.json`: {% code title="umbraco-package.json" lineNumbers="true" %} + ```json { "$schema": "../../umbraco-package-schema.json", @@ -35,7 +36,7 @@ The default workspace view is **'Info'** - displaying Links, History and Status "type": "workspaceView", "alias": "My.WorkspaceView", "name": "My Workspace View", - "js": "/App_Plugins/workspaceview/dist/workspaceview.js", + "element": "/App_Plugins/workspaceview/dist/workspaceview.js", "meta": { "label": "My Workspace View", "pathname": "/my-workspace-view", @@ -51,11 +52,13 @@ The default workspace view is **'Info'** - displaying Links, History and Status ] } ``` + {% endcode %} 4. Add the following code to the existing `my-element.ts` from the `src`folder: {% code title="my-element.ts" lineNumbers="true" %} + ```typescript import { LitElement, html, customElement, css } from "@umbraco-cms/backoffice/external/lit"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @@ -85,6 +88,7 @@ declare global { } ``` + {% endcode %} In the `workspaceview` folder run `npm run build` and then run the project. Then in the content section of the Backoffice you will see our new Workspace View: diff --git a/14/umbraco-cms/extending-backoffice/package-manifest.md b/14/umbraco-cms/extending-backoffice/package-manifest.md index c9ffa7d3e1a..7c7df00eb83 100644 --- a/14/umbraco-cms/extending-backoffice/package-manifest.md +++ b/14/umbraco-cms/extending-backoffice/package-manifest.md @@ -19,6 +19,7 @@ Before Umbraco 14, the manifest was declared in a `package.manifest` file instea {% endhint %} {% code title="umbraco-package.json" %} + ```json { "name": "Sir Trevor", @@ -29,7 +30,7 @@ Before Umbraco 14, the manifest was declared in a `package.manifest` file instea "type": "propertyEditorUi", "alias": "Sir.Trevor", "name": "Sir Trevor Property Editor UI", - "js": "/App_Plugins/SirTrevor/SirTrevor.js", + "element": "/App_Plugins/SirTrevor/SirTrevor.js", "meta": { "label": "Sir Trevor", "propertyEditorSchemaAlias": "Umbraco.TextBox", @@ -40,6 +41,7 @@ Before Umbraco 14, the manifest was declared in a `package.manifest` file instea ] } ``` + {% endcode %} ## Sample Manifest with Csharp From 32563f16d26f4f3c03bdab07d14e0b852f170e97 Mon Sep 17 00:00:00 2001 From: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> Date: Tue, 7 May 2024 11:12:50 +0200 Subject: [PATCH 5/5] Update 14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md --- .../extension-registry/extension-registration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md b/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md index 839ed789120..47f7c2fcedb 100644 --- a/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md +++ b/14/umbraco-cms/extending-backoffice/extension-registry/extension-registration.md @@ -11,7 +11,7 @@ Declaring a new extension is done using an extension manifest depending where yo 1. Via a manifest JSON file on the server. 2. In JavaScript/TypeScript file. -These two options can be combined by defining a small extension in a JSON Manifest, which uses the extension type `backofficeEntryPoint` or `bundle` to register a JS file, which then registers the rest of the extensions. +These two options can be combined by defining a small extension in a JSON Manifest. This uses the extension type `backofficeEntryPoint` or `bundle` to register a JS file, which then registers the rest of the extensions. #### Extension Manifest