From 4c29ea12098e0d5753ed0957144690a38aef22a3 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Mon, 3 Mar 2025 15:22:50 +0100 Subject: [PATCH 1/5] Added usage of Composer --- .../getting-started/configuration.md | 39 ++++++++++++++++--- .../guides/creating-your-first-integration.md | 24 ++++++++---- 2 files changed, 49 insertions(+), 14 deletions(-) diff --git a/15/umbraco-ui-builder/getting-started/configuration.md b/15/umbraco-ui-builder/getting-started/configuration.md index 60655584eed..787c00413b2 100644 --- a/15/umbraco-ui-builder/getting-started/configuration.md +++ b/15/umbraco-ui-builder/getting-started/configuration.md @@ -1,12 +1,39 @@ --- -description: Learn how to configure Umbraco UI Builder using the extension method. +description: Learn how to configure Umbraco UI Builder in your project using two different approaches. --- # Configuration -You can configure Umbraco UI Builder using the `AddUIBuilder` extension method in `Program.cs`. +You can configure Umbraco UI Builder either via a Composer or the `AddUIBuilder` extension method in `Program.cs`. -## Using `AddUIBuilder` +## Option 1: Configuring via a Composer + +A Composer is a common approach for registering and configuring services in Umbraco during application startup. + +To configure Umbraco UI Builder via a Composer: + +1. Create a file called `UIBuilderComposer.cs` in your project. +2. Implement the `IComposer` interface and add the configuration inside the `Compose` method: + +```csharp +using Umbraco.Cms.Core.Composing; +using Umbraco.UIBuilder.Extensions; + +public class UIBuilderComposer : IComposer +{ + public void Compose(IUmbracoBuilder builder) + { + builder.AddUIBuilder(cfg => + { + // Apply your configuration here + }); + } +} +``` + +## Option 2: Configuring via `Program.cs` + +You can also configure Umbraco UI Builder directly in `Program.cs` using the `AddUIBuilder` extension method. To configure Umbraco UI Builder: @@ -26,8 +53,8 @@ builder.CreateUmbracoBuilder() .Build(); ``` -{% 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 %} +## Example Configuration + +For a complete sample configuration, see the [Creating your First Integration](../guides/creating-your-first-integration.md) article. The `AddUIBuilder` method accepts a delegate function, allowing you to configure your solution using fluent APIs. diff --git a/15/umbraco-ui-builder/guides/creating-your-first-integration.md b/15/umbraco-ui-builder/guides/creating-your-first-integration.md index 3cb8b84df35..febd6ef6107 100644 --- a/15/umbraco-ui-builder/guides/creating-your-first-integration.md +++ b/15/umbraco-ui-builder/guides/creating-your-first-integration.md @@ -2,15 +2,17 @@ description: Creating your first integration with Umbraco UI Builder. --- -# Creating your first integration +# Creating Your First Umbraco UI Builder Integration -In this guide, you will find the necessary steps needed for a basic implementation using Umbraco UI Builder to manage a single custom database table. +This guide walks you through a basic implementation of Umbraco UI Builder to manage a custom database table. ## Setting Up the Database -Out of the box, Umbraco UI Builder works using PetaPoco as the persistence layer, as this is what ships with Umbraco. If you prefer, it is possible to use a custom [Repository](../advanced/repositories.md). However, for getting started, it is expected that you are using this default strategy. +Umbraco UI Builder uses PetaPoco as its default persistence layer. You can use a custom [Repository](../advanced/repositories.md), but this guide assumes the default approach. -In this section, let's create a `Person` table to store data. Run the following script in SQL Server Management Studio (SSMS) to create the `Person` table. +In this section, let's create a `Person` table to store data. + +To create a `Person` table, run the following script in SQL Server Management Studio (SSMS). ```sql CREATE TABLE [Person] ( @@ -24,16 +26,16 @@ CREATE TABLE [Person] ( ); ``` -This script creates a table for storing people’s details. You might want to populate it with some dummy data for testing. +This script creates a table for storing people’s details. You may want to populate it with some dummy data for testing. ## Setting Up the Model -With the database table set up, create the associated Poco model in the project. +With the database table created, define the `Person` model in your project. To create a Model: 1. Create a new folder called **Models** in your project. -2. Create a new class file called `Person.cs`. +2. Add a new class file called `Person.cs`. 3. Add the following code: ```csharp @@ -59,6 +61,10 @@ public class Person With the database and model set up, it is time to configure Umbraco UI Builder to work with the `Person` model. This will allow you to manage `Person` entities from the Umbraco backoffice. +You can choose to configure Umbraco UI Builder either through a Composer or by using the `AddUIBuilder` extension method in `Program.cs`. The following steps cover the `Program.cs` approach. For more details, including configuring via a Composer, see the the [Configuration](../getting-started/configuration.md) article. + +### Configuring via `Program.cs` + 1. Open the `Program.cs` file in your project. 2. Locate the `CreateUmbracoBuilder()` method. 3. Add `AddUIBuilder` before `AddComposers()`. @@ -75,7 +81,9 @@ builder.CreateUmbracoBuilder() .Build(); ``` -For this guide, the following configuration is used: +### Example Configuration + +Here’s an example configuration defining a section, a list view, and an editor for managing `Person` entities: ```csharp ... From fa63332f15d0da15ab95ece2e84514c8a48d051f Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Tue, 4 Mar 2025 08:59:02 +0100 Subject: [PATCH 2/5] Update 15/umbraco-ui-builder/getting-started/configuration.md Co-authored-by: Alina-Magdalena Tincas <83591955+alina-tincas@users.noreply.github.com> --- 15/umbraco-ui-builder/getting-started/configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/15/umbraco-ui-builder/getting-started/configuration.md b/15/umbraco-ui-builder/getting-started/configuration.md index 787c00413b2..594495bdd6b 100644 --- a/15/umbraco-ui-builder/getting-started/configuration.md +++ b/15/umbraco-ui-builder/getting-started/configuration.md @@ -4,7 +4,7 @@ description: Learn how to configure Umbraco UI Builder in your project using two # Configuration -You can configure Umbraco UI Builder either via a Composer or the `AddUIBuilder` extension method in `Program.cs`. +You can configure Umbraco UI Builder either via a Composer or in the `Program.cs`. ## Option 1: Configuring via a Composer From b5fa2fb8f87d3f875a43fcdbe1ff67bbf74bd49b Mon Sep 17 00:00:00 2001 From: Esha Noronha <82437098+eshanrnh@users.noreply.github.com> Date: Tue, 4 Mar 2025 08:59:37 +0100 Subject: [PATCH 3/5] Update 15/umbraco-ui-builder/guides/creating-your-first-integration.md Co-authored-by: sofietoft --- 15/umbraco-ui-builder/guides/creating-your-first-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/15/umbraco-ui-builder/guides/creating-your-first-integration.md b/15/umbraco-ui-builder/guides/creating-your-first-integration.md index febd6ef6107..06f81d031b8 100644 --- a/15/umbraco-ui-builder/guides/creating-your-first-integration.md +++ b/15/umbraco-ui-builder/guides/creating-your-first-integration.md @@ -10,7 +10,7 @@ This guide walks you through a basic implementation of Umbraco UI Builder to man Umbraco UI Builder uses PetaPoco as its default persistence layer. You can use a custom [Repository](../advanced/repositories.md), but this guide assumes the default approach. -In this section, let's create a `Person` table to store data. +In this section, you will create a `Person` table to store data. To create a `Person` table, run the following script in SQL Server Management Studio (SSMS). From f56c6ee04f9b60b3943c76edc175cd9fb9ec7fc7 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 4 Mar 2025 09:09:37 +0100 Subject: [PATCH 4/5] Incorporated suggestions --- .../guides/creating-your-first-integration.md | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/15/umbraco-ui-builder/guides/creating-your-first-integration.md b/15/umbraco-ui-builder/guides/creating-your-first-integration.md index 06f81d031b8..a3c2eca6116 100644 --- a/15/umbraco-ui-builder/guides/creating-your-first-integration.md +++ b/15/umbraco-ui-builder/guides/creating-your-first-integration.md @@ -6,9 +6,13 @@ description: Creating your first integration with Umbraco UI Builder. This guide walks you through a basic implementation of Umbraco UI Builder to manage a custom database table. +{% hint style="info" %} +By default, Umbraco UI Builder uses a database for data storage. However, you can configure this using a custom [Repository](../advanced/repositories.md) class instead. +{% endhint %} + ## Setting Up the Database -Umbraco UI Builder uses PetaPoco as its default persistence layer. You can use a custom [Repository](../advanced/repositories.md), but this guide assumes the default approach. +Umbraco UI Builder uses PetaPoco as its default persistence layer. In this section, you will create a `Person` table to store data. @@ -61,7 +65,11 @@ public class Person With the database and model set up, it is time to configure Umbraco UI Builder to work with the `Person` model. This will allow you to manage `Person` entities from the Umbraco backoffice. -You can choose to configure Umbraco UI Builder either through a Composer or by using the `AddUIBuilder` extension method in `Program.cs`. The following steps cover the `Program.cs` approach. For more details, including configuring via a Composer, see the the [Configuration](../getting-started/configuration.md) article. +{% hint style="info" %} +You can choose to configure Umbraco UI Builder either through a Composer or by using the `AddUIBuilder` extension method in `Program.cs`. +{% endhint %} + +The following steps cover the `Program.cs` approach. For more details, including configuring via a Composer, see the the [Configuration](../getting-started/configuration.md) article. ### Configuring via `Program.cs` From 5ad841647d01fd442ff63c420b46ed86c87ce961 Mon Sep 17 00:00:00 2001 From: Esha Noronha Date: Tue, 4 Mar 2025 09:11:42 +0100 Subject: [PATCH 5/5] Reworded statement --- 15/umbraco-ui-builder/guides/creating-your-first-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/15/umbraco-ui-builder/guides/creating-your-first-integration.md b/15/umbraco-ui-builder/guides/creating-your-first-integration.md index a3c2eca6116..5f191a74cdd 100644 --- a/15/umbraco-ui-builder/guides/creating-your-first-integration.md +++ b/15/umbraco-ui-builder/guides/creating-your-first-integration.md @@ -66,7 +66,7 @@ public class Person With the database and model set up, it is time to configure Umbraco UI Builder to work with the `Person` model. This will allow you to manage `Person` entities from the Umbraco backoffice. {% hint style="info" %} -You can choose to configure Umbraco UI Builder either through a Composer or by using the `AddUIBuilder` extension method in `Program.cs`. +You can configure Umbraco UI Builder either through a Composer or by using the `AddUIBuilder` extension method in `Program.cs`. {% endhint %} The following steps cover the `Program.cs` approach. For more details, including configuring via a Composer, see the the [Configuration](../getting-started/configuration.md) article.