Merge pull request #6990 from umbraco/property-editors

Updated UI Builder articles

Author: eshanrnh

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.
 

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)
 

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

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 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
+## 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 |
 | -- | -- |

15/umbraco-ui-builder/property-editors/entity-picker.md

@@ -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

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)