From b9dc884d426694b85c9c5f92680b6dfa54099dff Mon Sep 17 00:00:00 2001 From: grayn90 <83165511+grayn90@users.noreply.github.com> Date: Thu, 2 May 2024 10:37:45 +0100 Subject: [PATCH 1/7] Update integrating-context-with-a-property-editor.md I was unable to build suggestions-input.element.ts until I made the following changes. - Remove duplicate export default UmbMySuggestionsInputElement; - Update import modal context and modal open logic to use the UmbModalTokenDefaults as the args. --- ...egrating-context-with-a-property-editor.md | 65 ++++++++++--------- 1 file changed, 35 insertions(+), 30 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index 2a23d6931fc..be644235368 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -20,9 +20,8 @@ The steps we will go through in this part are: {% code title="suggestions-input.element.ts" %} ```typescript import { - UmbModalContext, - UMB_MODAL_CONTEXT, - UMB_CONFIRM_MODAL, + UMB_MODAL_MANAGER_CONTEXT, + UMB_CONFIRM_MODAL } from "@umbraco-cms/backoffice/modal"; import { UMB_NOTIFICATION_CONTEXT, @@ -45,17 +44,17 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor {% code title="suggestions-input.element.ts" %} ```typescript -private _modalContext?: UmbModalContext; -private _notificationContext?: UmbNotificationContext; +_modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; +_notificationContext?: UmbNotificationContext; constructor() { - super(); - this.consumeContext(UMB_MODAL_CONTEXT, (instance) => { - this._modalContext = instance; - }); + super(); + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => { + this._modalManagerContext = instance; + }); - this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => { - this._notificationContext = instance; + this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => { + this._notificationContext = instance; }); } ``` @@ -98,12 +97,16 @@ Let's add some more logic. If the length is more than the maxLength configuratio ... const trimmed = (this.value as string).substring(0, this.maxLength); - const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `Trim text`, - content: `Do you want to trim the text to "${trimmed}"?`, - color: 'danger', - confirmLabel: 'Trim', - }); + const modalHandler = this._modalManagerContext?.open(this, UMB_CONFIRM_MODAL, + { + data: { + headline: `Trim text`, + content: `Do you want to trim the text to "${trimmed}"?`, + color: "danger", + confirmLabel: "Trim", + } + } + ); modalHandler?.onSubmit().then(() => { this.value = trimmed; this.#dispatchChangeEvent(); @@ -125,7 +128,7 @@ Let's add some more logic. If the length is more than the maxLength configuratio ```typescript import { LitElement, css, html, customElement, property, state} from "@umbraco-cms/backoffice/external/lit"; import { UUIInputEvent, UUIFormControlMixin} from "@umbraco-cms/backoffice/external/uui"; -import { UmbModalContext, UMB_MODAL_CONTEXT, UMB_CONFIRM_MODAL} from "@umbraco-cms/backoffice/modal"; +import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL} from "@umbraco-cms/backoffice/modal"; import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @@ -140,13 +143,13 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor @property({ type: Number }) maxLength?: number; - private _modalContext?: UmbModalContext; - private _notificationContext?: UmbNotificationContext; + _modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; + _notificationContext?: UmbNotificationContext; constructor() { super(); - this.consumeContext(UMB_MODAL_CONTEXT, (instance) => { - this._modalContext = instance; + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => { + this._modalManagerContext = instance; }); this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => { @@ -185,12 +188,16 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor return; } const trimmed = (this.value as string).substring(0, this.maxLength); - const modalHandler = this._modalContext?.open(UMB_CONFIRM_MODAL, { - headline: `Trim text`, - content: `Do you want to trim the text to "${trimmed}"?`, - color: "danger", - confirmLabel: "Trim", - }); + const modalHandler = this._modalManagerContext?.open(this, UMB_CONFIRM_MODAL, + { + data: { + headline: `Trim text`, + content: `Do you want to trim the text to "${trimmed}"?`, + color: "danger", + confirmLabel: "Trim", + } + } + ); modalHandler?.onSubmit().then(() => { this.value = trimmed; this.#dispatchChangeEvent(); @@ -259,8 +266,6 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor ]; } -export default UmbMySuggestionsInputElement; - declare global { interface HTMLElementTagNameMap { "my-suggestions-input": UmbMySuggestionsInputElement; From 16779673236934c4c7cba1c76350f876dd13c7c3 Mon Sep 17 00:00:00 2001 From: grayn90 <83165511+grayn90@users.noreply.github.com> Date: Thu, 2 May 2024 16:40:25 +0100 Subject: [PATCH 2/7] Update integrating-context-with-a-property-editor.md --- ...egrating-context-with-a-property-editor.md | 100 ++++++++++-------- 1 file changed, 53 insertions(+), 47 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index be644235368..8887aff7990 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -15,26 +15,21 @@ The steps we will go through in this part are: ## Setting up the contexts -1. Insert the following imports into the `suggestions-input.element.ts` file. +1. Replace the imports in the `suggestions-property-editor-ui.element.ts` file. -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript -import { - UMB_MODAL_MANAGER_CONTEXT, - UMB_CONFIRM_MODAL -} from "@umbraco-cms/backoffice/modal"; -import { - UMB_NOTIFICATION_CONTEXT, - UmbNotificationContext, - UmbNotificationDefaultData, -} from "@umbraco-cms/backoffice/notification"; +import { LitElement, css, html, customElement, property, state} from "@umbraco-cms/backoffice/external/lit"; +import { UUIInputEvent, UUIFormControlMixin} from "@umbraco-cms/backoffice/external/uui"; +import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL} from "@umbraco-cms/backoffice/modal"; +import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; ``` {% endcode %} 2. Update the class to extend from UmbElementMixin. This allows us to consume the contexts that we need: -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFormControlMixin(LitElement, '')) { ``` @@ -42,7 +37,7 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor 3. Create the constructor where we can consume the contexts: -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript _modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; _notificationContext?: UmbNotificationContext; @@ -60,6 +55,17 @@ constructor() { ``` {% endcode %} +4. Add inherited class getFormElement + +{% code title="suggestions-property-editor-ui.element.ts" %} +```typescript +protected getFormElement(): HTMLElement | undefined { + throw new Error("Method not implemented."); +} +``` +{% endcode %} + + ## Using the modal and notification API Now we can use the modal and notification API, let's change our `#onTrimText` method. @@ -68,19 +74,19 @@ First, check if the length of our input is smaller or equal to our maxLength con Here we can use the NotificationContext's peek method. It has two parameters `UmbNotificationColor` and an`UmbNotificationDefaultData` object. -1. Add the `#onTextTrim()`code in the `suggestions-input.element.ts` +1. Add the `#onTextTrim()`code in the `suggestions-property-editor-ui.element.ts` -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript #onTextTrim() { if (!this.maxLength) return; - if (!this.value || (this.value as string).length <= this.maxLength) { - const data: UmbNotificationDefaultData = { - message: `Nothing to trim!`, - }; - this._notificationContext?.peek('danger', { data }); - return; - } + if (!this.value || (this.value as string).length <= this.maxLength) { + const data: UmbNotificationDefaultData = { + message: `Nothing to trim!`, + }; + this._notificationContext?.peek("danger", { data }); + return; + } } ``` {% endcode %} @@ -91,31 +97,31 @@ Let's add some more logic. If the length is more than the maxLength configuratio 2. Add the `open` method to the `#onTextTrim()` -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript #onTextTrim() { ... - const trimmed = (this.value as string).substring(0, this.maxLength); - const modalHandler = this._modalManagerContext?.open(this, UMB_CONFIRM_MODAL, - { - data: { - headline: `Trim text`, - content: `Do you want to trim the text to "${trimmed}"?`, - color: "danger", - confirmLabel: "Trim", - } - } - ); - modalHandler?.onSubmit().then(() => { - this.value = trimmed; - this.#dispatchChangeEvent(); - const data: UmbNotificationDefaultData = { - headline: `Text trimmed`, - message: `You trimmed the text!`, - }; - this._notificationContext?.peek('positive', { data }); - }, null); + const trimmed = (this.value as string).substring(0, this.maxLength); + const modalHandler = this._modalManagerContext?.open(this, UMB_CONFIRM_MODAL, + { + data: { + headline: `Trim text`, + content: `Do you want to trim the text to "${trimmed}"?`, + color: "danger", + confirmLabel: "Trim", + } + } + ); + modalHandler?.onSubmit().then(() => { + this.value = trimmed; + this.#dispatchChangeEvent(); + const data: UmbNotificationDefaultData = { + headline: `Text trimmed`, + message: `You trimmed the text!`, + }; + this._notificationContext?.peek("positive", { data }); + }, null); } ``` {% endcode %} @@ -124,7 +130,7 @@ Let's add some more logic. If the length is more than the maxLength configuratio See the entire file: suggestions-property-editor-ui.element.ts -{% code title="suggestions-input.element.ts" %} +{% code title="suggestions-property-editor-ui.element.ts" %} ```typescript import { LitElement, css, html, customElement, property, state} from "@umbraco-cms/backoffice/external/lit"; import { UUIInputEvent, UUIFormControlMixin} from "@umbraco-cms/backoffice/external/uui"; @@ -132,7 +138,7 @@ import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL} from "@umbraco-cms/backof import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; -@customElement("my-suggestions-input") +@customElement('my-suggestions-property-editor-ui') export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFormControlMixin(LitElement, '')) { @property({ type: Boolean }) disabled = false; @@ -165,8 +171,8 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor "Are you hungry?", ]; - protected getFormElement() { - return undefined; + protected getFormElement(): HTMLElement | undefined { + throw new Error("Method not implemented."); } #onInput(e: UUIInputEvent) { From 7c920ea2e02b5a16b2aecbddeefa2f6542906095 Mon Sep 17 00:00:00 2001 From: grayn90 <83165511+grayn90@users.noreply.github.com> Date: Fri, 3 May 2024 16:09:48 +0100 Subject: [PATCH 3/7] Update integrating-context-with-a-property-editor.md --- ...egrating-context-with-a-property-editor.md | 114 +++++++++++++----- 1 file changed, 86 insertions(+), 28 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index 8887aff7990..e851b218f07 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -6,22 +6,21 @@ description: Integrate one of the built-in Umbraco Contexts. ## Overview -This is the third step in the Property Editor tutorial. In this part, we will integrate one of the built-in Umbraco Contexts. For this sample, we will use the `UmbNotificationContext` for some pop-ups and the `UmbMdalContext`. `UmbMdalContext` is used to show a dialog when you click the Trim button and the textbox's input length is longer than the maxLength configuration. +This is the third step in the Property Editor tutorial. In this part, we will integrate built-in Umbraco Contexts. For this sample, we will use the `UmbNotificationContext` for some pop-ups and the `UmbModalManagerContext`. `UmbModalManagerContext` is used to show a dialog when you click the Trim button and the textbox's input length is longer than the maxLength configuration. The steps we will go through in this part are: * [Setting up the contexts](integrating-context-with-a-property-editor.md#setting-up-the-contexts) -* [Using the modal and notification API](integrating-context-with-a-property-editor.md#using-the-modal-and-notification-api) +* [Using the modal and notification context](integrating-context-with-a-property-editor.md#using-the-modal-and-notification-context) +* [Adding more logic to the context](integrating-context-with-a-property-editor.md#adding-more-logic-to-the-context) ## Setting up the contexts -1. Replace the imports in the `suggestions-property-editor-ui.element.ts` file. +1. Add the following imports in the `suggestions-property-editor-ui.element.ts` file. This includes the notification context. {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript -import { LitElement, css, html, customElement, property, state} from "@umbraco-cms/backoffice/external/lit"; import { UUIInputEvent, UUIFormControlMixin} from "@umbraco-cms/backoffice/external/uui"; -import { UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL} from "@umbraco-cms/backoffice/modal"; import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; ``` @@ -29,9 +28,16 @@ import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; 2. Update the class to extend from UmbElementMixin. This allows us to consume the contexts that we need: +Here we also implement abstract class `getFormElement()` as required by `UUIFormControlMixinInterface` + {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFormControlMixin(LitElement, '')) { + protected getFormElement(): HTMLElement | undefined { + throw new Error("Method not implemented."); + } + ... +} ``` {% endcode %} @@ -39,14 +45,10 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript -_modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; _notificationContext?: UmbNotificationContext; constructor() { super(); - this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => { - this._modalManagerContext = instance; - }); this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => { this._notificationContext = instance; @@ -55,26 +57,34 @@ constructor() { ``` {% endcode %} -4. Add inherited class getFormElement -{% code title="suggestions-property-editor-ui.element.ts" %} -```typescript -protected getFormElement(): HTMLElement | undefined { - throw new Error("Method not implemented."); -} -``` -{% endcode %} -## Using the modal and notification API +## Using the notification context -Now we can use the modal and notification API, let's change our `#onTrimText` method. +Now we can use the notification context, let's change our `#onTrimText` method. First, check if the length of our input is smaller or equal to our maxLength configuration. If it is, we have nothing to trim and will send a notification saying there is nothing to trim. Here we can use the NotificationContext's peek method. It has two parameters `UmbNotificationColor` and an`UmbNotificationDefaultData` object. -1. Add the `#onTextTrim()`code in the `suggestions-property-editor-ui.element.ts` +1. Add a `click` event to the trim text button: + +{% code title="suggestions-property-editor-ui.element.ts" %} +```typescript + + Trim text + +``` +{% endcode %} + +2. Add the `#onTextTrim()`code in the `suggestions-property-editor-ui.element.ts` {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript @@ -93,9 +103,48 @@ Here we can use the NotificationContext's peek method. It has two parameters `Um If our input length is less or equal to our maxLength configuration, we will now get a notification when pressing the Trim button. -Let's add some more logic. If the length is more than the maxLength configuration, we want to show a dialog for the user to confirm the trim. Here we use the modal context's open method. +

Trim Button Notification

+ +## Adding more logic to the context + +Let's continue to add more logic. If the length is more than the `maxChars` configuration, we want to show a dialog for the user to confirm the trim. + +* Here we use the `ModalManagerContext` which has an open method to show a dialog. + +Like the notification context, we need to import it and consume it in the constructor. + +1. Import the `UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL` from `@umbraco-cms/backoffice/modal` + +{% code title="suggestions-property-editor-ui.element.ts" %} +```typescript +import { + UMB_MODAL_MANAGER_CONTEXT, + UMB_CONFIRM_MODAL, +} from "@umbraco-cms/backoffice/modal"; +``` +{% endcode %} + +2. Consume the `UMB_MODAL_MANAGER_CONTEXT, UMB_CONFIRM_MODAL`: + +{% code title="suggestions-property-editor-ui.element.ts" %} +```typescript + _modalManagerContext?: typeof UMB_MODAL_MANAGER_CONTEXT.TYPE; + _notificationContext?: typeof UMB_NOTIFICATION_CONTEXT.TYPE; + + constructor() { + super(); + this.consumeContext(UMB_MODAL_MANAGER_CONTEXT, (instance) => { + this._modalManagerContext = instance; + }); + + this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => { + this._notificationContext = instance; + }); + } +``` +{% endcode %} -2. Add the `open` method to the `#onTextTrim()` +3. Add more logic to the `onTextTrim` method: {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript @@ -140,6 +189,10 @@ import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; @customElement('my-suggestions-property-editor-ui') export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFormControlMixin(LitElement, '')) { + protected getFormElement(): HTMLElement | undefined { + throw new Error("Method not implemented."); + } + @property({ type: Boolean }) disabled = false; @@ -171,9 +224,7 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor "Are you hungry?", ]; - protected getFormElement(): HTMLElement | undefined { - throw new Error("Method not implemented."); - } + #onInput(e: UUIInputEvent) { this.value = e.target.value as string; @@ -277,13 +328,20 @@ declare global { "my-suggestions-input": UmbMySuggestionsInputElement; } } + ``` {% endcode %} -## Going further +## Wrap up -We have now connected our editor with the `UmbNotificationContext` and `UmbModalContext`. So that it is possible to trim the text as well as show us a pop-up when doing so. +Over the four previous steps, we have: -In the next part, we are going to integrate services with a Property Editor. +* Created a plugin. +* Defined an editor. +* Registered the Data Type in Umbraco. +* Added configuration to the Property Editor. +* Connected the editor with `UmbNotificationContext` and `UmbModalManagerContext`. +* Looked at some of the methods from notification & modal manager contexts in action. +* Integrated one of the built-in Umbraco Contexts with the Property Editor. From c57855dcff53911cce0ec3ace890fd8d0531892a Mon Sep 17 00:00:00 2001 From: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> Date: Mon, 6 May 2024 12:32:02 +0200 Subject: [PATCH 4/7] Update 14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md --- .../integrating-context-with-a-property-editor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index e851b218f07..8bcad71d4ee 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -6,7 +6,7 @@ description: Integrate one of the built-in Umbraco Contexts. ## Overview -This is the third step in the Property Editor tutorial. In this part, we will integrate built-in Umbraco Contexts. For this sample, we will use the `UmbNotificationContext` for some pop-ups and the `UmbModalManagerContext`. `UmbModalManagerContext` is used to show a dialog when you click the Trim button and the textbox's input length is longer than the maxLength configuration. +This is the third step in the Property Editor tutorial. In this part, we will integrate built-in Umbraco Contexts. For this sample, we will use the `UmbNotificationContext` for some pop-ups and the `UmbModalManagerContext`. `UmbNotificationContext` is used to show a dialog when you click the Trim button and the textbox's input length is longer than the maxLength configuration. The steps we will go through in this part are: From e55ba3b19d63f22764e3507d3a8ce2a17a34567f Mon Sep 17 00:00:00 2001 From: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> Date: Mon, 6 May 2024 12:32:08 +0200 Subject: [PATCH 5/7] Update 14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md --- .../integrating-context-with-a-property-editor.md | 1 - 1 file changed, 1 deletion(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index 8bcad71d4ee..dfd3454cf34 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -20,7 +20,6 @@ The steps we will go through in this part are: {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript -import { UUIInputEvent, UUIFormControlMixin} from "@umbraco-cms/backoffice/external/uui"; import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification"; import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; ``` From 48b4abc6fdcef7f5f50239c9a12d0657b02f5f73 Mon Sep 17 00:00:00 2001 From: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> Date: Mon, 6 May 2024 12:32:14 +0200 Subject: [PATCH 6/7] Update 14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md --- .../integrating-context-with-a-property-editor.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index dfd3454cf34..16d46f0a795 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -27,14 +27,11 @@ import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api"; 2. Update the class to extend from UmbElementMixin. This allows us to consume the contexts that we need: -Here we also implement abstract class `getFormElement()` as required by `UUIFormControlMixinInterface` {% code title="suggestions-property-editor-ui.element.ts" %} ```typescript -export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFormControlMixin(LitElement, '')) { - protected getFormElement(): HTMLElement | undefined { - throw new Error("Method not implemented."); - } +export default class MySuggestionsPropertyEditorUIElement extends UmbElementMixin((LitElement)) implements UmbPropertyEditorUiElement { + ... } ``` From 6c9c9d021caed6ede20ec502dd6cd34999fe1f93 Mon Sep 17 00:00:00 2001 From: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> Date: Mon, 6 May 2024 12:32:24 +0200 Subject: [PATCH 7/7] Update 14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md --- .../integrating-context-with-a-property-editor.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md index 16d46f0a795..f557c730f4b 100644 --- a/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md +++ b/14/umbraco-cms/tutorials/creating-a-property-editor/integrating-context-with-a-property-editor.md @@ -332,7 +332,7 @@ declare global { ## Wrap up -Over the four previous steps, we have: +Over the previous steps, we have: * Created a plugin. * Defined an editor.