Skip to content

Commit a783a3a

Browse files
authored
Merge pull request #7640 from umbraco/section-update
Fixes Issue #7631
2 parents 7d79f19 + bfe9dad commit a783a3a

File tree

3 files changed

+29
-46
lines changed
  • 15/umbraco-cms/customizing/extending-overview/extension-types/sections
  • 16/umbraco-cms/customizing/extending-overview/extension-types/sections
  • 17/umbraco-cms/customizing/extending-overview/extension-types/sections

3 files changed

+29
-46
lines changed
Lines changed: 25 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,23 @@
11
---
2-
description: A guide to creating a section
2+
description: Introducing Section extensions, a home for custom content and functionality.
33
---
44

5-
# Sections
5+
# Section
66

7-
{% hint style="warning" %}
8-
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.
9-
{% endhint %}
7+
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.
108

11-
The Umbraco backoffice consists of Sections. Section is the main division shown in the top navigation.
12-
13-
For example, when you load the backoffice, you'll see the 'Content' section, 'Settings' section, and so on.
14-
15-
You can create your own sections to extend Umbraco with room for more features.
9+
Within the section, authors can add menus, section views, workspace views, or any other content or interface they desire.
1610

1711
<figure><img src="../../../../.gitbook/assets/section.svg" alt=""><figcaption><p>Section</p></figcaption></figure>
1812

1913
## **Creating a section**
2014

2115
### **Manifests**
2216

23-
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.
17+
Sections can be created by adding a definition in the extension's manifest file.
2418

25-
Create a section by defining a manifest for it:
26-
27-
```typescript
19+
{% code title="umbraco-package.json" %}
20+
```json
2821
{
2922
"type": "section",
3023
"alias": "My.Section",
@@ -35,31 +28,33 @@ Create a section by defining a manifest for it:
3528
}
3629
}
3730
```
31+
{% endcode %}
3832

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

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

43-
#### **Extend with Sidebar, Dashboards and more**
39+
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.
4440

45-
Once a section is registered, it can be extended like any other section.
41+
<figure><img src="../../../../.gitbook/assets/sections-assigning.png" alt=""><figcaption><p>Enabling new Sections</p></figcaption></figure>
4642

47-
Here is a list of appropriate extensions to append to your section:
43+
After assigning permission, users may need to reload the backoffice for the changes to take effect.
44+
45+
<figure><img src="../../../../.gitbook/assets/section-empty.png" alt=""><figcaption><p>Section</p></figcaption></figure>
4846

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

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

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

57-
{% hint style="warning" %}
58-
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.
59-
{% endhint %}
53+
### **Manifest with empty element**
6054

61-
If you like to have full control, you can define an element like this:
55+
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.
6256

57+
{% code title="manifests.ts" %}
6358
```typescript
6459
const section : UmbExtensionManifest = {
6560
type: "section",
@@ -72,5 +67,6 @@ const section : UmbExtensionManifest = {
7267
}
7368
}
7469
```
70+
{% endcode %}
7571

76-
The element file must have an `element` or `default` export, or specify the element name in the `elementName` field.
72+
The element file must contain an `element`, a `default` export, or specify the element name in the `elementName` field.

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

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -44,10 +44,6 @@ After assigning permission, users may need to reload the backoffice for the chan
4444

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

47-
### **Entry points**
48-
49-
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.
50-
5147
## **Extend with Sidebar, Dashboards, and more**
5248

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

5753
### **Manifest with empty element**
5854

59-
{% hint style="warning" %}
60-
This approach is not recommended because it restricts content to a single element. Instead, use a Dashboard or Section View.
61-
{% endhint %}
55+
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.
6256

6357
{% code title="manifests.ts" %}
6458
```typescript

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

Lines changed: 3 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,18 +36,14 @@ To enable custom sections for backoffice users, site administrators must first a
3636

3737
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.
3838

39-
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.
39+
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.
4040

4141
<figure><img src="../../../../.gitbook/assets/sections-assigning.png" alt=""><figcaption><p>Enabling new Sections</p></figcaption></figure>
4242

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

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

47-
### **Entry points**
48-
49-
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.
50-
5147
## **Extend with Sidebar, Dashboards, and more**
5248

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

5753
### **Manifest with empty element**
5854

59-
{% hint style="warning" %}
60-
This approach is not recommended because it restricts content to a single element. Instead, use a Dashboard or Section View.
61-
{% endhint %}
55+
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.
6256

6357
{% code title="manifests.ts" %}
6458
```typescript
@@ -75,5 +69,4 @@ const section : UmbExtensionManifest = {
7569
```
7670
{% endcode %}
7771

78-
The element file must contain an `element`, a `default` export, or specify the element name in the
79-
`elementName` field.
72+
The element file must contain an `element`, a `default` export, or specify the element name in the `elementName` field.

0 commit comments

Comments
 (0)