# How to build an admin panel in Bubble.io: Step-by-Step Guide

- Tool: Bubble
- Difficulty: Beginner
- Time required: 20-25 min
- Compatibility: All Bubble plans
- Last updated: March 2026

## TL;DR

Build an admin panel in Bubble with a data table showing all records via Repeating Groups, search and filter controls, inline editing capabilities, and user management tools. Protect the admin page with role-based access using Privacy Rules and page-level redirects, and add metrics overview cards showing key business statistics at the top of the dashboard.

## Building an Admin Panel in Bubble

Every app needs an admin panel — a back-office dashboard where you can manage users, review content, update settings, and monitor key metrics. This tutorial walks you through building a complete admin panel in Bubble with data tables, search and filter controls, inline editing, user management, and a metrics overview. You will also secure it with role-based access so only admins can see it.

## Before you start

- A Bubble account with an app open in the editor
- At least one Data Type with records to manage
- User authentication set up with a 'role' field on the User Data Type
- Basic familiarity with Repeating Groups and workflows

## Step-by-step guide

### 1. Create the admin page with role-based access protection

Create a new page called 'admin.' Add a 'Page is loaded' workflow with two conditions: (1) Only when Current User is logged out → Go to page login. (2) Only when Current User's role is not 'admin' → Go to page dashboard (or show an 'Access denied' message). Add a 'role' field (text) to the User Data Type if you have not already, with possible values: admin, user, moderator. Set your own user's role to 'admin' in the App data tab.

**Expected result:** Only users with role 'admin' can access the admin page. All others are redirected.

### 2. Build the metrics overview cards at the top

At the top of the admin page, add a Row container with 4 Group elements styled as metric cards. Each card shows: (1) Total Users = Do a search for Users:count. (2) Users Today = Do a search for Users where Created Date >= today:count. (3) Total Revenue = Do a search for Orders where status = confirmed:each item's amount:sum. (4) Active Sessions = Do a search for Users where last_active >= 5 minutes ago:count. Style each card with a large number, a label, and optionally a trend indicator.

> Pro tip: For better performance, pre-calculate these metrics in a nightly backend workflow and display the stored values instead of running live searches on page load.

**Expected result:** The admin dashboard shows key business metrics at a glance in styled summary cards.

### 3. Build the data table with a Repeating Group

Below the metrics, add a Repeating Group with Type of content set to your primary Data Type (e.g., 'User'). Set the Data source to 'Do a search for Users' with no constraints initially. Style it as a table: set the first cell as a header row with column labels (Name, Email, Role, Created, Status). In data cells, display the corresponding fields. Add alternating row colors using a conditional: 'When Current cell's index is odd → Background color = light gray.'

**Expected result:** A clean data table displays all records with column headers and alternating row colors.

### 4. Add search, sort, and filter controls above the table

