admin
Last updated
Last updated
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.
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:
To make the Admin page elements visible in the editor, click the caret icon to expand the Elements tree:
2. Then, click the Group (Main Page) element, and expand the
group elements in the tree by clicking the + icons:
3. Click the Group Graph of Users Container element to
make it visible in the editor:
4. This will ensure that all of the elements within the Group (Main Page) element are visible:
Mobile
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.
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.
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:
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.
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.
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:
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:
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.
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:
View User signups over time in a graph
View all of your app's Users and their profile information
Edit Users profile information
Designate other Users as fellow Admin Users
Delete User accounts
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.
Users are never automatically taken to this page.
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.
The admin page shows the desktop navigation, mobile header, and mobile submenu reusable elements conditionally, depending on the current page width.
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.
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:
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.
