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
@@ -1,30 +1,23 @@
---
description: A guide to creating a section
description: Introducing Section extensions, a home for custom content and functionality.
---

# Sections
# Section

{% hint style="warning" %}
This page is a work in progress and may undergo further revisions, updates, or amendments. The information contained herein is subject to change without notice.
{% endhint %}
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.

The Umbraco backoffice consists of Sections. Section is the main division shown in the top navigation.

For example, when you load the backoffice, you'll see the 'Content' section, 'Settings' section, and so on.

You can create your own sections to extend Umbraco with room for more features.
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>

## **Creating a section**

### **Manifests**

When creating a new section it's recommended to use a [Entry Point](../backoffice-entry-point.md)-extension in your [Umbraco Package Manifest](../../../umbraco-package.md). This is to get better control over all the additional extensions required for the new section.
Sections can be created by adding a definition in the extension's manifest file.

Create a section by defining a manifest for it:

```typescript
{% code title="umbraco-package.json" %}
```json
{
"type": "section",
"alias": "My.Section",
Expand All @@ -35,31 +28,33 @@ Create a section by defining a manifest for it:
}
}
```
{% endcode %}

Once registered, you will be able to select this action for your User Group Permissions. Once that is permitted, you can view your section.
### **Group permissions**

<figure><img src="../../../../.gitbook/assets/section-empty.png" alt=""><figcaption><p>Section</p></figcaption></figure>
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.

#### **Extend with Sidebar, Dashboards and more**
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 a section is registered, it can be extended like any other section.
<figure><img src="../../../../.gitbook/assets/sections-assigning.png" alt=""><figcaption><p>Enabling new Sections</p></figcaption></figure>

Here is a list of appropriate extensions to append to your section:
After assigning permission, users may need to reload the backoffice for the changes to take effect.

<figure><img src="../../../../.gitbook/assets/section-empty.png" alt=""><figcaption><p>Section</p></figcaption></figure>

* [Creating a Custom Dashboard](../../../../tutorials/creating-a-custom-dashboard/)
* [Section Sidebar](section-sidebar.md)
* [Section View](section-view.md)
## **Extend with Sidebar, Dashboards, and more**

#### **Manifest with empty element**
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).

If you prefer full control over the content of your section you can choose to define an element for the content of your section.
Section authors can also skip Umbraco backoffice components and build a fully custom view by creating an empty element.

{% hint style="warning" %}
This is not recommended as it limits the content of your section to this element. Instead, it is recommended to use a single Dashboard or Section View.
{% endhint %}
### **Manifest with empty element**

If you like to have full control, you can define an element like this:
Using a manifest with only an element is not recommended if you are shipping this as a package. This approach limits the Section to a single element. Instead, use a Dashboard or Section View for your main view, which allows additional Dashboards or Section Views to be added to the Section.

{% code title="manifests.ts" %}
```typescript
const section : UmbExtensionManifest = {
type: "section",
Expand All @@ -72,5 +67,6 @@ const section : UmbExtensionManifest = {
}
}
```
{% endcode %}

The element file must have an `element` or `default` export, or specify the element name in the `elementName` field.
The element file must contain an `element`, a `default` export, or specify the element name in the `elementName` field.
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,6 @@ After assigning permission, users may need to reload the backoffice for the chan

<figure><img src="../../../../.gitbook/assets/section-empty.png" alt=""><figcaption><p>Section</p></figcaption></figure>

### **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.

## **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).
Expand All @@ -56,9 +52,7 @@ Section authors can also skip Umbraco backoffice components and build a fully cu

### **Manifest with empty element**

{% hint style="warning" %}
This approach is not recommended because it restricts content to a single element. Instead, use a Dashboard or Section View.
{% endhint %}
Using a manifest with only an element is not recommended if you are shipping this as a package. This approach limits the Section to a single element. Instead, use a Dashboard or Section View for your main view, which allows additional Dashboards or Section Views to be added to the Section.

{% code title="manifests.ts" %}
```typescript
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,18 +36,14 @@ To enable custom sections for backoffice users, site administrators must first a

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>

After assigning permission, users may need to reload the backoffice for the changes to take effect.

<figure><img src="../../../../.gitbook/assets/section-empty.png" alt=""><figcaption><p>Section</p></figcaption></figure>

### **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.

## **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).
Expand All @@ -56,9 +52,7 @@ Section authors can also skip Umbraco backoffice components and build a fully cu

### **Manifest with empty element**

{% hint style="warning" %}
This approach is not recommended because it restricts content to a single element. Instead, use a Dashboard or Section View.
{% endhint %}
Using a manifest with only an element is not recommended if you are shipping this as a package. This approach limits the Section to a single element. Instead, use a Dashboard or Section View for your main view, which allows additional Dashboards or Section Views to be added to the Section.

{% code title="manifests.ts" %}
```typescript
Expand All @@ -75,5 +69,4 @@ const section : UmbExtensionManifest = {
```
{% endcode %}

The element file must contain an `element`, a `default` export, or specify the element name in the
`elementName` field.
The element file must contain an `element`, a `default` export, or specify the element name in the `elementName` field.