Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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).
Expand Down Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -51,8 +50,7 @@ Extensions authors can register the Section View extension using a JSON declarat
```
{% 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 %}

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -178,11 +174,9 @@ 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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>

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

Expand All @@ -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.

Expand Down