Skip to content

Commit 6195c33

Browse files
committed
Refine "Confirm Dialog" documentation: updated section title, added a new "Convenience Method" example using umbOpenConfirmDialog, and improved TypeScript example clarity.
1 parent 155cc38 commit 6195c33

File tree

1 file changed

+44
-1
lines changed
  • 16/umbraco-cms/customizing/extending-overview/extension-types/modals

1 file changed

+44
-1
lines changed

16/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog.md

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ To see all properties of the `UMB_CONFIRM_MODAL` token, see the [API reference](
2020

2121
The `onSubmit` method returns a promise that resolves when the user confirms the dialog, and rejects when the user cancels the dialog.
2222

23-
## Basic Usage
23+
## Opening a Confirmation Dialog
2424

2525
{% code title="my-element.ts" %}
2626
```typescript
@@ -62,3 +62,46 @@ export class MyConfirmationModal extends UmbElementMixin(LitElement) {
6262
}
6363
```
6464
{% endcode %}
65+
66+
## Convenience Method
67+
68+
Confirmation dialogs can be opened using the `umbConfirmModal` method, which offers a slightly simpler API.
69+
70+
{% code title="my-element.ts" %}
71+
```typescript
72+
import {
73+
html,
74+
LitElement,
75+
customElement,
76+
} from "@umbraco-cms/backoffice/external/lit";
77+
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
78+
import { umbConfirmModal } from "@umbraco-cms/backoffice/modal";
79+
80+
@customElement("restart-services-modal")
81+
export class RestartServicesModal extends UmbElementMixin(LitElement) {
82+
#onRequestDisable() {
83+
umbConfirmModal(this, {
84+
headline: this.localize.term("actions_disable"),
85+
content: this.localize.term("defaultdialogs_confirmdisable"),
86+
color: "danger",
87+
confirmLabel: this.localize.term("actions_disable"),
88+
})
89+
.then(() => {
90+
console.log("User has approved");
91+
})
92+
.catch(() => {
93+
console.log("User has rejected");
94+
});
95+
}
96+
97+
render() {
98+
return html`<uui-button
99+
look="primary"
100+
color="positive"
101+
@click=${this.#onRequestDisable}
102+
label=${this.localize.term("actions_disable")}
103+
></uui-button>`;
104+
}
105+
}
106+
```
107+
{% endcode %}

0 commit comments

Comments
 (0)