From c30cdc212327de2634c5410386e2a74f95535af5 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 19:28:07 +0100 Subject: [PATCH 1/7] move sorting to utilities --- 17/umbraco-cms/.gitbook.yaml | 1 + 17/umbraco-cms/customizing/foundation/README.md | 4 ---- 17/umbraco-cms/customizing/utilities/README.md | 11 +++++++++++ .../customizing/{foundation => utilities}/sorting.md | 0 4 files changed, 12 insertions(+), 4 deletions(-) create mode 100644 17/umbraco-cms/customizing/utilities/README.md rename 17/umbraco-cms/customizing/{foundation => utilities}/sorting.md (100%) diff --git a/17/umbraco-cms/.gitbook.yaml b/17/umbraco-cms/.gitbook.yaml index 07811b0881d..cc5c7a2e889 100644 --- a/17/umbraco-cms/.gitbook.yaml +++ b/17/umbraco-cms/.gitbook.yaml @@ -150,4 +150,5 @@ redirects: customizing/extending-overview/extension-types/workspaces/workspace-footer-app: customizing/extending-overview/extension-types/workspaces/workspace-footer-apps.md customizing/foundation/repositories: customizing/foundation/repositories/README.md customizing/extending-overview/extension-kind: customizing/extending-overview/extension-types/kind.md + customizing/foundation/sorting: customizing/utilities/sorting.md \ No newline at end of file diff --git a/17/umbraco-cms/customizing/foundation/README.md b/17/umbraco-cms/customizing/foundation/README.md index 338eeda0f22..00e7f93fda6 100644 --- a/17/umbraco-cms/customizing/foundation/README.md +++ b/17/umbraco-cms/customizing/foundation/README.md @@ -26,10 +26,6 @@ Learn how to communicate with the rest of the application, whether you want to r Bring life into your UI by ensuring it's up to date with the current data. -## [Sorting](sorting.md) - -Create a UI that the user can sort via Drag and Drop. - ## [Routes](routes.md) Implements routes into your UI, enabling Users to deep link into your UI. diff --git a/17/umbraco-cms/customizing/utilities/README.md b/17/umbraco-cms/customizing/utilities/README.md new file mode 100644 index 00000000000..7e779aeb5b8 --- /dev/null +++ b/17/umbraco-cms/customizing/utilities/README.md @@ -0,0 +1,11 @@ +--- +description: >- + In this section you can find information about different code utilities that can be + used in your extension when customizing the Backoffice. +--- + +# Foundation + +## [Sorting](sorting.md) + +Create a UI that the user can sort via Drag and Drop. diff --git a/17/umbraco-cms/customizing/foundation/sorting.md b/17/umbraco-cms/customizing/utilities/sorting.md similarity index 100% rename from 17/umbraco-cms/customizing/foundation/sorting.md rename to 17/umbraco-cms/customizing/utilities/sorting.md From 5dd2b9cacf435e3784979e79c0f795c265c1b9f7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 19:49:43 +0100 Subject: [PATCH 2/7] move confirm dialog to utils --- 17/umbraco-cms/.gitbook.yaml | 1 + .../extension-types/modals/README.md | 2 +- .../customizing/utilities/README.md | 6 +++- .../customizing/utilities/modals/README.md | 9 +++++ .../modals/confirm-dialog.md | 34 +++++++++++-------- 5 files changed, 35 insertions(+), 17 deletions(-) create mode 100644 17/umbraco-cms/customizing/utilities/modals/README.md rename 17/umbraco-cms/customizing/{extending-overview/extension-types => utilities}/modals/confirm-dialog.md (80%) diff --git a/17/umbraco-cms/.gitbook.yaml b/17/umbraco-cms/.gitbook.yaml index cc5c7a2e889..e1a32dd9d69 100644 --- a/17/umbraco-cms/.gitbook.yaml +++ b/17/umbraco-cms/.gitbook.yaml @@ -151,4 +151,5 @@ redirects: customizing/foundation/repositories: customizing/foundation/repositories/README.md customizing/extending-overview/extension-kind: customizing/extending-overview/extension-types/kind.md customizing/foundation/sorting: customizing/utilities/sorting.md + customizing/extending-overview/extension-types/modals/confirm-dialog: customizing/utilities/modals/confirm-dialog.md \ No newline at end of file diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md b/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md index 7dc909197de..f807d534b9e 100644 --- a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md +++ b/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md @@ -93,7 +93,7 @@ modalContext .catch(() => undefined); ``` -[See the implementing a Confirm Dialog for an example.](confirm-dialog.md) +[See the implementing a Confirm Dialog for an example.](../../../utilities/modals/confirm-dialog.md) ### Modal Route Registration diff --git a/17/umbraco-cms/customizing/utilities/README.md b/17/umbraco-cms/customizing/utilities/README.md index 7e779aeb5b8..cf97a08b086 100644 --- a/17/umbraco-cms/customizing/utilities/README.md +++ b/17/umbraco-cms/customizing/utilities/README.md @@ -4,7 +4,11 @@ description: >- used in your extension when customizing the Backoffice. --- -# Foundation +# Utilities + +## [Modals](modals/README.md) + +Open dialogs and sidebars to interact with the user. ## [Sorting](sorting.md) diff --git a/17/umbraco-cms/customizing/utilities/modals/README.md b/17/umbraco-cms/customizing/utilities/modals/README.md new file mode 100644 index 00000000000..b321ae137d8 --- /dev/null +++ b/17/umbraco-cms/customizing/utilities/modals/README.md @@ -0,0 +1,9 @@ +--- +description: >- + In this section you can find information about different modal utilities that can be + used in your extension when customizing the Backoffice. +--- + +## [Confirm Dialog](modals/confirm-dialog.md) + +Present a dialog to ask the user for confirmation. diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog.md b/17/umbraco-cms/customizing/utilities/modals/confirm-dialog.md similarity index 80% rename from 17/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog.md rename to 17/umbraco-cms/customizing/utilities/modals/confirm-dialog.md index df3f9bc3dee..4dace47ab63 100644 --- a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog.md +++ b/17/umbraco-cms/customizing/utilities/modals/confirm-dialog.md @@ -10,11 +10,11 @@ Extension authors do not need to register the dialog in their extension's manife Extension authors can customize the dialog with configuration options such as headline, body content, colors, and button labels. -* `headline` - The headline of the modal. -* `content` - The content of the modal, which can be a TemplateResult or a string. -* `color` - (Optional) The color of the modal, can be `positive` or `danger`. Defaults to `positive`. -* `confirmLabel` - (Optional) The label of the confirmation button. -* `cancelLabel` - (Optional) The label of the cancel button. +- `headline` - The headline of the modal. +- `content` - The content of the modal, which can be a TemplateResult or a string. +- `color` - (Optional) The color of the modal, can be `positive` or `danger`. Defaults to `positive`. +- `confirmLabel` - (Optional) The label of the confirmation button. +- `cancelLabel` - (Optional) The label of the cancel button. To see all properties of the `UMB_CONFIRM_MODAL` token, see the [API reference](https://apidocs.umbraco.com/v16/ui-api/interfaces/packages_core_modal.UmbConfirmModalData.html). @@ -23,6 +23,7 @@ The `onSubmit` method returns a promise that resolves when the user confirms the ## Opening a Confirmation Dialog {% code title="my-element.ts" %} + ```typescript import { html, @@ -53,14 +54,15 @@ export class MyConfirmationModal extends UmbElementMixin(LitElement) { render() { return html``; + look="primary" + color="danger" + @click=${this.#onRequestDisable} + label=${this.localize.term("actions_disable")} + >`; } } ``` + {% endcode %} ## Convenience Method @@ -68,6 +70,7 @@ export class MyConfirmationModal extends UmbElementMixin(LitElement) { Confirmation dialogs can be opened using the `umbConfirmModal` method, which offers a slightly simplified API. {% code title="my-element.ts" %} + ```typescript import { html, @@ -96,12 +99,13 @@ export class RestartServicesModal extends UmbElementMixin(LitElement) { render() { return html``; + look="primary" + color="positive" + @click=${this.#onRequestDisable} + label=${this.localize.term("actions_disable")} + >`; } } ``` + {% endcode %} From f523de6db01859ffe3ba6188e1616f084ab55152 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 19:49:58 +0100 Subject: [PATCH 3/7] update path --- .../extending-overview/extension-types/modals/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md b/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md index f807d534b9e..09a2cda9103 100644 --- a/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md +++ b/17/umbraco-cms/customizing/extending-overview/extension-types/modals/README.md @@ -48,7 +48,7 @@ declare global { The Promise returned by `umbOpenModal` is handled for potential rejection. This occurs when the Model is closed without submitting. Use this behavior to carry out a certain action if the modal is cancelled. In this case, `undefined` is returned when the Modal is cancelled (rejected). -See the [Confirm Modal article](confirm-dialog.md) for an example. +See the [Confirm Modal article](../../../utilities/modals/confirm-dialog.md) for an example. ### Directly open via the Modal Manager Context From 3ff48c80016d64363bc2478f99852695ae92d755 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 20:12:41 +0100 Subject: [PATCH 4/7] Update SUMMARY.md --- 17/umbraco-cms/SUMMARY.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/17/umbraco-cms/SUMMARY.md b/17/umbraco-cms/SUMMARY.md index 69e8365a8e2..84abd1a5df1 100644 --- a/17/umbraco-cms/SUMMARY.md +++ b/17/umbraco-cms/SUMMARY.md @@ -247,6 +247,10 @@ * [Integrate Property Editors](customizing/property-editors/integrate-property-editors.md) * [Tracking References](customizing/property-editors/tracking.md) * [Property Dataset](customizing/property-editors/property-dataset.md) +* [Utilities](customizing/utilities/README.md) + * [Modals](customizing/utilities/modals.md) + * [Confirm Dialog](customizing/utilities/modals/confirm-dialog.md) + * [UI Sorting](customizing/utilities/sorting.md) * [Workspaces](customizing/workspaces.md) * [Umbraco Package](customizing/umbraco-package.md) * [UI Library](customizing/ui-library.md) From 3e4c03b5256b290bfcccc08e174429cc6f55643f Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 20:26:43 +0100 Subject: [PATCH 5/7] remove old sorting location --- 17/umbraco-cms/SUMMARY.md | 1 - 1 file changed, 1 deletion(-) diff --git a/17/umbraco-cms/SUMMARY.md b/17/umbraco-cms/SUMMARY.md index 84abd1a5df1..8848ae8fe90 100644 --- a/17/umbraco-cms/SUMMARY.md +++ b/17/umbraco-cms/SUMMARY.md @@ -220,7 +220,6 @@ * [Item Repository](customizing/foundation/repositories/repository-types/item-repository.md) * [Tree Repository](customizing/foundation/repositories/repository-types/tree-repository.md) * [States](customizing/foundation/states.md) - * [UI Sorting](customizing/foundation/sorting.md) * [Routes](customizing/foundation/routes.md) * [Backoffice Localization](customizing/foundation/localization.md) * [Integrate Validation](customizing/foundation/integrate-validation.md) From f48fe798547d3a93373d36ef531db0fdb53f11dd Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 20:29:11 +0100 Subject: [PATCH 6/7] remove old entry of confirm dialog --- 17/umbraco-cms/SUMMARY.md | 1 - 1 file changed, 1 deletion(-) diff --git a/17/umbraco-cms/SUMMARY.md b/17/umbraco-cms/SUMMARY.md index 8848ae8fe90..3e5f3b1176a 100644 --- a/17/umbraco-cms/SUMMARY.md +++ b/17/umbraco-cms/SUMMARY.md @@ -180,7 +180,6 @@ * [Localization](customizing/extending-overview/extension-types/localization.md) * [Menu](customizing/extending-overview/extension-types/menu.md) * [Modals](customizing/extending-overview/extension-types/modals/README.md) - * [Confirm Dialog](customizing/extending-overview/extension-types/modals/confirm-dialog.md) * [Custom Modals](customizing/extending-overview/extension-types/modals/custom-modals.md) * [Modal Route Registration](customizing/extending-overview/extension-types/modals/route-registration.md) * [Property Value Preset](customizing/extending-overview/extension-types/property-value-preset.md) From 44186478926639e92b662175bb187cff56ce3df8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Tue, 18 Nov 2025 20:39:38 +0100 Subject: [PATCH 7/7] fix overview --- 17/umbraco-cms/SUMMARY.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/17/umbraco-cms/SUMMARY.md b/17/umbraco-cms/SUMMARY.md index 3e5f3b1176a..bbcfd0e1e43 100644 --- a/17/umbraco-cms/SUMMARY.md +++ b/17/umbraco-cms/SUMMARY.md @@ -246,7 +246,7 @@ * [Tracking References](customizing/property-editors/tracking.md) * [Property Dataset](customizing/property-editors/property-dataset.md) * [Utilities](customizing/utilities/README.md) - * [Modals](customizing/utilities/modals.md) + * [Modals](customizing/utilities/modals/README.md) * [Confirm Dialog](customizing/utilities/modals/confirm-dialog.md) * [UI Sorting](customizing/utilities/sorting.md) * [Workspaces](customizing/workspaces.md)