diff --git a/15/umbraco-ui-builder/getting-started/configuration.md b/15/umbraco-ui-builder/getting-started/configuration.md index 60655584eed..594495bdd6b 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 in the `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..5f191a74cdd 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,21 @@ 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. + +{% 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 -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. + +In this section, you will create a `Person` table to store data. -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. +To create a `Person` table, run the following script in SQL Server Management Studio (SSMS). ```sql CREATE TABLE [Person] ( @@ -24,16 +30,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 +65,14 @@ 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 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` + 1. Open the `Program.cs` file in your project. 2. Locate the `CreateUmbracoBuilder()` method. 3. Add `AddUIBuilder` before `AddComposers()`. @@ -75,7 +89,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 ...