Above the Repeating Group, add: (1) A SearchBox element for text search — use its value as a constraint on the search (e.g., first_name contains SearchBox's value, using 'Ignore empty constraints'). (2) A Dropdown for filtering by role (options: All, admin, user, moderator). (3) A Dropdown for sorting (options: Newest first, Oldest first, Name A-Z). Use the sort dropdown's value to control the Repeating Group's sort order. Connect all filters to the data source using dynamic constraints.

**Expected result:** Admins can search by name, filter by role, and sort the data table by different criteria.

### 5. Add inline editing and action buttons

In each table row, add an 'Edit' button that shows a popup with pre-filled input fields. Create a popup element with Input fields for each editable field, pre-populated with the selected record's data (use 'Display data in a group' to pass the record to the popup). Add a 'Save' button in the popup: Make changes to thing → update each field from the input values. Also add a 'Delete' button with a confirmation popup. For bulk actions, add checkboxes in each row, store checked items in a custom state list, and add a 'Delete Selected' button.

> Pro tip: For quick status changes (like suspending a user), add a Dropdown directly in the table row that triggers a 'Make changes to thing' workflow on value change — no popup needed.

**Expected result:** Admins can edit records via a popup form, delete individual records, and perform bulk actions on selected items.

### 6. Add a user management section

Add a tab or section specifically for user management. Display a Repeating Group of Users with columns: name, email, role, created date, last active, and status. Add action buttons per row: 'Change Role' (Dropdown that triggers a Make changes workflow), 'Suspend' (sets a 'suspended' field to yes), and 'Impersonate' (logs admin in as the user for debugging — use with caution). Add an 'Invite User' button that sends a signup link email. Add Privacy Rules so the admin can see all user fields.

**Expected result:** Admins can manage users, change roles, suspend accounts, and invite new users from the dashboard.

## Complete code example

File: `Workflow summary`

```text
ADMIN PANEL ARCHITECTURE
=========================

Page: admin (protected)
  Page is loaded:
    Only when: Current User is logged out → Go to login
    Only when: Current User's role ≠ 'admin' → Go to dashboard

Metrics Cards (Row of 4 Groups):
  Total Users: Search Users:count
  New Today: Search Users (created today):count
  Revenue: Search Orders (confirmed):sum amount
  Active Now: Search Users (last_active > 5min ago):count

Data Table (Repeating Group):
  Type: User (or any managed Data Type)
  Data source: Search with dynamic constraints
    text contains SearchBox value (ignore empty)
    role = Dropdown Role value (ignore empty)
  Sort: based on Sort Dropdown value
  
  Cell layout:
    [Checkbox] | Name | Email | Role | Created | Status | [Edit] [Delete]

Search/Filter Controls:
  SearchBox → text constraint
  Dropdown Role → role constraint
  Dropdown Sort → sort order

Edit Workflow:
  Click Edit → Display data in Popup (the record)
  Popup: pre-filled Inputs for each field
  Click Save → Make changes to Popup's thing
  Click Delete → Show confirmation → Delete thing

Bulk Actions:
  Custom state: selected_items (list of things)
  Checkbox toggle → add/remove from list
  Delete Selected → Schedule API workflow on a list

User Management:
  Change Role: Dropdown in row → Make changes on value change
  Suspend: Button → set suspended = yes
  Invite: Button → Send email with signup link
```

## Common mistakes

- **Relying only on page redirect for admin access control** — A redirect prevents navigation to the page, but it does not prevent API access to the data. An attacker could still query your database through browser tools. Fix: Combine page redirects with Privacy Rules on each Data Type. Create a rule: 'When Current User's role is admin → allow all operations.'
- **Running expensive search aggregations for metrics on every page load** — Counting all users, summing all revenue, and checking active sessions simultaneously consumes significant WUs and slows page load. Fix: Pre-calculate metrics in a backend workflow that runs hourly or nightly. Store results in a 'Metrics' Data Type and display the cached values.
- **Not adding confirmation dialogs before destructive actions** — Accidental clicks on Delete buttons can permanently destroy data with no way to undo. Fix: Always show a confirmation popup before delete actions. Consider implementing soft-delete (setting a 'deleted' flag) instead of hard delete.

## Best practices

- Protect admin pages with both page-level redirects AND server-side Privacy Rules
- Pre-calculate dashboard metrics to avoid expensive real-time aggregations
- Use soft-delete (a 'deleted' yes/no field) instead of permanent deletion for important records
- Add confirmation dialogs before all destructive actions (delete, suspend, role change)
- Include search, filter, and sort on all data tables for efficient record management
- Log admin actions in an AuditLog Data Type for accountability and debugging
- Paginate data tables to 15-20 rows per page for performance

## Frequently asked questions

### How do I make myself an admin in my Bubble app?

Go to Data tab → App data → All Users → find your user → click to edit → set the 'role' field to 'admin.' You can also create a workflow that automatically sets the first user as admin.

### Can I have multiple admin roles like 'super_admin' and 'moderator'?

Yes. Use text values or an Option Set for roles. Create different Privacy Rules and page conditions for each role level, giving super_admins full access and moderators limited permissions.

### How do I add audit logging to track admin actions?

Create an 'AuditLog' Data Type with fields: admin_user, action_type, target_record, timestamp, and details. In each admin workflow (edit, delete, role change), add a 'Create AuditLog' action.

### Should I build the admin panel on the same app or a separate one?

For most apps, build it in the same app on a protected page. A separate admin app only makes sense for very large teams or when you need completely different hosting and access controls.

### Can I export data from the admin panel?

Yes. Add an 'Export CSV' button that uses Bubble's built-in CSV export functionality, or use a plugin like 1T CSV Creator to generate downloadable CSV files from your data searches.

### Can RapidDev build a custom admin panel for my Bubble app?

Yes. RapidDev builds tailored admin dashboards in Bubble with advanced features like audit logging, batch operations, role-based views, and custom reporting tailored to your business needs.

---

Source: https://www.rapidevelopers.com/bubble-tutorial/build-an-admin-panel-in-bubble
© RapidDev — https://www.rapidevelopers.com/bubble-tutorial/build-an-admin-panel-in-bubble