Merge pull request #7481 from umbraco/merge-v16-changes-to-v17

Merge v16 changes to v17

Author: eshanrnh

17/umbraco-cms/SUMMARY.md

@@ -156,7 +156,7 @@
   * [Vite Package Setup](customizing/development-flow/vite-package-setup.md)
 * [Extensions Overview](customizing/extending-overview/README.md)
   * [Extension Registry](customizing/extending-overview/extension-registry/README.md)
-    * [Register an Extension](customizing/extending-overview/extension-registry/register-an-extension.md)
+    * [Register an Extension](customizing/extending-overview/extension-registry/register-extensions.md)
     * [Extension Manifest](customizing/extending-overview/extension-registry/extension-manifest.md)
     * [Replace, Exclude or Unregister](customizing/extending-overview/extension-registry/replace-exclude-or-unregister.md)
   * [Extension Types](customizing/extending-overview/extension-types/README.md)
@@ -217,6 +217,7 @@
 * [Sections & Trees](customizing/section-trees.md)
 * [Property Level UI Permissions](customizing/property-level-ui-permissions.md)
 * [Icons](customizing/foundation/icons.md)
+* [BackOffice Signs](customizing/back-office-signs.md)
 * [Searchable Trees (ISearchableTree)](customizing/searchable-trees.md)
 * [Property Editors](customizing/property-editors/README.md)
   * [Property Editor Validation](customizing/property-editors/property-editor-validation.md)
@@ -261,6 +262,7 @@
   * [Using Azure Blob Storage for Media and ImageSharp Cache](extending/filesystemproviders/azure-blob-storage.md)
 * [Configuring Azure Key Vault](extending/key-vault.md)
 * [Server Events From SignalR](extending/server-events.md)
+* [Flag Providers](extending/flag-providers.md)
 * [Packages](extending/packages/README.md)
   * [Creating a Package](extending/packages/creating-a-package.md)
   * [Language file for packages](extending/packages/language-files-for-packages.md)

17/umbraco-cms/customizing/back-office-signs.md

@@ -0,0 +1,38 @@
+---
+description: Describes how to use sign information provided in management API responses to present additional details to consumers.
+---
+
+# Backoffice Signs
+
+When trees, collections and items are presented in the backoffice, additional information can be displayed in the form of Signs.
+
+A Backoffice sign is a client-side extension point that determines how each sign is displayed in the backoffice.
+
+A Sign can utilize conditions in the same way as other Extensions or it can be bound to a Flag coming from the Management API.
+
+For example, a Document scheduled for future publishing will have a Flag defined as part of trees, collections and item response:
+
+```json
+  "flags": [
+    {
+      "alias": "Umb.ScheduledForPublish"
+    }
+  ],
+```
+
+A Flag can be the determinant for a Sign by declaring the `forEntityFlags` as part of its Manifest.
+
+Example:
+```json
+...
+forEntityFlags: "Umb.ScheduledForPublish",
+...
+```
+
+Using this binding lets the server determine which signs are present in the response via the registered collection of [flag providers](../extending/flag-providers.md).
+
+## Displaying a Sign
+
+{% hint style="info" %}
+The client extension for backoffice signs will be available in Umbraco 16.4 / 17.0.
+{% endhint %}

17/umbraco-cms/customizing/extending-overview/extension-registry/register-an-extension.md

@@ -20,7 +20,7 @@ To see all properties of the `UMB_CONFIRM_MODAL` token, see the [API reference](
 
 The `onSubmit` method returns a promise that resolves when the user confirms the dialog, and rejects when the user cancels the dialog.
 
-## Basic Usage
+## Opening a Confirmation Dialog
 
 {% code title="my-element.ts" %}
 ```typescript
@@ -62,3 +62,46 @@ export class MyConfirmationModal extends UmbElementMixin(LitElement) {
 }
 ```
 {% 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,
+    LitElement,
+    customElement,
+} from "@umbraco-cms/backoffice/external/lit";
+import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
+import { umbConfirmModal } from "@umbraco-cms/backoffice/modal";
+
+@customElement("restart-services-modal")
+export class RestartServicesModal extends UmbElementMixin(LitElement) {
+    #onRequestDisable() {
+        umbConfirmModal(this, {
+            headline: this.localize.term("actions_disable"),
+            content: this.localize.term("defaultdialogs_confirmdisable"),
+            color: "danger",
+            confirmLabel: this.localize.term("actions_disable"),
+        })
+            .then(() => {
+                console.log("User has approved");
+            })
+            .catch(() => {
+                console.log("User has rejected");
+            });
+    }
+
+    render() {
+        return html`<uui-button
+      look="primary"
+      color="positive"
+      @click=${this.#onRequestDisable}
+      label=${this.localize.term("actions_disable")}
+    ></uui-button>`;
+    }
+}
+```
+{% endcode %}

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

@@ -49,6 +49,7 @@ Notice that `forPropertyEditorSchemaAlias` only targets the Properties used on t
 ## Utilize the Data-Type configuration
 
 The `processValue` method takes four arguments:
+
 - The current value.
 - The Data Type configuration.
 - The type arguments, which contains details such as whether the property is mandatory, and how it varies by culture and segment.

17/umbraco-cms/customizing/extending-overview/extension-types/property-value-preset.md

@@ -20,9 +20,7 @@ Section Sidebar extensions can be composed of **one or more** section sidebar ap
 
 ### Custom Sidebar App Example
 
-Section Sidebar extension authors can place any custom web component into the sidebar. Extension authors will need to
-supply the `element` property with the path of their custom web component. Specify the full path, starting from the 
-Umbraco project root.
+Section Sidebar extension authors can place any custom web component into the sidebar. Extension authors will need to supply the `element` property with the path of their custom web component. Specify the full path, starting from the Umbraco project root.
 
 Sidebar Section extension authors may specify where the Section Sidebar app appears using
 [extension conditions](../condition.md).
@@ -94,9 +92,7 @@ For more information, see the documentation for the [menus](../menu.md) extensio
 
 #### Coordinating subviews with menu items
 
-Menu sidebar apps can coordinate navigation between subviews in the section extension by referencing
-[workspace extensions](../workspaces/workspace.md). Modify the menu item extension to include the `meta:entityType`
-property, and assign it the same value as a workspace view extensions' own `meta:entityType` property.
+Menu sidebar apps can coordinate navigation between subviews in the section extension by referencing [workspace extensions](../workspaces/workspace.md). Modify the menu item extension to include the `meta:entityType` property, and assign it the same value as a workspace view extensions' own `meta:entityType` property.
 
 {% code title="umbraco-package.json" %}
 ```json

