Merge pull request #6854 from umbraco/ui-builder

Updated articles

Author: eshanrnh

15/umbraco-ui-builder/.gitbook.yaml

@@ -10,3 +10,6 @@ getting-started/upgrading/version-specific-upgrades: upgrading/version-specific.
 getting-started/installation: installation/installation.md
 getting-started/licensing-model: installation/licensing-model.md
 guides/migrating-from-konstrukt-to-umbraco-ui-builder: upgrading/migrating-from-konstrukt-to-umbraco-ui-builder.md
+getting-started/overview: getting-started/requirements.md
+installation/installation: getting-started/installation.md
+installation/licensing-model: getting-started/licensing-model.md

15/umbraco-ui-builder/README.md

@@ -16,7 +16,7 @@ With Umbraco UI Builder, custom backoffice integrations can now take a matter of
 
 **This documentation is aimed at developers** who have at least a basic understanding of Umbraco, as well as C#/MVC principles.
 
-If you are new to Umbraco UI Builder, it is recommended that you start by taking a look at the [Getting Started](getting-started/overview.md) section. This provides details on the system requirements and how to install Umbraco UI Builder.
+If you are new to Umbraco UI Builder, it is recommended that you start by taking a look at the [Getting Started](getting-started/requirements.md) section. This provides details on the system requirements and how to install Umbraco UI Builder.
 
 Once you have Umbraco UI Builder installed and are wondering "What next?" then you'll want to take a look at the [Guides](guides/creating-your-first-integration.md) section. This provides a quick-start example of how to configure Umbraco UI Builder.
 

15/umbraco-ui-builder/SUMMARY.md

@@ -4,26 +4,23 @@
 * [Known Issues](known-issues.md)
 * [Release Notes](release-notes.md)
 
-## Installation
+## Getting Started
 
-* [Installing Umbraco UI Builder](installation/installation.md)
-* [Licensing](installation/licensing-model.md)
+* [Requirements](getting-started/requirements.md)
+* [Installing Umbraco UI Builder](getting-started/installation.md)
+* [Licensing](getting-started/licensing-model.md)
+* [Configuration](getting-started/configuration.md)
+* [User Interface](getting-started/user-interface.md)
 
 ## Upgrading
 
 * [Upgrading Umbraco UI Builder](upgrading/upgrade.md)
 * [Version Specific Upgrade Notes](upgrading/version-specific.md)
 * [Migrate from Konstrukt to Umbraco UI Builder](upgrading/migrating-from-konstrukt-to-umbraco-ui-builder.md)
 
-## Getting Started
-
-* [Overview](getting-started/overview.md)
-* [Configuration](getting-started/configuration.md)
-* [User Interface](getting-started/user-interface.md)
-
 ## How-to Guides
 
-* [Creating your first integration](guides/creating-your-first-integration.md)
+* [Creating your First Integration](guides/creating-your-first-integration.md)
 
 ## Areas
 

15/umbraco-ui-builder/getting-started/configuration.md

@@ -1,25 +1,33 @@
 ---
-description: Configuring Umbraco UI Builder, the backoffice UI builder for Umbraco.
+description: Learn how to configure Umbraco UI Builder using the extension method.
 ---
 
 # Configuration
 
-Umbraco UI Builder can be configured directly via the `AddUIBuilder` extension method on `IUmbracoBuilder`.
+You can configure Umbraco UI Builder using the `AddUIBuilder` extension method in `Program.cs`.
 
-## AddUIBuilder
+## Using `AddUIBuilder`
 
-To configure Umbraco UI Builder via the `AddUIBuilder` extension method, You can look in the `Program.cs` file in the root of your web project. From within this file, before the call to `AddComposers()` we can add our `AddUIBuilder` configuration.
+To configure Umbraco UI Builder:
+
+1. Open the `Program.cs` file in your project.
+2. Locate the `CreateUmbracoBuilder()` method.
+3. Add `AddUIBuilder` before `AddComposers()`.
 
 ```csharp
 builder.CreateUmbracoBuilder()
     .AddBackOffice()
     .AddWebsite()
     .AddUIBuilder(cfg => {
-                // Apply your configuration here
+       // Apply your configuration here
     })
     .AddDeliveryApi()
     .AddComposers()
     .Build();
 ```
 
-The `AddUIBuilder` extension method accepts a single parameter, a delegate function with one of the Umbraco UI Builder configuration builder arguments. With this, you can then call the relevant fluent APIs to define your solution.
+{% hint style="info" %}
+If you want an example configuration, see the **Configure Umbraco UI Builder** section in the [Creating your First Integration](../guides/creating-your-first-integration.md) article.
+{% endhint %}
+
+The `AddUIBuilder` method accepts a delegate function, allowing you to configure your solution using fluent APIs.