# Admin Portal **Page name:** admin\ **Purpose:** Fully functional portal for managing all the settings for your application {% hint style="warning" %} Due to the complexity of the page and the amount of information that is usually displayed, the Admin portal will not be responsive. {% endhint %} ## Overview Your app will come with a dedicated portal for the app’s admin where you can manage app settings & data. Much of this is preset for you, but you will have to customize the page for your app. ### Launch Checklist This is a compilation of all the settings (from other tabs) that you will need to update or activate before launching your app. The list will disappear when you have checked all items. [![Launch checklist](https://cdn.vidyard.com/thumbnails/23752842/utMoDX3BDFz40Dru5HPrFg_play_button_small.jpg)](https://share.vidyard.com/watch/jkJ8THYHa7GJvSctfY5cV8?)
### Branding This is a compilation of all branding related settings for your app. You can manage your app name, SEO/social tags, logos, colors, and certain page styles from this tab. [![Branding tab](https://cdn.vidyard.com/thumbnails/23753180/Su1Mu2DaeDoxQ7f_M6890w_play_button_small.jpg)](https://share.vidyard.com/watch/f2prHaNYvYB9UA7Exm9Qak?) ### Pages This tab allows you to view all marketing and Bubble pages in your app. To add marketing pages, you will need to register your app with Canvas first and have your app be on a paid Bubble plan. [![Pages tab](https://cdn.vidyard.com/thumbnails/23753414/_YbNXXIp31gz0_EJXPH9gw_play_button_small.jpg)](https://share.vidyard.com/watch/XTbyh5BxmHnuy84RWh397Z?) ### Header/Footer This tab allows you to customize your header and footer navigations. You will be able to add or edit the headers for each of your app's user types (e.g. admin user, standard logged-in user, and logged-out user). [![Header / Footer tab](https://cdn.vidyard.com/thumbnails/23753474/4BmlnWmLVKkzOWbyeVuRVg_play_button_small.jpg)](https://share.vidyard.com/watch/nwZzhmHuaui2672BjDx4ck?) ### Emails This tab allows you to manage and edit the content for the emails that are sent from the app. To use this feature, you would need to complete the launch checklist step for *Enable outgoing email* first. [![Emails tab](https://cdn.vidyard.com/thumbnails/23753589/FTeEhh1S77n8vaePTlJQDQ_play_button_small.jpg)](https://share.vidyard.com/watch/5VDXLBdV29FMjN84ykX5iP?) ### Settings This is a compilation of your application's general settings (many you would have already seen from the launch checklist). [![Settings tab](https://cdn.vidyard.com/thumbnails/23753799/kPykSNnHn3BXXB-5DR_XAw_play_button_small.jpg)](https://share.vidyard.com/watch/4vBgHvtUz3SqEdXG61A3cM?) The **Settings** tab provides a means for admins to set global variables for the app. Some of these are pre-baked into Canvas, like setting the password policy or cookie settings. But you also can customize your own app-wide settings that can be exposed to app admins (e.g. listing fee or tags). ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F7QCQzQXopA53eLQUo8SB%2Fuploads%2FrHlvkltbGAHlv7pG1ggL%2FScreen%20Shot%202022-01-11%20at%207.10.44%20PM.png?alt=media\&token=9dcb2aab-8d3f-4c2b-8713-23318b51ac46) ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-Mbcf0jzyS4_oebWCvCH%2F-MbcjvwwPGul1VCrM8xB%2Fimage.png?alt=media\&token=bfb84bef-e5f1-4df1-a333-0a58203f1cd0) To do this, find the **Group Nav 0/1/5 - Launch & Settings** group. Within this group is a reusable element called **admin\_options.** Within this is another reusable called **admin\_options\_settings**. You shouldn't need to touch any of the other elements/workflows within **admin\_options**. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-Mbcf0jzyS4_oebWCvCH%2F-MbchjAC05anOs5Yo662%2Fimage.png?alt=media\&token=f092de49-e57d-4cb7-b663-fb6c282c36e9) Once inside **admin\_options\_settings**, you will have access to two button-style groups within **Group Collapsible admin-defined options group**, one of which launches a popup with a single input, and another which launches a pick-list of options. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-Mbcf0jzyS4_oebWCvCH%2F-MbcjcPSlBG_uabTXYV5%2Fimage.png?alt=media\&token=285f12ed-c80d-4a25-8823-e5b0ff60e19d) The single field popup is updating a dummy field in the website object called **dummy option** and the sample picklist popup is displaying a list of dummy data. You should connect up your own data and logic to the buttons and corresponding popups. The add and delete features in the sample picklist popup are disabled by default - you must go into the Bubble editor and enable the add/delete features in order for them to work. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-Mbcf0jzyS4_oebWCvCH%2F-Mbck7wTN5Osk3RZUN-3%2Fimage.png?alt=media\&token=d88ef78c-c487-44f8-bb9b-b7f32a0509fb) ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-Mbcf0jzyS4_oebWCvCH%2F-Mbck1z7DrQW10Bxs1WK%2Fimage.png?alt=media\&token=5da590c2-7901-4bdf-92bf-2927b7f59233) To add additional options to this area, the groups and popups which are used here should be cloned. You can adjust the collapsing range of the reusable using **Group PLACEHOLDER**. If you’d like to hide these options entirely, you should go to the reusable, select **Group Collapsible admin-defined options group** and uncheck *This element is visible* on the conditional tab. ### Analytics View statistics for your users such a total users, recent signups, and active users. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MPGwzcx0s1nKUFMSyJw%2F-MPHAf89LCHcx_2mAyAP%2Fimage.png?alt=media\&token=3a89cfa2-db51-473f-8a10-9c48247f9301) ### Users View all the users in your application, reset passwords, add new admin, and filter by status, name, and role. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MPGwzcx0s1nKUFMSyJw%2F-MPHA2_1SH70VI9E7Ddl%2Fimage.png?alt=media\&token=d9c99474-7450-4221-889a-aba59e5c8106) ## Extending the Admin Portal To extend the admin portal and customize it for your application, the Canvas Base template comes with a placeholder table group that can be copied and customized to add additional views and functionality for your data. You can find this group in the elements tree as **Group Nav 8 - Data type 1 content**. On the page this group is located directly below 'Group Nav 7 - Users'. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MbcWjK2MjNiH6nI6Rgg%2F-MbcZASDek7conMcBQlz%2Fimage.png?alt=media\&token=a93d9fa6-7ecf-4116-89cb-b094e3c6d0a7) This group contains a reusable element called **admin\_datatype1** which contains dummy data. Make the following changes to customize it for your needs. **General** 1. Update the titles for the **Group Nav 8 - Data type 1 content** and **admin\_datatype1** groups (i.e, you might have **Group Nav 8 - Posts** and **admin\_posts**) 2. Edit the the **New** button and add an action when it is clicked 3. Add an action for the **Data** button if needed ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MbcWjK2MjNiH6nI6Rgg%2F-MbcbA_moJsiaP4Ytl7v%2Fimage.png?alt=media\&token=d3476aea-17aa-435a-ad49-a9cf3392e7b8) #### Set up the repeating group From inside the reusable elements **admin\_datatype1**, you should: 1. Data to display 1. Change the title and data type of the element RepeatingGroup Dummy 2. Define a data source for the repeating group 2. Set up the table 1. Update/add headers in the text elements placed above the repeating group. 2. Define the dynamic content that corresponds with the headers and will be displayed by the repeating group. 3. Set up the text that is displayed when no data is found. This is nested under Group inner dummy content > Group no entries. ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MbcWjK2MjNiH6nI6Rgg%2F-Mbcc0Zn3_bzsuxckW61%2Fimage.png?alt=media\&token=ed120516-77a7-4872-ade4-d22d578fa3b3) #### Navigation From the admin page, you should 1. Open FloatingGroup Sidebar\_website > Group inner sidebar tab\_website > Group Main Nav 9 - Data type 1\_text 2. Change the data source for this group to the text you would like to display in the navigation bar ![](https://47992944-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LYJWnUT3lUFQk1K9BCK%2F-MbcWjK2MjNiH6nI6Rgg%2F-MbccVyiOC-ZlGLFqgUw%2Fimage.png?alt=media\&token=26a4a68e-2479-47c7-86e6-e8bc36ca3241) After each change you make here, make sure to view the web page in version-test in order to check whether it works as expected. ## Adding additional tabs to the Admin portal To add additional tabs to the admin portal, duplicate the **Group Nav 8 - Data type 1 content** and the **admin\_datatype1** reusable elements we customized above. {% hint style="info" %} Change the text after the hyphen in the group name to represent the data type it is displaying. For instance, if we were displaying invoices in the Group Nav 9 element we should change the name to 'Group Nav 9 - Invoices'. {% endhint %} The steps are nearly the same as above but you will need to take the following additional steps. #### **Replace the reusable element** In your new, parent content group (**Group Nav 9 - Data type 2 content**, for example), you'll need to replace the **admin\_datatype1** reusable, which was copied along with the parent group, with your new reusable (**admin\_datatype2**, for example). #### Reposition the new group Move your duplicated group underneath Group Nav 8 so the top of your new group snaps to the bottom of the Group Nav 8. #### Resize the placeholder group Drag the top of the 'Group PLACEHOLDER (do not delete) until the top edge snaps to the bottom of the new group you created #### Update the conditional references Change the reference in the conditional from 'Group Main Nav 8 - Data type 1\_text' to 'Group Main Nav 9 - Data type 2\_text' You're all set! You can duplicate the steps above to add as many new data tables as you like! These guidelines are specific to the Admin portal, but they can be useful as a common design pattern to follow for a portal/dashboard page.