Creating your First Integration
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.
By default, Umbraco UI Builder uses a database for data storage. However, you can configure this using a custom Repository class instead.
Setting Up the Database
Umbraco UI Builder uses PetaPoco as its default persistence layer.
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).
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 created, define the Person
model in your project.
To create a Model:
Create a new folder called Models in your project.
Add a new class file called
Person.cs
.Add the following code:
Configure Umbraco UI Builder
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 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 article.
Configuring via Program.cs
Program.cs
Open the
Program.cs
file in your project.Locate the
CreateUmbracoBuilder()
method.Add
AddUIBuilder
beforeAddComposers()
.
Example Configuration
Here’s an example configuration defining a section, a list view, and an editor for managing Person
entities:
Accessing the Umbraco Backoffice
After defining the configuration, compile and run your project. To access the newly defined section, you need to give permission to the backoffice user account:
Login to the Umbraco backoffice.
Go to the Users section.
Navigate to the user group you wish to assign the newly defined section.
Submit the changes.
Refresh the browser to view the new section.
If you click on a person's name, you will see the following screen:
Summary
This setup allows you to extend and customize your Umbraco site by managing data and entities directly in the backoffice. The simplicity of the implementation allows to create dynamic, user-friendly interfaces for your own data models.
Last updated
Was this helpful?