Build a Dashboard Page in Blocks
Dashboard pages are the backoffice of your app, allowing site builders to manage the app's data and settings. You can see examples of Dashboard Pages in the Wix apps.
Read our UX guidelins to build usefull and successful Dashboard pages.
Create a Dashboard Page
Add a Dashboard Page to your Blocks app through the App Dashboard icon in the left menu.
Your Dashboard page includes:
- A canvas where you can add elements, such as layout tools, buttons, input texts fields and so on. Blocks provides a template for a commonly used Dashboard user-interface (UI). Of course, you can customize this template. Design your Dashboard page just like you design widgets in Blocks.
- A code section to add code to your dashboard.
Important Currently, you can only create one Dashboard page for your Blocks app.
Using multi-state boxes in Dashboard pages
Multi-state boxes can be especially useful in Dashboard pages. They can help you create:
-
Several inner pages
-
A wizard
-
Empty states or loadings states
For example, the Dashboard of a "Members" app can have a multi-state box, so that site builders see a list of the members as default, and another type if they click "Add Member".
This is the first state of the multi-state-box in the Dashboard page:
This is the second state:
Assign a Dashboard Page to an Action Button
One of the most common ways to open a Dashboard page is from the Main Action Button in one of your widget's Action Buttons. To do this:
- Go to the Editor Experience
Configuration tab.
- Click on the widget or element that you want to configure.
- Click Edit Action Bar.
- Hover over the main action button (the left button).
- Click Action Button Settings.
- Select Dashboard.
- Select your Dashboard page.
Add code to your Dashboard Page
Use your Dashboard page's code section to add code to your Dashboard page. Your code can include:
- Business logic, similar to your widgets (Learn more about widget code).
- Working with the data stored in your app's collections (Learn more about collections in Blocks
- Unique actions for Dashboard Pages (Learn more about the wix-dashboard functions).
To add code to your Dashboard Page:
- Open your Dashboard from the App Dashboard
menu.
- Go to your Dashboard's code section (if you don't see the code section, click the Maximize
icon).
Open a Dashboard Page from a Custom Panel
You might want to open the Dashboard from a custom panels code that you built. Do this in two steps:
First, get your Dashboard's URL.
- Go to the App Dashboard
menu.
- Hover over the Dashboard page's name and click the More Actions
icon.
- Click Copy Link.
Now, use this URL in the panel code.
-
Go to the Editor Experience
Panels tab.
-
Select your panel from the Custom Panels list.
-
Go to the panel's code section (if you don't see the code section, Click the Maximize
icon).
-
Import the wix-editor module:
Copy1 -
Use the openDashboardPanel() function, with the Dashboard URL as a parameter, to open your Dashboard page from the panel. For example:
Copy1