Updated articles

Author: eshanrnh

15/umbraco-ui-builder/collections/child-collection-groups.md

@@ -1,5 +1,5 @@
 ---
-description: Configuring child collection groups in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring child collection groups in Umbraco UI Builder.
 ---
 
 # Child Collection Groups
@@ -12,27 +12,41 @@ A child collection group is a container for other child collections. Its purpose
 
 ![Child Collection Groups](../images/child_collection_groups.png)
 
-## Defining a child collection group
+## Defining a Child Collection Group
 
 You can define a child collection group by calling one of the `AddChildCollectionGroup` methods on a given collection config builder instance.
 
-### **AddChildCollectionGroup(string name, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder**
+### Using the `AddChildCollectionGroup()` Method
 
-Adds a child collection group to the current collection with the given name and default icon.
+Adds a child collection group to the current collection with the specified name and default icon.
+
+#### Method Syntax
+
+```cs
+AddChildCollectionGroup(string name, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder
+```
+
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollectionGroup("Family", childCollectionGroupConfig => {
     ...
 });
 ```
 
-### **AddChildCollectionGroup(string name, string icon, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder**
+### Using the `AddChildCollectionGroup()` Method with Custom Icon
+
+Adds a child collection group to the current collection with the specified name and custom icon.
+
+#### Method Syntax
+
+```cs
+AddChildCollectionGroup(string name, string icon, Lambda childCollectionGroupConfig = null) : ChildCollectionGroupConfigBuilder
+```
 
-Adds a child collection group to the current collection with the given name and icon.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollectionGroup("Family", "icon-users", childCollectionGroupConfig => {
     ...
 });

15/umbraco-ui-builder/collections/child-collections.md

@@ -1,5 +1,5 @@
 ---
-description: Configuring child collections in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring child collections in Umbraco UI Builder.
 ---
 
 # Child Collections
@@ -8,40 +8,51 @@ description: Configuring child collections in Umbraco UI Builder, the backoffice
 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.
 {% endhint %}
 
-A child collection is a container for a given data model that is tied to a parent collection data model. It shares all of the [Collections](the-basics.md) config builder API except child collections cannot contain further child collections.
-
+A child collection is a container for data models that are tied to a parent collection. The child collection system shares the [Collections](the-basics.md) API, offering flexibility for managing and displaying related data within your backoffice UI.
 ![Child Collections](../images/child_collections.png)
 
-{% hint style="info" %}
-**Child Collections UI:** By default, child collections will be presented in the UI as context apps in the parent models editor view. If you have multiple child collections that make the context apps area overpopulated, you can use the [Child Collection Groups API](child-collection-groups.md). By using this you can group child collections under a single context app with the inner child collections then being presented in tabs.
-{% endhint %}
+By default, child collections are displayed as context apps within the parent model's editor view. If multiple child collections lead to an overcrowded context apps area, consider using the [Child Collection Groups API](child-collection-groups.md). Using the aPI you can group related child collections under a single context app, with each child collection appearing in separate tabs.
+
+## Defining a Child Collection
+
+To define a child collection, use the `AddChildCollection` method on the given collection config builder instance.
+
+### Using the `AddChildCollection()` Method
 
-## Defining a child collection
+This method adds a child collection with the specified names, description, and default icons. Both the entity ID and foreign key fields must be specified using property accessor expressions.
 
-You define a child collection by calling one of the `AddChildCollection` methods on a given collection config builder instance.
+#### Method Syntax
 
-### **AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>**
+```cs
+AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>
+```
 
-Adds a child collection to the current collection with the given names and description and default icons. A property accessor expression is required for both the entity ID field and FK (Foreign Key) field of the entity.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollection<Child>(c => c.Id, c => c.ParentId, "Child", "Children", "A collection of children", childCollectionConfig => {
     ...
 });
 ```
 
-### **AddChildCollection&lt;TChildEntityType&gt;(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder&lt;TEntityType&gt;**
+### Using the `AddChildCollection()` Method with Custom Icons
+
+This method adds a child collection to the current collection with the specified names, description and custom icons. Both the entity ID and foreign key fields must be specified using property accessor expressions.
+
+#### Method Syntax
+
+```cs
+AddChildCollection<TChildEntityType>(Lambda idFieldExpression, Lambda fkFieldExpression, string nameSingular, string namePlural, string description, string iconSingular, string iconPlural, Lambda childCollectionConfig = null) : ChildCollectionConfigBuilder<TEntityType>
+```
 
