How to Create an Admin Panel for Your PostgreSQL Database on Railway Cloud
Tags: webdev, lowcode, railway, postgres
Published: 2024-03-12 13:27:27

Creating an effective admin panel for your PostgreSQL database hosted on Railway Cloud can significantly streamline the management of your database records. This guide will walk you through the steps to build a fully functional admin panel using [UI Bakery](https://uibakery.io/), a visual application builder. This panel will allow you to view, edit, add, and delete records, as well as filter data for easier access.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geetjx4uspizo96g4vub.gif)

---

If you prefer video content, here’s my video explaining how to make an admin panel for the railway-hosted PostgreSQL.

{% youtube NzEoPTpmUM8 %}

---


## Step 1: Connect Your Database to [UI Bakery](https://uibakery.io/)

### Navigate to Data Sources in [UI Bakery](https://uibakery.io/)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1t295yzxr9w0gkf71qk5.png)


Start by going to the data sources section within UI Bakery.

### Connect to PostgreSQL


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klihxopqrz98ngbslrj5.png)


Click on the "connect" button and select PostgreSQL from the list of options.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8fe8zjbddk0n6a3tavx4.png)


Enter Database Credentials: Input the required credentials for your database. You can find these details in your Railway dashboard under your database's "variables" section. The necessary credentials include the database host, password, port, and user.

### Connect Data Source


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/leszrgd0e0w2fyhzazgw.gif)


After filling in the credentials, click the "connect data source" button. Once connected, you should be able to see your database's table structure.

---

## Step 2: Create a New Application


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhv3yk02reeane2cbppb.png)


From your workspace in UI Bakery, create a new application. For this example, we'll name it "Clients Admin".


Create the First Action: This action will load data from your database table. Execute this action to ensure it works correctly and that the data preview is loaded.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwro9iojd2noxoai9b6x.png)

- First of all, press "Create action"
- Then choose the "Clients" data source you've added in the previous step
- In **operation** select **Load Table**
- Finally, choose the **Clients** table to load

Execute the action to make sure everything is connected and works properly:


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zlsku53gcnaaa39l9u2h.png)

---

## Step 3: Display Data

### Configure a Data Table


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0363z54ens29mohkdmr5.png)


Add a table on the screen to display the loaded data. Adjust the size, remove any unnecessary columns for clarity, and customize the display of certain data in **columns** settings.

---

## Step 4: Enable and Configure CRUD Operations

First of all, scroll to the **actions** section of the table configuration and enable **add**, **edit**, and **delete** buttons.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eipfb8jeodma9w8xsz35.png)

Then scroll down to the **triggers** section and create new actions for **On Create**, **On Edit**, and **On Delete** triggers.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ngu5wqaonb52k7xmwgk.png)

---

### Editing Records

In newly created **onEdit** action choose:
- **Type** - **Clients** data source
- **Operation** - Update Row
- **Table** - **Clients**

Then in **Configure filter to update record(s)** section define which records have to be updated - add an **id** filter that **equals** to the `{{ui.clientsTable.editedRow.data.id}}` - edited row id.

Toggle **JS** mode in **Configure record fields to update** section and pass `{{ui.clientsTable.editedRow.data}}` inside - updated record from the table.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dfi0x7eq26gobttmxt78.png)

After editing, execute the load action again to refresh the data displayed on your panel.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dmigwk3r8e40afhkefam.png)

---


### Adding New Records

In newly created **onCreate** action choose:
- **Type** - **Clients** data source
- **Operation** - Create Row
- **Table** - **Clients**

Then in **Configure new record fields** section add `{{ui.clientsTable.newRow.data}}` - a new object submitted from the table.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2mqx4cgv6kc4yurgv8w3.png)


After submitting a new row, execute the load action again to refresh the data displayed on your panel.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3cabe1xwft98ugy75m9y.png)

---

### Deleting Records

In **onDelete** action choose:
- **Type** - **Clients** data source
- **Operation** - Delete Row
- **Table** - **Clients**

In **Configure filter to delete record(s)** section define which records have to be updated - add an **id** filter that **equals** to the `{{ui.clientsTable.deletedRow.data.id}}` - deleted row id.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jcy5zjfzhq07b13qv6he.png)

After deleting a row, execute the load action again to refresh the data displayed on your panel.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rivohi1zpwgmrr091x9.png)

---

## Step 5: Implement Filtering

### Add a Filter Input

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0sgb1c0yt2fwb1em7oat.png)

Place an input field (e.g., findByName) in your admin panel's header for filtering capabilities.

### Configure Filtering


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbl9zxij0upcszkdoqna.png)


Link the input field to the load action with **onChange** trigger, adjusting the action to include filters based on the input value (e.g., records where the name matches the input value).

## Conclusion

By following these steps, you have created a comprehensive admin panel for managing your PostgreSQL database on Railway Cloud with UI Bakery. This panel not only streamlines the process of viewing and manipulating database records but also enhances the efficiency of database management through filtering and CRUD operations. Join UI Bakery to further expedite your application development journey.