Skip to content

Update integrating-context-with-a-property-editor.md #6068

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 6, 2024
Merged

Update integrating-context-with-a-property-editor.md #6068

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b9dc884
Update integrating-context-with-a-property-editor.md
grayn90 May 2, 2024
1677967
Update integrating-context-with-a-property-editor.md
grayn90 May 2, 2024
c810a7c
Merge pull request #1 from grayn90/grayn90-patch-2
grayn90 May 3, 2024
7c920ea
Update integrating-context-with-a-property-editor.md
grayn90 May 3, 2024
c57855d
Update 14/umbraco-cms/tutorials/creating-a-property-editor/integratin…
alina-tincas May 6, 2024
e55ba3b
Update 14/umbraco-cms/tutorials/creating-a-property-editor/integratin…
alina-tincas May 6, 2024
48b4abc
Update 14/umbraco-cms/tutorials/creating-a-property-editor/integratin…
alina-tincas May 6, 2024
6c9c9d0
Update 14/umbraco-cms/tutorials/creating-a-property-editor/integratin…
alina-tincas May 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
217 changes: 141 additions & 76 deletions ...orials/creating-a-property-editor/integrating-context-with-a-property-editor.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,113 +6,167 @@ 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`. `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:

* [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. Insert the following imports into the `suggestions-input.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-input.element.ts" %}
{% code title="suggestions-property-editor-ui.element.ts" %}
```typescript
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 { 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, '')) {
export default class MySuggestionsPropertyEditorUIElement extends UmbElementMixin((LitElement)) implements UmbPropertyEditorUiElement {

...
}
```
{% endcode %}

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
private _modalContext?: UmbModalContext;
private _notificationContext?: UmbNotificationContext;
_notificationContext?: UmbNotificationContext;

constructor() {
super();
this.consumeContext(UMB_MODAL_CONTEXT, (instance) => {
this._modalContext = instance;
});
super();

this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
this._notificationContext = instance;
this.consumeContext(UMB_NOTIFICATION_CONTEXT, (instance) => {
this._notificationContext = instance;
});
}
```
{% endcode %}

## Using the modal and notification API

Now we can use the modal and notification API, let's change our `#onTrimText` method.


## Using the notification context

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-input.element.ts`
1. Add a `click` event to the trim text button:

{% code title="suggestions-property-editor-ui.element.ts" %}
```typescript
<uui-button
id="suggestion-trimmer"
class="element"
look="outline"
label="Trim text"
@click=${this.#onTextTrim}
>
Trim text
</uui-button>
```
{% endcode %}

2. 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 %}

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.
<figure><img src="../../.gitbook/assets/nothing-to-trim (1) (1).png" alt=""><figcaption><p>Trim Button Notification</p></figcaption></figure>

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

2. Add the `open` method to the `#onTextTrim()`
* Here we use the `ModalManagerContext` which has an open method to show a dialog.

{% code title="suggestions-input.element.ts" %}
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 %}

3. Add more logic to the `onTextTrim` method:

{% code title="suggestions-property-editor-ui.element.ts" %}
```typescript
#onTextTrim() {
...

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',
});
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 %}
Expand All @@ -121,16 +175,20 @@ Let's add some more logic. If the length is more than the maxLength configuratio

<summary>See the entire file: suggestions-property-editor-ui.element.ts</summary>

{% 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";
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";

@customElement("my-suggestions-input")
@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;

Expand All @@ -140,13 +198,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) => {
Expand All @@ -162,9 +220,7 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor
"Are you hungry?",
];

protected getFormElement() {
return undefined;
}


#onInput(e: UUIInputEvent) {
this.value = e.target.value as string;
Expand All @@ -185,12 +241,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();
Expand Down Expand Up @@ -259,20 +319,25 @@ export default class UmbMySuggestionsInputElement extends UmbElementMixin(UUIFor
];
}

export default UmbMySuggestionsInputElement;

declare global {
interface HTMLElementTagNameMap {
"my-suggestions-input": UmbMySuggestionsInputElement;
}
}

```
{% endcode %}

</details>

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