Skip to content
Merged
Show file tree
Hide file tree
Changes from 4 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
4 changes: 2 additions & 2 deletions 15/umbraco-ui-builder/areas/context-apps.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ description: Configuring context apps in Umbraco UI Builder.

# Context Apps

Context Apps in Umbraco UI Builder function similarly to Content Apps. They provide contextual applications within the content editor UI. By defining context apps, you can expose collections that are directly related to the content in question. For example, blog post comments can be linked to their respective blog posts and managed in context through a content app.
Context Apps in Umbraco UI Builder function similarly to Workspace Views (previously called as Content Apps). They provide contextual applications within the content editor UI. By defining context apps, you can expose collections that are directly related to the content in question. For example, blog post comments can be linked to their respective blog posts and managed in context through a Workspace View.

![Context App](../images/context_app.png)

Expand Down Expand Up @@ -159,7 +159,7 @@ contextAppConfig.SetIconColor("blue");

## Changing Context App Visibility

Context app visibility is controlled by a delegate that takes a `ContextAppVisibilityContext` instance. This method contains a `Source` property which holds a reference to the source object that the content app is being displayed on (i.e., an `IContent` instance). It also holds a reference to a `UserGroups` collection of the currently logged-in user's user groups. You can use these values to determine when the context app should be displayed.
Context app visibility is controlled by a delegate that takes a `ContextAppVisibilityContext` instance. This method contains a `Source` property which holds a reference to the source object that the Workspace View is being displayed on (i.e., an `IContent` instance). It also holds a reference to a `UserGroups` collection of the currently logged-in user's user groups. You can use these values to determine when the context app should be displayed.

By default, context apps are pre-filtered to only appear on the tree they are defined in. This default behavior is combined with the SetVisibility configuration to control visibility.

Expand Down
2 changes: 1 addition & 1 deletion 15/umbraco-ui-builder/getting-started/user-interface.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ The editor is where the main content editing occurs. It is structured using tabs

## Workspace Views

Workspace Views are additional functionality that can be added to an editor. They provide extra features based on the content of the item being edited. For instance, a media content app might allow you to resize or crop an image directly from the editor.
Workspace Views are additional functionality that can be added to an editor. They provide extra features based on the content of the item being edited. For instance, a media Workspace View might allow you to resize or crop an image directly from the editor.

![Workspace Views](images/workspace-views.png)

Expand Down
29 changes: 18 additions & 11 deletions 15/umbraco-ui-builder/miscellaneous/conventions.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,32 @@
---
description: Conventions used by Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Guidelines for fluent configuration and naming conventions in Umbraco UI Builder.
---

# Conventions

## Fluent Conventions

Most configuration methods in Umbraco UI Builder aim to be fluent. This means that they return a relevant config instance allowing to chain multiple methods calls together in one. For those who prefer to be a bit more verbose, many methods also accept an optional lambda expression. This allows you to pass in a delegate to perform the inner configuration of the element being defined.
Umbraco UI Builder follows a fluent configuration style, allowing method chaining for concise and readable code. Alternatively, a lambda expression can be used for a more structured approach.

### Chaining Example

```csharp
config.AddSection("Repositories")
.Tree()
.AddCollection<People>(p => p.Id, "Person", "People");
```

### Lambda Expression Example Example

```csharp
// Chaining example
config.AddSection("Repositories").Tree().AddCollection<People>(p => p.Id, "Person", "People");

// Delegate example
config.AddSection("Repositories", sectionConfig => {
sectionConfig.Tree(treeConfig => {
treeConfig.AddCollection<People>(p => p.Id, "Person", "People");
});
config.AddSection("Repositories", sectionConfig => {
sectionConfig.Tree(treeConfig => {
treeConfig.AddCollection<People>(p => p.Id, "Person", "People");
});
});
```

## Naming Conventions

Throughout the API, where a method name starts with **Add** then multiple configurations can be declared. Whereas if a method name starts with **Set** then only one instance of the configuration can be declared within the current configuration context.
* Methods prefixed with **Add** allow multiple configurations.
* Methods prefixed with **Set** permit only one instance within the current configuration context.
28 changes: 14 additions & 14 deletions 15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
---
description: A list of useful Umbraco aliases for use with Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Common Umbraco aliases used in Umbraco UI Builder for Sections, Dashboards, Workspace Views, and Trees.
---

# Umbraco Aliases

In a number of places in the Umbraco UI Builder API, you are required to know the aliases of other elements. For example, when you are adding sections, context apps, or dashboards before/after other instances. This is basic enough when it's referencing aliases of things defined in the Umbraco UI Builder config. However, for existing Umbraco instances it can be hard to find them so below is documented a number of known aliases for different elements.
Umbraco UI Builder requires aliases for various elements, such as sections, context apps, and dashboards. While aliases for elements defined in the UI Builder config are straightforward, finding aliases for existing Umbraco instances can be challenging. Below is a list of known aliases for reference.

Check warning on line 7 in 15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [UmbracoDocs.Editorializing] Consider removing 'various' Raw Output: {"message": "[UmbracoDocs.Editorializing] Consider removing 'various'", "location": {"path": "15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md", "range": {"start": {"line": 7, "column": 41}}}, "severity": "WARNING"}

## Dashboard aliases
## Dashboard Aliases

### **Content**
### Content

| Name | Alias |
| -- | -- |
| Getting Started | `contentIntro` |
| Redirect URL Management | `contentRedirectManager` |

### **Media**
### Media