17/umbraco-cms/customizing/extending-overview/extension-types/sections/section-sidebar.md

@@ -11,8 +11,7 @@ Section View extensions are containers for custom Umbraco packages or other back
 
 ## Creating a custom Section View
 
-Custom Section View extensions are straightforward to create. Extension authors register the Section View extension and
-subsequently implement the content or interface they desire to display within the Section View.
+Custom Section View extensions are straightforward to create. Extension authors register the Section View extension and subsequently implement the content or interface they desire to display within the Section View.
 
 ### Registering Section View extensions
 
@@ -32,27 +31,26 @@ Extensions authors can register the Section View extension using a JSON declarat
 {% code title="umbraco-package.json" %}
 ```json
 {
-	"type": "sectionView",
-	"alias": "My.SectionView",
-	"name": "My Section View",
-	"element": "/App_Plugins/<package_name>/my-section.element.js",
-	"meta": {
-		"label": "My View",
-		"icon": "icon-add",
-		"pathname": "my-view"
-	},
-	"conditions": [
-		{
-			"alias": "Umb.Condition.SectionAlias",
-			"match": "My.Section"
-		}
-	]
+    "type": "sectionView",
+    "alias": "My.SectionView",
+    "name": "My Section View",
+    "element": "/App_Plugins/<package_name>/my-section.element.js",
+    "meta": {
+        "label": "My View",
+        "icon": "icon-add",
+        "pathname": "my-view"
+    },
+    "conditions": [
+        {
+            "alias": "Umb.Condition.SectionAlias",
+            "match": "My.Section"
+        }
+    ]
 }
 ```
 {% endcode %}
 
-Tip: Use the absolute path, starting from the root of your Umbraco project, in the `element` property for
-JSON declarations. TypeScript declarations are capable of employing relative paths.
+Tip: Use the absolute path, starting from the root of your Umbraco project, in the `element` property for JSON declarations. TypeScript declarations are capable of employing relative paths.
 
 {% endtab %}
 
@@ -74,12 +72,12 @@ const sectionViews: Array<ManifestSectionView> = [
         meta: {
             label: "My View",
             icon: "icon-add",
-			pathname: "my-view",
+            pathname: "my-view",
         },
         conditions: [
             {
                 alias: 'Umb.Condition.SectionAlias',
-				match: 'My.Section',
+                match: 'My.Section',
             }
         ]
     }
