diff --git a/17/umbraco-cms/.gitbook.yaml b/17/umbraco-cms/.gitbook.yaml index 07811b0881d..e1a32dd9d69 100644 --- a/17/umbraco-cms/.gitbook.yaml +++ b/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 \ No newline at end of file diff --git a/17/umbraco-cms/SUMMARY.md b/17/umbraco-cms/SUMMARY.md index 69e8365a8e2..bbcfd0e1e43 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) @@ -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) 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..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 @@ -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/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..cf97a08b086 --- /dev/null +++ b/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. 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 %} 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