Introduce utilities section for Backoffice customization helpers

17/umbraco-cms/.gitbook.yaml

@@ -150,4 +150,6 @@ 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
+    customizing/extending-overview/extension-types/modals/confirm-dialog: customizing/utilities/modals/confirm-dialog.md
 

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)
@@ -220,7 +219,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)
@@ -247,6 +245,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/README.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)

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
 
@@ -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
 

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.

17/umbraco-cms/customizing/utilities/README.md

@@ -0,0 +1,15 @@
+---
+description: >-
+    In this section you can find information about different code utilities that can be
+    used in your extension when customizing the Backoffice.
+---
+
+# Utilities
+
+## [Modals](modals/README.md)
+
+Open dialogs and sidebars to interact with the user.
+
+## [Sorting](sorting.md)
+
+Create a UI that the user can sort via Drag and Drop.

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.

17/umbraco-cms/customizing/extending-overview/extension-types/modals/confirm-dialog.md → 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,21 +54,23 @@ export class MyConfirmationModal extends UmbElementMixin(LitElement) {
 
     render() {
         return html`<uui-button
-      look="primary"
-      color="danger"
-      @click=${this.#onRequestDisable}
-      label=${this.localize.term("actions_disable")}
-    ></uui-button>`;
+            look="primary"
+            color="danger"
+            @click=${this.#onRequestDisable}
+            label=${this.localize.term("actions_disable")}
+        ></uui-button>`;
     }
 }
 ```
+
 {% endcode %}
 
 ## Convenience Method
 
 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`<uui-button
-      look="primary"
-      color="positive"
-      @click=${this.#onRequestDisable}
-      label=${this.localize.term("actions_disable")}
-    ></uui-button>`;
+            look="primary"
+            color="positive"
+            @click=${this.#onRequestDisable}
+            label=${this.localize.term("actions_disable")}
+        ></uui-button>`;
     }
 }
 ```
+
 {% endcode %}