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.
Now we can use the modal and notification API, 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 anUmbNotificationDefaultData object.
Add the #onTextTrim()code in the suggestions-input.element.ts
suggestions-input.element.ts
#onTextTrim() {if (!this.maxLength) return;if (!this.value || (this.value asstring).length<=this.maxLength) {constdata:UmbNotificationDefaultData= { message:`Nothing to trim!`, };this._notificationContext?.peek('danger', { data });return; }}
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.
Add the open method to the #onTextTrim()
suggestions-input.element.ts
#onTextTrim() {...consttrimmed= (this.value asstring).substring(0,this.maxLength);constmodalHandler=this._modalContext?.open(UMB_CONFIRM_MODAL, { 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();constdata:UmbNotificationDefaultData= { headline:`Text trimmed`, message:`You trimmed the text!`, };this._notificationContext?.peek('positive', { data }); },null);}
See the entire file: suggestions-property-editor-ui.element.ts
suggestions-input.element.ts
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_NOTIFICATION_CONTEXT, UmbNotificationContext, UmbNotificationDefaultData} from "@umbraco-cms/backoffice/notification";
import { UmbElementMixin } from"@umbraco-cms/backoffice/element-api";@customElement("my-suggestions-input")exportdefaultclassUmbMySuggestionsInputElementextendsUmbElementMixin(UUIFormControlMixin(LitElement,'')) { @property({ type: Boolean }) disabled =false; @property({ type: String }) placeholder?:string; @property({ type: Number }) maxLength?:number;private _modalContext?:UmbModalContext;private _notificationContext?:UmbNotificationContext;constructor() {super();this.consumeContext(UMB_MODAL_CONTEXT, (instance) => {this._modalContext = instance; });this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {this._notificationContext = instance; }); } @state()private _suggestions = ["You should take a break","I suggest that you visit the Eiffel Tower","How about starting a book club today or this week?","Are you hungry?", ];protectedgetFormElement() {returnundefined; } #onInput(e:UUIInputEvent) {this.value =e.target.value asstring;this.#dispatchChangeEvent(); } #onSuggestion() {constrandomIndex= (this._suggestions.length*Math.random()) |0;this.value =this._suggestions[randomIndex];this.#dispatchChangeEvent(); } #onTextTrim() {if (!this.maxLength) return;if (!this.value || (this.value asstring).length<=this.maxLength) {constdata:UmbNotificationDefaultData= { message:`Nothing to trim!`, };this._notificationContext?.peek("danger", { data });return; }consttrimmed= (this.value asstring).substring(0,this.maxLength);constmodalHandler=this._modalContext?.open(UMB_CONFIRM_MODAL, { 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();constdata:UmbNotificationDefaultData= { headline:`Text trimmed`, message:`You trimmed the text!`, };this._notificationContext?.peek("positive", { data }); },null); } #dispatchChangeEvent() {this.dispatchEvent(newCustomEvent("change", { bubbles:true, composed:true }) ); }render() {returnhtml`<div class="blue-text">${this.value}</div> <uui-input id="suggestion-input" class="element" label="text input" .placeholder="${this.placeholder}" .maxlength=${this.maxLength} .value="${this.value ||""}" @input=${this.#onInput} ></uui-input> <div id="wrapper"> <uui-button id="suggestion-button" class="element" look="primary" label="give me suggestions" @click=${this.#onSuggestion} ?disabled=${this.disabled} > Give me suggestions! </uui-button> <uui-button id="suggestion-trimmer" class="element" look="outline" label="Trim text" @click=${this.#onTextTrim} > Trim text </uui-button> </div> `; }static styles = [css` .blue-text { color: var(--uui-color-focus); } #wrapper { margin-top: 10px; display: flex; gap: 10px; } .element { width: 100%; } `, ];}exportdefault UmbMySuggestionsInputElement;declare global {interfaceHTMLElementTagNameMap {"my-suggestions-input":UmbMySuggestionsInputElement; }}
Going further
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.
In the next part, we are going to integrate services with a Property Editor.