Skip to content

Commit d179f6c

Browse files
eshanrnheshanrnh
committed
Updated format
1 parent 1681774 commit d179f6c

File tree

3 files changed

+98
-81
lines changed

3 files changed

+98
-81
lines changed

‎15/umbraco-ui-builder/areas/overview.md‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
---
2-
description: Choosing an area to connect Umbraco UI Builder, the backoffice UI builder for Umbraco.
2+
description: Learn how to choose and configure the appropriate area for connecting Umbraco UI builder for Umbraco.
33
---
44

55
# Areas
66

7-
There are different areas of the Umbraco UI that Umbraco UI Builder can be injected into. Before you get to managing your actual content you need to choose which area makes the most sense to present that data in. Then you can review how to go about configuring that particular type of area.
7+
Umbraco UI Builder can be integrated into different areas of the Umbraco Backoffice. Before you start managing content, it is essential to decide which area best suits the presentation of your data. Each area offers unique features for displaying and interacting with content.
88

9-
Choose an area type from the list below to find out more.
9+
Once you have identified the most appropriate area, you can proceed with configuring it to suit your needs.
1010

11-
{% content-ref url="sections.md" %}
12-
[sections.md](sections.md)
13-
{% endcontent-ref %}
14-
{% content-ref url="dashboards.md" %}
15-
[dashboards.md](dashboards.md)
16-
{% endcontent-ref %}
17-
{% content-ref url="context-apps.md" %}
18-
[context-apps.md](context-apps.md)
19-
{% endcontent-ref %}
11+
## Key Areas for Integration
12+
13+
- [Sections](sections.md): The Sections area allows you to organize your content in a structured layout, enabling users to navigate different parts of the backoffice.
14+
- [Dashboards](dashboards.md): The Dashboards area is ideal for creating custom views that provide quick access to key information and statistics.
15+
- [Workspace Views](context-apps.md): Workspace Views provide contextual tools and information based on the specific content a user is working with.
16+
17+
Selecting the correct area is essential to ensure your UI is both functional and user-friendly. Consider the nature of your content and the tasks users need to perform when deciding which area to use.

‎15/umbraco-ui-builder/areas/sections.md‎

Lines changed: 78 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,203 +1,221 @@
11
---
2-
description: Configuring sections in Umbraco UI Builder, the backoffice UI builder for Umbraco.
2+
description: Configuring and customizing sections in Umbraco UI Builder to organize and manage the backoffice interface effectively.
33
---
44

55
# Sections
66

7-
A section is a distinct area of the Umbraco backoffice, such as content, media, etc. The section is accessed via a link in the main menu at the top of the Umbraco interface. Umbraco UI Builder allows you to define multiple sections in order to organise the management of your models into logical sections.
7+
A section in Umbraco represents a distinct area within the backoffice, such as content, media, and so on. Sections are accessible via links in the main menu at the top of the Umbraco interface. Using Umbraco UI Builder, multiple sections can be defined to organize the management of models logically.
88

99
![Sections](../images/sections.png)
1010

11-
## Defining a section
11+
## Defining a Section
1212

13-
You can define a section by calling one of the `AddSection` methods on the root level `UIBuilderConfigBuilder` instance.
13+
Sections are defined using the `AddSection` method on the root-level `UIBuilderConfigBuilder` instance.
1414

15-
### **AddSection(string name, Lambda sectionConfig = null) : SectionConfigBuilder**
15+
### Example: Using the `AddSection()` Method
1616

17-
Adds a section to the Umbraco menu with the given name.
17+
This method adds a new section to the Umbraco menu with the specified name, allowing custom areas for organizing content in the backoffice.
1818

1919
```csharp
20-
// Example
2120
config.AddSection("Repositories", sectionConfig => {
2221
...
2322
});
2423
```
2524

26-
### **AddSectionBefore(string beforeAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder**
25+
**Code Reference:** `AddSection(string name, Lambda sectionConfig = null) : SectionConfigBuilder`
2726

