In this article, the database meets ui!
You will find how to build an Admin Dashboard on top of Supabase using UI Bakery:
- Connect Supabase to UI Bakery
- View Supabase data
- Add form to edit records
- Publish an app to make it available for your users
Supabase is an open-source Firebase alternative. It’s built on top of PostgreSQL and stuffed with many features such as database, auth, storage, REST, and GraphQL APIs. Everything is backed in a modern intuitive no-code UI. All that makes it a good choice for your database while UI Bakery will focus on the UI.
In this tutorial, I’ll show you how to create an admin panel for your supabase database using UI Bakery. Here is what we’ll build - an admin panel that can view data from the database and provides a user-friendly interface for records editing:
If you prefer video content, here’s my video explaining how to make a supabase admin.
Connect supabase to UI Bakery
First things first, let’s connect the supabase db to UI Bakery.
Open your supabase project, go to the “Project Settings” → “Database”. Here in the “Connection parameters” section, you’ll find the database credentials required for connection:
Now, in your UI Bakery workspace, go to “Data Sources” → “Connect”. In the connection form, fill in the credentials copied from the “Connection parameters” section of the database settings.
Press “Connect Datasource” and supabase integration is done. Now we can build an actual application.
View supabase data
In the UI Bakery workspace, click “Create app” → “Create new app”, fill in the application name, and click “Create app”.
Now you’re in an application builder. Here you can see 3 major panels:
- Left - components list, here you will find components to add to the screen.
- Right - Selected component configuration where you change component properties.
- Bottom - actions panel - all the application logic lives here.
Let's focus on data first - create a new action that will load data from the connected supabase db. In the actions panel click “Create action”, choose your supabase database connected before, then “Load table” and finally choose a table to load. When configuration is done click “Execute action” to preview the data.
When data is loaded in UI Bakery we can start building UI. First of all, let's add a table to view records. Find the Table in the components panel, then drag-drop it on the working area.
Using the component settings panel configure what columns are displayed and change the title of the table:
At this stage, you have an application that loads data from the supabase database and displays it inside a good-looking table. Now it’s time to focus on records editing.
Add form to edit records
Drag’n’drop a form component from the components panel to the working area to the right of the table. When a component is in its place we have to configure it to display data from the selected row of the table.
Locate the Data field in the “Component settings” sidebar and reference the table’s selected row data using variable syntax - {{ui.clientsTable.selectedRow.data}}. Curly braces allow using variables in components settings fields. {{ui - means we’re referencing UI component from the workspace. {{ui.clientsTable - means we’re referencing a component called “clientsTable”, and {{ui.clientsTable.selectedRow.data}} means to get the data from the selected row of our table.
When the Data field is set, hit the “Regenerate structure” button and the form will apply the referenced table structure to itself so you don’t have to configure the form structure. It will just be the same as in your table.
To make this form update records in the database you have to scroll the “component settings” panel to the bottom and find the “Triggers” section. There hit “Add trigger”, select “On Submit” to trigger the action when the form is submitted, and click “Create action” to add a new action assigned to the “On Submit” trigger.
At the “Actions” panel a new empty action appears. In the opened popup select your supabase database we connected before → “update Row” → supabase table to update.
After that, we should configure an update behavior. In “Configure filter to update record(s)” type {{ui.clientForm.value.id}} - reference an ID of the record in the form.
Then, to the right of the “Configure record fields to update” field, click on the “JS” button:
This will turn the form into a code field, so we can just reference the whole form value using variable syntax {{ui.clientForm.value}}.
So this action does the following - it will find all the records with IDs equal to the entity ID and update all the fields changed in the form.
The last step we have to perform here is to reload data in the table.
Create a new action step below the “update” step, choose “Execute action” and in the “Action to execute” field choose the “loadClients” action. This configuration will trigger the “loadClients” action right after the database record is updated. So we’ll always have fresh data in the table.
Publish an app to make it available for your users
Finally, to make an application available for your users you have to publish it. Click the “Release” button at the top right corner and hit “Publish release”.
Now your supabase application is up and running! The only thing left to do is invite your users.
In the workspace, click on your email → “Users & Permissions”. There you’ll be able to invite your teammates to collaborate in your app.
Now you have a neat-looking supabase admin panel where you can view and edit your data.
Using UI Bakery builder you can add other features to your app, protect them using roles and permissions, adapt an app for mobile devices, customize the look and feel of your application using a theme editor, and many many more.
All of that in a fraction of a minute.
Join UI Bakery community and build applications in minutes - not months!
Top comments (0)