-Adds a child collection to the current collection with the given names, description and icons. A property accessor expression is required for both the entity ID field and FK (Foreign Key) field of the entity.
+#### Example
 
 ```csharp
-// Example
 collectionConfig.AddChildCollection<Child>(c => c.Id, c => c.ParentId, "Child", "Children", "A collection of children", "icon-umb-users", "icon-umb-users", childCollectionConfig => {
     ...
 });
 ```
 
-## Configuring a child collection
+## Configuring a Child Collection
 
-Child collections share the same API as the `Collection` config builder API, except child collections cannot contain further child collections. For more information check the [core collections documentation](the-basics.md).
+Child collections share the same API as the `Collection` config builder API, except child collections cannot contain further child collections. For more information, see the [Basics](the-basics.md) article.

15/umbraco-ui-builder/collections/field-views.md

@@ -1,29 +1,29 @@
 ---
-description: Configuring field views in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring Field Views in Umbraco UI Builder.
 ---
 
 # Field Views
 
-Field Views allow you to customize the markup used by a field when displayed in a list view. Field Views are implemented as .NET Core View Components that are passed a single `FieldViewsContext` argument with information about the entity/field being rendered.
+Field Views allow customization of the markup used by a field when displayed in a list view. Field Views are implemented as .NET Core View Components, which are passed a `FieldViewsContext` argument containing information about the entity/field being rendered.
 
-## Defining a field view
+## Defining a Field View
 
-You can define a field view in one of two ways.
+You can define a field view in one of two ways:
 
-### **1. A basic view file for the built in `FieldView` view component**
+### 1. Basic View File for the Built-In `FieldView` View Component
 
-The simplest way to define a field view for non-complex fields is to place a view file in the `/Views/Shared/Components/FieldView` folder with the following markup.
+For field views, place a view file in the `/Views/Shared/Components/FieldView` folder with the following markup.
 
 ````csharp
 @model Umbraco.UIBuilder.Web.Models.FieldViewContext
 <!-- Insert your markup here -->
 ````
 
-When registering a basic file view you can pass the name of the view file (excluding the `.cshtml` file extension) to the relevant API method.
+WTo register the view, pass the name of the view file (excluding the `.cshtml` file extension) to the relevant API method.
 
-### **2. A complete custom view component**
+### 2. Custom View Component
 
-To define a more complex field view you can create your own view component class (which can use dependency injection for any required dependencies). This can be done by using the following signature:
+For more complex field views, create a custom view component class that can use dependency injection for any required dependencies. Use the following signature:
 
 ````csharp
 // Example
@@ -39,19 +39,19 @@ public class MyComplexFieldViewViewComponent : ViewComponent
 ````
 
 {% hint style="info" %}
-It's important to know that the `FieldViewContext` parameter to the `InvokeAsync` method **MUST** be named `context`.
+The `FieldViewContext` parameter in the `InvokeAsync` method **must** be named `context`.
 {% endhint %}
 
-For the view element of your component, based on the example above, you would place a file `Default.cshtml` into the  `/Views/Shared/Components/MyComplexFieldView` folder with the following markup:
+For the view component, place a `Default.cshtml` file into the `/Views/Shared/Components/MyComplexFieldView` folder with the following markup:
 
 ````csharp
 @model Namespace.Of.Model.Returned.By.Custom.ViewComponent
 <!-- Insert your markup here -->
 ````
 
-## The field view context
+## The Field View Context
 
-Field view components are passed a `FieldViewContext` object with the following information:
+Field view components are passed a `FieldViewContext` object with the following properties:
 
 ````csharp
 public class FieldViewContext
@@ -63,6 +63,6 @@ public class FieldViewContext
 }
 ````
 
-## Setting the field view of a list view field
+## Setting the Field View of a List View Field
 