28-
Adds a section to the Umbraco menu with the given name **before** the section with the given alias.
27+
### Example: Using the `AddSectionBefore()` Method
28+
29+
This method adds a section before another section with the specified alias, allowing for customized ordering of sections in the backoffice.
2930

3031
```csharp
31-
// Example
3232
config.AddSectionBefore("settings", "Repositories", sectionConfig => {
3333
...
3434
});
3535
```
3636

37-
### **AddSectionAfter(string afterAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder**
37+
**Code Reference:** `AddSectionBefore(string beforeAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder`
38+
39+
### Example: Using the `AddSectionAfter()` Method
3840

39-
Adds a section to the Umbraco menu with the given name **after** the section with the given alias.
41+
This method adds a section after another section with the specified alias, allowing for a custom order of sections in the backoffice.
4042

4143
```csharp
42-
// Example
4344
config.AddSectionAfter("media", "Repositories", sectionConfig => {
4445
...
4546
});
4647
```
4748

48-
## Changing a section alias
49+
**Code Reference:** `AddSectionAfter(string afterAlias, string name, Lambda sectionConfig = null) : SectionConfigBuilder`
50+
51+
## Customizing the Section Alias
4952

50-
### **SetAlias(string alias) : SectionConfigBuilder**
53+
### Example: Setting a Custom Alias with `SetAlias()`
5154

52-
Sets the alias of the section.
55+
This method sets a custom alias for the section.
5356

54-
**Optional:** When adding a new section, an alias is automatically generated from the supplied name for you. However, if you need a specific alias you can use the `SetAlias` method to override this.
57+
*Optional:* By default, an alias is automatically generated from the section's name. To customize the alias, the `SetAlias()` method can be used.
5558

5659
```csharp
57-
// Example
5860
sectionConfig.SetAlias("repositories");
5961
```
6062

61-
## Configuring the section tree
63+
**Code Reference:** `SetAlias(string alias) : SectionConfigBuilder`
6264

63-
### **Tree(Lambda treeConfig = null) : TreeConfigBuilder**
65+
## Configuring the Section Tree
6466

65-
Accesses the tree config of the current section. For more information check the [Trees documentation](trees.md).
67+
### Example: Using the `Tree()` Method for Configuration
68+
69+
This method configures the tree structure for the section, which is used to organize content types. For more information, see the [Trees](trees.md) article.
6670

6771
````csharp
68-
// Example
6972
sectionConfig.Tree(treeConfig => {
7073
...
7174
});
7275
````
7376

74-
## Adding a dashboard to the section
77+
**Code Reference:** `Tree(Lambda treeConfig = null) : TreeConfigBuilder`
78+
79+
## Adding Dashboards to the Section
7580

76-
### **AddDashboard(string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
81+
### Example: Adding a Dashboard with `AddDashboard()`
7782

78-
Adds a dashboard with the given name. For more information check the [Dashboards documentation](dashboards.md).
83+
This method adds a dashboard to the section with the specified alias, providing tools and features for content management. For more information, see the [Dashboards](dashboards.md) article.
7984

8085
```csharp
81-
// Example
8286
sectionConfig.AddDashboard("Team", dashboardConfig => {
8387
...
8488
});
8589
```
8690

87-
#### **AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
91+
**Code Reference:** AddDashboard(string name, Lambda dashboardConfig = null) : DashboardConfigBuilder
8892

89-
Adds a dashboard with the given name **before** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
93+
### Example: Using `AddDashboardBefore()` to Place a Dashboard
94+
95+
This method adds a dashboard before another dashboard with the specified alias, allowing custom placement in the section. For more information, see the [Dashboards](dashboards.md) article.
9096

9197
```csharp
92-
// Example
9398
sectionConfig.AddDashboardBefore("contentIntro", "Team", dashboardConfig => {
9499
...
95100
});
96101
```
97102

