Skip to content
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 33 additions & 6 deletions 15/umbraco-ui-builder/getting-started/configuration.md
Original file line number Diff line number Diff line change
@@ -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:

Expand All @@ -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.
24 changes: 16 additions & 8 deletions 15/umbraco-ui-builder/guides/creating-your-first-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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] (
Expand All @@ -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
Expand All @@ -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()`.
Expand All @@ -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
...
Expand Down