From c9eb719cfa0387bc88f9c4d2103b9dc72c425126 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 1 Apr 2025 09:47:42 +0200 Subject: [PATCH 1/5] Updated articles --- .../property-editors/entity-picker.md | 45 +++++++++++-------- .../property-editors/overview.md | 6 +-- 2 files changed, 30 insertions(+), 21 deletions(-) diff --git a/15/umbraco-ui-builder/property-editors/entity-picker.md b/15/umbraco-ui-builder/property-editors/entity-picker.md index 16e23ab2f5f..a78b7855793 100644 --- a/15/umbraco-ui-builder/property-editors/entity-picker.md +++ b/15/umbraco-ui-builder/property-editors/entity-picker.md @@ -1,44 +1,53 @@ --- -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 **Select a 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 a **Section** and **Collection** to pick entities from. +6. Optionally, select a list view 'Data View' if configured. +7. Enter a minimum and maximum number of items that can be selected if required. +8. 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 definition. ![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/extending/property-editors/property-value-converters/). Retrieving the property value from Umbraco returns the selected entities, converting them to the relevant type. ````csharp // Example diff --git a/15/umbraco-ui-builder/property-editors/overview.md b/15/umbraco-ui-builder/property-editors/overview.md index 59f17f6be6b..d1611bfec45 100644 --- a/15/umbraco-ui-builder/property-editors/overview.md +++ b/15/umbraco-ui-builder/property-editors/overview.md @@ -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) From 95d953cc70fea157609c1e44490ae68527787555 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 1 Apr 2025 09:56:03 +0200 Subject: [PATCH 2/5] Some more fixes --- .../property-editors/entity-picker.md | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/15/umbraco-ui-builder/property-editors/entity-picker.md b/15/umbraco-ui-builder/property-editors/entity-picker.md index a78b7855793..694803ecc90 100644 --- a/15/umbraco-ui-builder/property-editors/entity-picker.md +++ b/15/umbraco-ui-builder/property-editors/entity-picker.md @@ -12,17 +12,18 @@ To configure an entity picker, follow these steps: 1. Go to the **Settings** section in the Umbraco backoffice. 2. Create a **New Data Type**. -3. Select **UI Builder Entity Picker** from **Select a Property Editor** field. +3. Select **UI Builder Entity Picker** from the **Property Editor** field. ![Data Type config](../images/entity_picker_config.png) 4. Enter a **Name** for the picker and click **Save**. -5. Select a **Section** and **Collection** to pick entities from. -6. Optionally, select a list view 'Data View' if configured. -7. Enter a minimum and maximum number of items that can be selected if required. -8. 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**. -After defining the entity picker Data Type, add 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) @@ -47,7 +48,7 @@ To pick an entity, follow these steps: ## Retrieving the Value of an Entity Picker -The entity picker property editor includes a built-in [value converter](https://docs.umbraco.com/umbraco-cms/extending/property-editors/property-value-converters/). Retrieving the property value from Umbraco returns the selected entities, 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 From cbbb58ddc8812ce177599d2240553ea6ffa9b804 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 1 Apr 2025 10:33:19 +0200 Subject: [PATCH 3/5] changed content app to workspace views --- 15/umbraco-ui-builder/areas/context-apps.md | 4 ++-- 15/umbraco-ui-builder/getting-started/user-interface.md | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/15/umbraco-ui-builder/areas/context-apps.md b/15/umbraco-ui-builder/areas/context-apps.md index 7bcbbdd209d..75ff3602cd6 100644 --- a/15/umbraco-ui-builder/areas/context-apps.md +++ b/15/umbraco-ui-builder/areas/context-apps.md @@ -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) @@ -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. diff --git a/15/umbraco-ui-builder/getting-started/user-interface.md b/15/umbraco-ui-builder/getting-started/user-interface.md index 73802d8516b..c056435abaf 100644 --- a/15/umbraco-ui-builder/getting-started/user-interface.md +++ b/15/umbraco-ui-builder/getting-started/user-interface.md @@ -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) From e5f5e376a390b7c2d0fb534cf8f3233bc03b0fae Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 1 Apr 2025 10:33:27 +0200 Subject: [PATCH 4/5] Updated articles --- .../miscellaneous/conventions.md | 29 ++++++++++++------- .../miscellaneous/umbraco-aliases.md | 28 +++++++++--------- 2 files changed, 32 insertions(+), 25 deletions(-) diff --git a/15/umbraco-ui-builder/miscellaneous/conventions.md b/15/umbraco-ui-builder/miscellaneous/conventions.md index 3715219a956..c1302190fae 100644 --- a/15/umbraco-ui-builder/miscellaneous/conventions.md +++ b/15/umbraco-ui-builder/miscellaneous/conventions.md @@ -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(p => p.Id, "Person", "People"); +``` + +### Lambda Expression Example Example ```csharp -// Chaining example -config.AddSection("Repositories").Tree().AddCollection(p => p.Id, "Person", "People"); - -// Delegate example -config.AddSection("Repositories", sectionConfig => { - sectionConfig.Tree(treeConfig => { - treeConfig.AddCollection(p => p.Id, "Person", "People"); - }); +config.AddSection("Repositories", sectionConfig => { + sectionConfig.Tree(treeConfig => { + treeConfig.AddCollection(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. diff --git a/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md b/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md index a8a49526190..8cafe16ef33 100644 --- a/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md +++ b/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md @@ -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. -## 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 | | -- | -- | @@ -31,36 +31,36 @@ In a number of places in the Umbraco UI Builder API, you are required to know th | 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 | | -- | -- | @@ -69,7 +69,7 @@ In a number of places in the Umbraco UI Builder API, you are required to know th | Permissions | `permissions` | | Templates | `templates` | -## Section aliases +## Section Aliases | Name | Alias | | -- | -- | @@ -82,7 +82,7 @@ In a number of places in the Umbraco UI Builder API, you are required to know th | Forms | `forms` | | Translation | `translation` | -## Tree aliases +## Tree Aliases | Name | Alias | | -- | -- | From f00d20d035336a0f8184d9e27a8a8e11d0443f3b Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Tue, 1 Apr 2025 11:11:50 +0200 Subject: [PATCH 5/5] Update 15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md --- 15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md b/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md index 8cafe16ef33..5331940d17b 100644 --- a/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md +++ b/15/umbraco-ui-builder/miscellaneous/umbraco-aliases.md @@ -4,7 +4,7 @@ description: Common Umbraco aliases used in Umbraco UI Builder for Sections, Das # Umbraco Aliases -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. +Umbraco UI Builder requires aliases for different 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. ## Dashboard Aliases