Last updated
Was this helpful?
Last updated
Was this helpful?
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:
Add the following imports in the suggestions-property-editor-ui.element.ts file. This includes the notification context.
Update the class to extend from UmbElementMixin. This allows us to consume the contexts that we need:
Create the constructor where we can consume the notification context above the render() 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 anUmbNotificationDefaultData object.
Add the #onTextTrim()method above the render() method:
Add a click event to the trim text button in the render() method:
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 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.
Add the following import in the suggestions-property-editor-ui.element.ts file:
Remove the UmbNotificationContext from the "@umbraco-cms/backoffice/notification" import:
Update the constructor to consume the UMB_MODAL_MANAGER_CONTEXTand the UMB_CONFIRM_MODAL.
Add more logic to the onTextTrim method:
Run the command npm run build in the suggestions folder.
Run the project.
Go to the Content section of the Backoffice.
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:
Over the previous steps, we have:
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.
Integrate one of the built-in Umbraco Contexts.
