Creating your first integration
Creating your first integration with Umbraco UI Builder, the backoffice UI builder for Umbraco.
In this guide, you can find the necessary steps needed for a basic implementation using Umbraco UI Builder to manage a single custom database table.
Set 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. However, for getting started, it is expected that you are using this default strategy.
Start by setting up a database table for your model (you might want to populate it with some dummy data as well while learning). We’ll use the following as an example:
Set up your model
With the database table setup, we then need to create the associated Poco model in our project.
Configure Umbraco UI Builder
With the database and model setup, we can now start to configure Umbraco UI Builder itself. The entry point for the Umbraco UI Builder configuration is via the AddUIBuilder
extension method. On this method, we call on the IUmbracoBuilder
instance within the ConfigureServices
method of the Startup
class.
For our example, we will use the following configuration:
Access your UI
With your configuration defined and your project compiled, there is one last step to perform before you can access your UI. And that is to give your backoffice user account permission to access the newly defined section. To do this you'll need to login to the backoffice, head to the user's section, and update the user group. There you will need to make sure that your user belongs to the allowed access.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2282367567-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaQtFchjsM4Ce0DxWznCF%252Fuploads%252Fgit-blob-db02498e73f6a012a73479e9e0c9982b8e82f05d%252Fpermissions.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=c15db8d2&sv=1)
With the permissions set, you can refresh your browser and you should now see your new section available in the site navigation.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2282367567-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaQtFchjsM4Ce0DxWznCF%252Fuploads%252Fgit-blob-80efd5284e654fce93d1922bc113e6131745fa40%252Fpeople_listview.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=12f840a1&sv=1)
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F2282367567-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FaQtFchjsM4Ce0DxWznCF%252Fuploads%252Fgit-blob-1abee38f776ea14b37c5569ec81bca1b27190e7d%252Fpeople_editor.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=1832e8ed&sv=1)
Summary
As you can see, with little code you can start to create powerful interfaces for your custom data structures.
Last updated