| Name | Alias |
| -- | -- |
| Content | `mediaFolderBrowser` |

### **Settings**
### Settings

| Name | Alias |
| -- | -- |
Expand All @@ -31,36 +31,36 @@
| Models Builder | `settingsModelsBuilder` |
| Health Check | `settingsHealthCheck` |

### **Members**
### Members

| Name | Alias |
| -- | -- |
| Getting Started | `memberIntro` |

## Content App aliases
## Workspace Views Aliases

### **Content**
### Content

| Name | Alias |
| -- | -- |
| Content | `umbContent` |
| Info | `umbInfo` |

### **Media**
### Media

| Name | Alias |
| -- | -- |
| Content | `umbContent` |
| Info | `umbInfo` |

### **Members**
### Members

| Name | Alias |
| -- | -- |
| Content | `umbContent` |
| Info | `umbInfo` |

### **ContentTypes**
### ContentTypes

| Name | Alias |
| -- | -- |
Expand All @@ -69,7 +69,7 @@
| Permissions | `permissions` |
| Templates | `templates` |

## Section aliases
## Section Aliases

| Name | Alias |
| -- | -- |
Expand All @@ -82,7 +82,7 @@
| Forms | `forms` |
| Translation | `translation` |

## Tree aliases
## Tree Aliases

| Name | Alias |
| -- | -- |
Expand Down
46 changes: 28 additions & 18 deletions 15/umbraco-ui-builder/property-editors/entity-picker.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,54 @@
---
description: Using the entity picker property editor with Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Configure and use the Entity Picker property editor in Umbraco UI Builder to select entities from a collection.
---

# Entity Picker

The Entity Picker property editor is an Umbraco property editor that lets you select one or more entities from an Umbraco UI Builder collection.
The Entity Picker property editor allows selecting one or more entities from an Umbraco UI Builder collection.

## Configuring an entity picker
## Configuring an Entity Picker

To configure an entity picker you need to create a Data Type in the Umbraco backoffice. From the property editor dropdown choose 'Umbraco UI Builder Entity Picker'.
To configure an entity picker, follow these steps:

![Data Type config](../images/entity_picker_config.png)
1. Go to the **Settings** section in the Umbraco backoffice.
2. Create a **New Data Type**.
3. Select **UI Builder Entity Picker** from the **Property Editor** field.

From there choose 'Section' and 'Collection' you wish to pick entities from. You can also choose an optional list view 'Data View' if there are any configured.
![Data Type config](../images/entity_picker_config.png)

You can also set a minimum and maximum number of items to be able to pick if required.
4. Enter a **Name** for the picker and click **Save**.
5. Select the **Section** the collection is located in.
6. Select the **Collection** to pick the entities from.
7. *[Optional]* Select a list view **Data View**, if configured.
8. Enter a **Minimum number of items** and **Maximum number of items** that can be selected.
9. Click **Save**.

With an entity picker Data Type defined, finish off the configuration by adding it to the desired Document Type definition.
After defining the entity picker Data Type, add it to the desired Document Type.

![Document Type config](../images/entity_picker_setup.png)

## Using an entity picker
## Using an Entity Picker

Using the entity picker should be pretty familiar as it aims to mimic the content picker as closely as possible.
The entity picker functions similarly to the content picker.

To pick an entity click the 'Add' link to launch the picker dialog. The dialog should present a paginated list of entities to pick from. If any searchable fields were configured for the entity type, you can perform a search by typing a search term in the search input field.
To pick an entity, follow these steps:

![Entity picker dialog](../images/entity_picker_search.png)
1. Go to the Document Type where the entity picker Data Type is added.
2. Click **Add** to open the picker dialog, displaying a paginated list of entities.
3. *[Optional]* If searchable fields are configured, use the search input field to filter results.

To pick your items click on the entity names and then click 'Select' in the bottom right-hand corner.
![Entity picker dialog](../images/entity_picker_search.png)

The picker should display a summary of the selected entities which can be sorted by dragging the selected entities into the desired order.
4. Click on the entity names.
5. Click **Submit**.
The picker displays a summary of selected entities, which can be reordered by dragging them.
6. Click **Save** or **Save and publish** to save the changes.

![Entity picker values](../images/entity_picker_picked.png)

To save the value either **save** or **save and publish** the current document.
## Retrieving the Value of an Entity Picker

## Getting the value of an entity picker

The entity picker property editor comes with a built-in [value converter](https://docs.umbraco.com/umbraco-cms/extending/property-editors/property-value-converters/). This means that whenever you retrieve the property value from Umbraco it will return the actual selected entities, even converting them to the relevant type.
The entity picker property editor includes a built-in [value converter](https://docs.umbraco.com/umbraco-cms/customizing/property-editors/property-value-converters). Retrieving the property value from Umbraco returns the selected entities, converting them to the relevant type.

````csharp
// Example
Expand Down
6 changes: 3 additions & 3 deletions 15/umbraco-ui-builder/property-editors/overview.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
---
description: Property Editors available with Umbraco UI Builder, the backoffice UI builder for Umbraco.
description: Available property editors in Umbraco UI Builder for managing data in Umbraco content nodes.
---

# Property Editors

As well as the API for managing your custom data source, Umbraco UI Builder also comes with some property editors. Those property editors help you work with your data inside Umbraco content nodes.
Umbraco UI Builder provides property editors for managing data inside Umbraco content nodes.

The property editors available are:
The available property editors are:

{% content-ref url="entity-picker.md" %}
[Entity Picker](entity-picker.md)
Expand Down
Loading