98-
#### **AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
103+
**Code Reference:** `AddDashboardBefore(string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
104+
105+
### Example: Using `AddDashboardAfter()` to Place a Dashboard
99106

100-
Adds a dashboard with the given name **after** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
107+
This method adds a dashboard after another dashboard with the specified alias, giving control over dashboard order. For more information, see the [Dashboards](dashboards.md) article.
101108

102109
```csharp
103-
// Example
104110
sectionConfig.AddDashboardAfter("contentIntro", "Team", dashboardConfig => {
105111
...
106112
});
107113
```
108114

109-
## Extending an existing section
115+
**Code Reference:** `AddDashboardAfter(string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
110116

111-
You can extend existing sections by adding Umbraco UI Builder trees and dashboards, context apps, and virtual subtrees. This can be done by calling the `WithSection` method on the root level `UIBuilderConfigBuilder` instance.
117+
## Extending Existing Sections
112118

113-
### **WithSection(string alias, Lambda sectionConfig = null) : WithSectionConfigBuilder**
119+
You can extend existing sections by adding Umbraco UI Builder trees and dashboards, context apps, and virtual subtrees. This can be done by calling the `WithSection` method on the root-level `UIBuilderConfigBuilder` instance.
114120

115-
Starts a sub-configuration for the existing Umbraco section with the given alias.
121+
### Example: Extending an Existing Section with `WithSection()`
122+
123+
This method extends an existing section with additional configuration, enabling more customization for existing areas.
116124

117125
```csharp
118-
// Example
119126
config.WithSection("member", withSectionConfig => {
120127
...
121128
});
122129
```
123130

124-
## Adding a tree to an existing section
131+
**Code Reference:** `WithSection(string alias, Lambda sectionConfig = null) : WithSectionConfigBuilder`
132+
133+
## Adding Trees to an Existing Section
125134

126-
### **AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
135+
### Example: Using the `AddTree()` Method
127136

128-
Adds a tree to the current section. For more information check the [Trees documentation](trees.md).
137+
This method adds a tree to the section, helping to visualize and organize content types. For more information, see the [Trees](trees.md) article.
129138

130139
````csharp
131-
// Example
132140
withSectionConfig.AddTree("My Tree", "icon-folder", treeConfig => {
133141
...
134142
});
135143
````
136144

137-
#### **AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
145+
**Code Reference:** `AddTree(string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
138146

139-
Adds a tree to the current section in a group with the given name. For more information check the [Trees documentation](trees.md).
147+
### Example: Grouping Trees with `AddTree()` Method
148+
149+
This method adds a tree within a specified group, improving content organization by grouping related trees together. For more information, see the [Trees](trees.md) article.
140150

141151
````csharp
142-
// Example
143152
withSectionConfig.AddTree("My Group", "My Tree", "icon-folder", treeConfig => {
144153
...
145154
});
146155
````
147156

148-
#### **AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
157+
**Code Reference:** `AddTree(string groupName, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
158+
159+
## Adding a Tree Before or After an Existing Tree
149160

150-
Adds a tree to the current section **before** the tree with the given alias. For more information check the [Trees documentation](trees.md).
161+
### Example: Using `AddTreeBefore()` to Position a Tree
162+
163+
This method adds a tree before another tree within the section, allowing you to customize the tree order. For more information, see the [Trees](trees.md) article.
151164

152165
````csharp
153-
// Example
154166
withSectionConfig.AddTreeBefore("member", "My Tree", "icon-folder", treeConfig => {
155167
...
156168
});
157169
````
158170

159-
#### **AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder**
171+
**Code Reference:** `AddTreeBefore(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
172+
173+
### Example: Using `AddTreeAfter()` to Position a Tree
160174

161-
Adds a tree to the current section **after** the tree with the given alias. For more information check the [Trees documentation](trees.md).
175+
This method adds a tree after another tree within the section, enabling specific ordering of trees. For more information, see the [Trees](trees.md) article.
162176

163177
````csharp
164-
// Example
165178
withSectionConfig.AddTreeAfter("member", "My Tree", "icon-folder", treeConfig => {
166179
...
167180
});
168181
````
169182

170-
## Adding a dashboard to an existing section
183+
**Code Reference:** `AddTreeAfter(string treeAlias, string name, string icon, Lambda treeConfig = null) : TreeConfigBuilder`
171184

172-
### **AddDashboard (string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
185+
## Adding a Dashboard to an Existing Section
173186

174-
Adds a dashboard with the given name. For more information check the [Dashboards documentation](dashboards.md).
187+
### Example: Using the `AddDashboard()` Method
188+
189+
This method adds a new dashboard to the section with the specified name. For more information, see the [Dashboards](dashboards.md) article.
175190

176191
```csharp
177-
// Example
178192
withSectionConfig.AddDashboard("Team", dashboardConfig => {
179193
...
180194
});
181195
```
182196

183-
### **AddDashboardBefore (string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
197+
**Code Reference:** `AddDashboard (string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
198+
199+
### Example: Using the `AddDashboardBefore()` Method
184200

185-
Adds a dashboard with the given name **before** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
201+
This method adds a dashboard before the dashboard with the specified alias. For more information, see the [Dashboards](dashboards.md) article.
186202

187203
```csharp
188-
// Example
189204
withSectionConfig.AddDashboardBefore("contentIntro", "Team", dashboardConfig => {
190205
...
191206
});
192207
```
193208

194-
### **AddDashboardAfter (string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder**
209+
**Code Reference:** `AddDashboardBefore (string beforeAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`
195210

196-
Adds a dashboard with the given name **after** the dashboard with the given alias. For more information check the [Dashboards documentation](dashboards.md).
211+
### Example: Using the `AddDashboardAfter()` Method
212+
213+
This method adds a dashboard after the dashboard with the specified alias. For more information, see the [Dashboards](dashboards.md) article.
197214

198215
```csharp
199-
// Example
200216
withSectionConfig.AddDashboardAfter("contentIntro", "Team", dashboardConfig => {
201217
...
202218
});
203219
```
220+
221+
**Code Reference:** `AddDashboardAfter (string afterAlias, string name, Lambda dashboardConfig = null) : DashboardConfigBuilder`

‎15/umbraco-ui-builder/areas/summary-dashboards.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
---
2-
description: Configuring a summary dashboard in Umbraco UI Builder, the backoffice UI builder for Umbraco.
2+
description: Configuring a summary dashboard to provide an overview of collections within a section.
33
---
44

55
# Summary Dashboards
66

7-
A summary dashboard is automatically displayed at the root of a defined Umbraco UI Builder section. It displays summaries of collections found within it that are told to display on the dashboard. It also provides quick links to jump to that collections list view. It can also add quickly a new entry to that collection (if the collection isn't read-only).
7+
A summary dashboard appears automatically at the root of an Umbraco UI Builder section. It provides an overview of key collections within that section, enabling quick access to list views. Additionally, it allows for adding new entries to the collection, provided the collection is not set to read-only.
88

9-
![Summary Dashboard](../images/dashboard.png)
9+
By summarizing important data and simplifying navigation, the summary dashboard improves content management efficiency.
1010

11-
## Showing a collection on a summary dashboard
11+
![Summary Dashboard](../images/dashboard.png)
1212

13-
Showing a collection in the summary dashboard is controlled via the collection configuration.
13+
## Displaying a Collection on the Summary Dashboard
1414

15-
### **ShowOnSummaryDashboard() : CollectionConfigBuilder<TEntityType>**
15+
To display a collection on the summary dashboard, use the `ShowOnSummaryDashboard()` method in the collection configuration.
1616

17-
Sets the collection to display on the summary dashboard.
17+
### Configuration Example
1818

1919
````csharp
20-
// Example
2120
collectionConfig.ShowOnSummaryDashboard();
2221
````
2322

23+
**Code Reference:** `ShowOnSummaryDashboard() : CollectionConfigBuilder<TEntityType>`
24+
2425
{% hint style="warning" %}
25-
Only section root level collections can be shown on the summary dashboard.
26+
Only root-level collections within a section can be displayed on the summary dashboard.
2627
{% endhint %}

0 commit comments

Comments
 (0)