# admin

## Admin Page Elements Are Not Visible when the Editor is First Loaded

When you navigate to the admin page in the editor, you won't see any of the admin page elements at first.  This is because it's best for the admin page components to be hidden by default (for security reasons), and to only become visible when an **Admin** User is viewing this page.

![](/files/-LNvAewGKIuTfplmHsI9)

The admin page elements are only shown to admin User because of the conditional on the `Group Main Page` element (shown below).  This conditional 'tells Bubble' that this group should only become visible when the Current User's **"Admin"** field's value (type: yes/no, list: no) is **yes**:

![](/files/-LWZsBtpf5YBHGyIXJhA)

## How to Make Admin Page Elements Visible in the Editor

1. To make the Admin page elements visible in the editor, **click the caret icon to expand the Elements tree**:

![](/files/-LNvB5c2EQwSJ5zrC6qZ)

&#x20;    2\. Then, **click the** `Group (Main Page)` **element**, and expand the \
&#x20;    group elements in the tree by **clicking the + icons**:&#x20;

![](/files/-LNvEtwPP5fTqI_Cm8RU)

&#x20;       3\. **Click the** `Group Graph of Users Container` **element** to \
&#x20;       make it visible in the editor:

![](/files/-LNvQZua-WtcuRprLWks)

&#x20;        4\. This will ensure that all of the elements within the Group \
&#x20;       (Main Page) element are visible:&#x20;

![](/files/-LNvR6YmYpNoeedHUTPR)

#### Desktop (Preview)

<div align="center"><img src="/files/-LNvRUPy0X4t5Ej5R0OG" alt=""></div>

**Mobile**

<img src="/files/-LNvSvr6YPZZ-gTl7BtR" alt="" data-size="original">

## **Why does this page exist?**

In general, creating an admin page in a Bubble app allows you to modify your app's live database.  In development mode, we are able to modify data through the App Data tab, but this is not possible in live mode.&#x20;

## **Who can access this page?**

Only Users that have an "admin" field value (type: yes/no, list: no) of **yes** are allowed to access this page.  All other Users will not be shown anything on this page, and will be re-directed immediately if they navigate to this page.&#x20;

### How to designate admin Users before pushing your app to live:

The easiest way to designate your account as an admin User, is to set your personal development User account's "Admin" field value (type: yes/no, list: no) to **true** in the editor's App Data tab:

![](/files/-LX8Pu8nlf-kezLL0vJ3)

After clicking the Save button to modify your User account database entry, you will be able to view the Admin page when previewing your app in development mode. &#x20;

To ensure that your account will also be designated as an admin User in your app's live database, you will want to "*copy your app's development database to live*" right after you first push your app's changes to live. &#x20;

You can copy the app's development database to live by going to the App Data tab in the editor, and selecting **Copy and Restore Database**:

![](/files/-LX8QjK-_AIvyiWHYEm9)

You will be shown the popup below which warns you that copying data is a dangerous operation because it can either remove's your app's development data (and replace it with the live database entries) or vice versa.  In this situation, your app's live database would be empty, and copying the development data to live would not cause any issues (it will just make sure you can login to your live database with the accounts you created in the development database).  To make this change, click the **Copy Development Data Into the Live Database**:

![](/files/-LX8RLMEf3XFirL2z-NZ)

Bubble will ask to confirm this action and then your development accounts will be available to use in the live version of your app. From there, your User account will be shown the "Admin" links in live mode, and have all of the admin actions available to your account. &#x20;

## **What does this page allow my Users to do?**

Since it's not possible to edit App data through the App data tab for your app's live database entries, this admin page allows you to:

1. View User signups over time in a graph
2. View all of your app's Users and their profile information
3. Edit Users profile information
4. Designate other Users as fellow Admin Users
5. Delete User accounts

## **Where do my Users click in order to go to this page?**

An "Admin" link is automatically shown in the desktop navigation, mobile menu (list), and header\_navigation reusable elements, as long as the Current User's "admin" field value (type: yes/no, list: no) is **yes**.&#x20;

## **When are my Users taken to this page?**&#x20;

Users are never automatically taken to this page.

## **What should I keep in mind about this page’s workflows?**

Most of the admin page's workflows only show or hide elements.  The admin actions that actually designate other Users as admin and delete User accounts (as long as the Current User is an admin User) are within the `admin_edit_user` reusable element.

## **What should I keep in mind about this page’s design?**

The admin page shows the `desktop navigation`, `mobile header`, and `mobile submenu` reusable elements conditionally, depending on the current page width.&#x20;

Here you can see that the `desktop navigation` is shown when the current page width is greater than 887 pixels.  Once the current page width is less than 887 pixels, the `desktop navigation` element becomes hidden (using a responsive, hiding rule) and the `mobile header` and `mobile submenu` reusable elements are shown, so the Current User can more easily navigate throughout the application.&#x20;

![](/files/-LX8TcA3qPeNUMd7JZ19)

When the Current User clicks the hamburger menu icon within the `mobile submenu` reusable element, the admin page's `FG - Mobile Menu` and `FG - Fade Overlay` elements are shown:

![](/files/-LX8WuxL4ob4TwxSBrkI)

{% hint style="info" %}
In order for the `FG - Mobile Menu` and `FG - Fade Overlay` elements to display correctly, they should always be the same height as the page.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.littlebaytech.com/templates/messaging-template/page-guides/pages/3.-logged-in/admin.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