@@ -112,11 +110,11 @@ export class MySectionViewElement extends UmbLitElement {
 
     static override readonly styles = [
         css`
-			:host {
-				display: block;
+            :host {
+                display: block;
                 padding: 20px;
-			}
-		`,
+            }
+        `,
     ];
 
 }
@@ -133,13 +131,11 @@ declare global {
 
 ## Adding Section Views to your own package
 
-When developing a Section View extension for their own package, an extension author must create a Section extension to
-host the Section View extension.
+When developing a Section View extension for their own package, an extension author must create a Section extension to host the Section View extension.
 
 Guidelines on creating Section extensions can be found at [this link](./section.md).
 
-To link a Section View with a Section, set the `match` property in the condition to the same value as the Section's `alias`. In the
-provided example, this value is `NetworkServices.Section`.
+To link a Section View with a Section, set the `match` property in the condition to the same value as the Section's `alias`. In the provided example, this value is `NetworkServices.Section`.
 
 {% code title="umbraco-package.json" %}
 ```json
@@ -178,30 +174,28 @@ provided example, this value is `NetworkServices.Section`.
 
 The Umbraco backoffice architecture places a strong emphasis on composing. Authors can extend existing sections, including core ones like Content, Media, and Settings, with Section View extensions.
 
-After an author has completed their Section View extension, they can control the placement of the extension using
-conditions in the manifest definition.
+After an author has completed their Section View extension, they can control the placement of the extension using conditions in the manifest definition.
 
-The `match` property demonstrates how an extension author can incorporate a custom Section View within the Content
-section.
+The `match` property demonstrates how an extension author can incorporate a custom Section View within the Content section.
 
 {% code title="umbraco-package.json" %}
 ```json
 {
-	"type": "sectionView",
-	"alias": "My.SectionView",
-	"name": "My Section View",
-	"element": "/App_Plugins/<package_name>/my-section.element.js",
-	"meta": {
-		"label": "My View",
-		"icon": "icon-add",
-		"pathname": "my-view"
-	},
-	"conditions": [
-		{
-			"alias": "Umb.Condition.SectionAlias",
-			"match": "Umb.Section.Content"
-		}
-	]
+    "type": "sectionView",
+    "alias": "My.SectionView",
+    "name": "My Section View",
+    "element": "/App_Plugins/<package_name>/my-section.element.js",
+    "meta": {
+        "label": "My View",
+        "icon": "icon-add",
+        "pathname": "my-view"
+    },
+    "conditions": [
+        {
+            "alias": "Umb.Condition.SectionAlias",
+            "match": "Umb.Section.Content"
+        }
+    ]
 }
 ```
 {% endcode %}

17/umbraco-cms/customizing/extending-overview/extension-types/sections/section-view.md

@@ -4,11 +4,9 @@ description: Introducing Section extensions, a home for custom content and funct
 
 # Section
 
-Umbraco extension authors can place their extension in the top-level navigation of the backoffice using Sections. The
-extension will be placed among the default options such as Content, Media, Settings, etc.
+Umbraco extension authors can place their extension in the top-level navigation of the backoffice using Sections. The extension will be placed among the default options such as Content, Media, Settings, etc.
 
-Within the section, authors can add menus, section views, workspace views, or any other content or interface they
-desire.
+Within the section, authors can add menus, section views, workspace views, or any other content or interface they desire.
 
 <figure><img src="../../../../.gitbook/assets/section.svg" alt=""><figcaption><p>Section</p></figcaption></figure>
 
@@ -34,14 +32,11 @@ Sections can be created by adding a definition in the extension's manifest file.
 
 ### **Group permissions**
 
-To enable custom sections for backoffice users, site administrators must first assign permissions to those users. This
-involves configuring the permission for a user group and assigning users to that group.
+To enable custom sections for backoffice users, site administrators must first assign permissions to those users. This involves configuring the permission for a user group and assigning users to that group.
 
-To grant access to the custom section, open the Umbraco backoffice, navigate to the **Users** section, and select the
-**User groups** menu item. Site administrators can create a new user group or modify an existing one.
+To grant access to the custom section, open the Umbraco backoffice, navigate to the **Users** section, and select the **User groups** menu item. Site administrators can create a new user group or modify an existing one.
 
-Once the user group is open, click the **Choose** button under the Sections section. Select the custom section from the
-slide-out modal to enable access.
+Once the user group is open, click the **Choose** button under the Sections section. Select the custom section from the  slide-out modal to enable access.
 
 <figure><img src="../../../../.gitbook/assets/sections-assigning.png" alt=""><figcaption><p>Enabling new Sections</p></figcaption></figure>
 
@@ -51,15 +46,11 @@ After assigning permission, users may need to reload the backoffice for the chan
 
 ### **Entry points**
 
-When creating a new section, create an [Entry Point](../backoffice-entry-point.md) extension in the
-[Umbraco Package Manifest](../../../umbraco-package.md) to complement it. Entry Point extensions add initialization and
-teardown lifecycle events that may be helpful in coordinating behavior inside the section.
+When creating a new section, create an [Entry Point](../backoffice-entry-point.md) extension in the [Umbraco Package Manifest](../../../umbraco-package.md) to complement it. Entry Point extensions add initialization and teardown lifecycle events that may be helpful in coordinating behavior inside the section.
 
 ## **Extend with Sidebar, Dashboards, and more**
 
-Sections serve as blank canvases within the Umbraco backoffice. Extension authors can integrate other Umbraco extensions
-into sections, including [custom dashboards](../../../../tutorials/creating-a-custom-dashboard/),
-[sidebars](section-sidebar.md), and [section views](section-view.md).
+Sections serve as blank canvases within the Umbraco backoffice. Extension authors can integrate other Umbraco extensions into sections, including [custom dashboards](../../../../tutorials/creating-a-custom-dashboard/), [sidebars](section-sidebar.md), and [section views](section-view.md).
 
 Section authors can also skip Umbraco backoffice components and build a fully custom view by creating an empty element.