Ctrlk
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Integrating Context with a Property Editor

Integrate one of the built-in Umbraco Contexts.

Overview

This is the third step in the Property Editor tutorial. This part shows how to integrate built-in Umbraco Contexts. For this sample, let us use the UmbNotificationContext for some pop-ups and the UmbModalManagerContext. UmbNotificationContext shows a notification when the Trim button is clicked and the input exceeds the maxChars limit.

This part covers:

Setting up the contexts

  1. Add the following imports in the suggestions-property-editor-ui.element.ts file. This includes the notification context.

suggestions-property-editor-ui.element.ts
import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext, type UmbNotificationDefaultData } from '@umbraco-cms/backoffice/notification';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';

  1. Update the class to extend from UmbElementMixin. This allows to consume the contexts needed:

suggestions-property-editor-ui.element.ts
export default class MySuggestionsPropertyEditorUIElement extends UmbElementMixin((LitElement)) implements UmbPropertyEditorUiElement {

  1. Create the constructor to consume the notification context above the render() method:

suggestions-property-editor-ui.element.ts
#notificationContext?: UmbNotificationContext;

constructor() {
    super();

    this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
        this.#notificationContext = instance;
    });
}

Using the notification context

With the notification context in place, update the #onTrimText method.

Check whether the input length is less than or equal to the maxChars value. If so, a notification is shown to indicate there is nothing to trim.

Use the NotificationContext's peek method here. The method has two parameters: an UmbNotificationColor and an UmbNotificationOptions object. Pass an UmbNotificationDefaultData object in the data property of the options. The message property is required.

  1. Add the #onTextTrim()method above the render() method:

  1. Add a click event to the trim text button in the render() method:

If the input length is less or equal to the maxLength configuration, a notification is displayed when clicking on the Trim button.

A danger notification reading 'Nothing to trim!' displayed in the Umbraco backoffice.
Trim Button Notification

Adding more logic to the context

Continue by adding more logic. If the length exceeds maxChars, show a confirmation dialog before trimming.

Here, use the ModalManagerContext which has an open method to show a dialog.

As with the notification context, import it and consume it in the constructor.

  1. Add the following import in the suggestions-property-editor-ui.element.ts file:

  1. Update the notification import to remove the UmbNotificationContext type, which is no longer needed:

  1. Update the constructor to consume the UMB_MODAL_MANAGER_CONTEXTand the UMB_CONFIRM_MODAL.

  1. Add more logic to the onTextTrim method:

The content of the confirm modal is a Lit html template, so Lit escapes the trimmed value. The confirm modal renders a string content as HTML, so never interpolate user input into a string.

See the entire file: suggestions-property-editor-ui.element.ts

  1. Run the command npm run build in the suggestions folder.

  2. Run the project.

  3. Go to the Content section of the Backoffice.

  4. Ask for suggestions and click on the Trim text button. If the suggested text is long enough to be trimmed, you will be asked for confirmation:

Confirmation message

Enforcing the Character Limit

The maxlength attribute on uui-input only provides visual feedback. It highlights the input red when the limit is exceeded, but does not prevent saving or publishing.

To enforce the limit properly, your property editor needs to be a form control.

Making the editor a Form Control

1

Import UmbLitElement and UmbFormControlMixin

2

Update the Lit import

Remove UmbElementMixin and LitElement from the @umbraco-cms/backoffice/external/lit import as they are no longer needed.

3

Update the class declaration

Extend UmbFormControlMixin wrapping UmbLitElement:

4

Replace value with a getter/setter

UmbFormControlMixin already defines value as an accessor:

5

Add a validation rule

Add this in the constructor to block saving when the character limit is exceeded:

6

Register the input as a form control

Add firstUpdated() to register the input:

Adding a character counter

1

Add the character counter

Add a character counter below the uui-input in your render() method:

2

Add the styles

See the entire file: suggestions-property-editor-ui.element.ts

With all of these in place, the editor will:

  • Show a live character counter.

  • Display a validation message when the limit is exceeded.

  • Block saving or publishing until the value is within the limit.

Block Saving or Publishing when max length value is exceeded.

Wrap up

Over the previous steps, the following was covered:

  • 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.

  • Enforced the maxChars configuration using UmbFormControlMixin, including a live character counter and validation that blocks saving and publishing.

PreviousAdding Configuration to a Property Editor
NextCustom Value Conversion for Rendering

Last updated

Was this helpful?