-A field view is assigned to a list view field as part of the list view configuration. For more information you can check the [List View Documentation](list-views.md#setting-the-view-of-a-field).
+A field view is assigned to a list view field as part of the list view configuration. For more information, see the [List Views](list-views.md#setting-the-view-of-a-field) article.

15/umbraco-ui-builder/collections/list-views.md

@@ -1,103 +1,159 @@
 ---
-description: Configuring the list view of a collection in Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Configuring the list view of a collection in Umbraco UI Builder.
 ---
 
 # List Views
 
-A list view is a list-based view of a collection entity providing features: pagination for large collections, custom data views, searching, and bulk actions.
+A list view displays a collection entity in a list format and includes features like pagination, custom data views, searching, and bulk actions.
 
 ![A collection list view](../images/listview.png)
 
-## Configuring a list view
+## Configuring a List View
 
-The list view configuration is a sub-configuration of a [`Collection`](the-basics.md) config builder instance and is accessed via its `ListView` method.
+The list view configuration is a sub-configuration of a [`Collection`](the-basics.md) config builder instance and can be accessed via the `ListView` method.
 
-### **ListView(Lambda listViewConfig = null) : ListViewConfigBuilder<TEntityType>**
+### Using the `ListView()` Method
 
-Accesses the list view config of the given collection.
+Accesses the list view configuration for the specified collection.
+
+#### Method Syntax
+
+```cs
+ListView(Lambda listViewConfig = null) : ListViewConfigBuilder<TEntityType>
+```
+
+#### Example
 
 ````csharp
-// Example
 collectionConfig.ListView(listViewConfig => {
     ...
 });
 ````
 
-## Adding a field to the list view
+## Adding a Field to the List View
+
+### Using the `AddField()` Method
+
+Adds a specified property to the list view.
+
+#### Method Syntax
 
-### **AddField(Lambda propertyExpression, Lambda fieldConfig = null) : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+```cs
+AddField(Lambda propertyExpression, Lambda fieldConfig = null) : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
 
-Adds the given property to the list view.
+#### Example
 
 ````csharp
-// Example
 listViewConfig.AddField(p => p.FirstName, fieldConfig => {
     ...
 });
 ````
 
-## Changing the heading of a field
+## Changing the Heading of a Field
 
-### **SetHeading(string heading) : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+### Using the `SetHeading()` Method
 
-Sets the heading for the list view field.
+Sets the heading for a field in the list view.
+
+#### Method Syntax
+
+```cs
+SetHeading(string heading) : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
+
+#### Example
 
 ````csharp
-// Example
 fieldConfig.SetHeading("First Name");
 ````
 
-## Formatting the value of a field
+## Formatting the Value of a Field
+
+### Using the `SetFormat()` Method
+
+Sets the format expression to the field in the list view.
+
+#### Method Syntax
 
-### **SetFormat(Lambda formatExpression) : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+```cs
+SetFormat(Lambda formatExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
 
-Sets the format expression for the list view field.
+#### Example
 
 ````csharp
-// Example
 fieldConfig.SetFormat((v, p) => $"{v} years old");
 ````
 
-## Setting the view of a field
+## Setting the View of a Field
 
-With field views, you can customize the markup the list view's field so you can show richer visualizations of the field's content. For more information you can check the [Field Views Documentation](field-views.md).
+You can customize the field's markup with field views, allowing richer visualizations of the content. For more details, see the [Field Views](field-views.md) article.
 
-### **SetView(string viewComponentName) : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+### Using the `SetView()` Method
 
 Sets the view component for the list view field.
 
+#### Method Syntax
+
+```cs
+SetView(string viewComponentName) : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
+
+#### Example
+
 ````csharp
-// Example
 fieldConfig.SetView("ImageFieldView");
 ````
 
-### **SetView&lt;TView&gt;() : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+### Using the `SetView<TView>()` Method
 
 Sets the view component for the list view field.
 
+#### Method Syntax
+
+```cs
+SetView<TView>() : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
+
+#### Example
+
 ````csharp
-// Example
 fieldConfig.SetView<ImageFieldView>();
 ````
 
-## Setting the visibility of a field
+## Setting the Visibility of a Field
 
-### **SetVisibility(Predicate&lt;ListViewFieldVisibilityContext&gt; visibilityExpression) : ListViewFieldConfigBuilder&lt;TEntityType, TValueType&gt;**
+### Using the `SetVisibility()` Method
 
-Sets the runtime visibility of the list view field.
+Controls the runtime visibility of a field in the list view.
+
+#### Method Syntax
+
+```cs
+SetVisibility(Predicate<ListViewFieldVisibilityContext> visibilityExpression) : ListViewFieldConfigBuilder<TEntityType, TValueType>
+```
+
+#### Example
 
 ````csharp
-// Example
 fieldConfig.SetVisibility(ctx => ctx.UserGroups.Any(x => x.Alias == "editor"));
 ````
 
-## Changing the page size
+## Changing the Page Size
+
+### Using the `SetPageSize` Method
+
+Sets the number of items per page for the list view.
+
+#### Method Syntax
 
-### **SetPageSize(int pageSize) : ListViewConfigBuilder&lt;TEntityType&gt;**
+```cs
+SetPageSize(int pageSize) : ListViewConfigBuilder<TEntityType>
+```
 
-Sets the number of items to display per page for the given list view.
+#### Example
 
 ````csharp
-// Example
 listViewConfig.SetPageSize(20);
 ````