Wix Blocks: Creating and Managing Blocks Dashboard Pages

6 min read
Wix Blocks is open to all Wix Studio users. To get access to Blocks, join Wix Studio.
Blocks enables you to add a Dashboard Page to your app. Dashboard pages are the back office 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. For example, this is a Dashboard Page from the Wix Portfolio app:
example dashboard
When a site builder installs your Blocks app on a site, the Dashboard page appears on their site's Dashboard and is named after your application. 
see the dashboard in the editor

Create a Dashboard Page

Add a Dashboard Page to your Blocks app through the App Dashboard dashboard icon icon in the App Structure app structure menu 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. 

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: 
  1. Go to the Configuration tab.
  2. Click on the widget or element that you want to configure. 
  3. Click Edit Action Bar
  4. Hover over the main action button (the left button).
  5. Click Action Button Settings.  
action button settings
  1. Select Dashboard
  2. Select your Dashboard page. 
main action settings

Open a Dashboard Page from a Custom Panel

If you built a custom panel with the Blocks panel builder, you might want to open the Dashboard from that panel. (Learn more about Blocks panels). To do this: 
First, get your Dashboard's URL.
  1. Go to the App Dashboard app dashboard menu. 
  2. Hover over the Dashboard page's name and click the More Actions  icon.
  3. Click Copy Link.  

Now, use this URL in the panel code. 
  1. Go to the Panels tab. 
  2. Select your panel from the My Panels menu. 
  3. Go to the panel's code section (if you don't see the code section, Click the Maximize maximize icon icon).
  4. Import the wix-editor module:
1import wixEditor from 'wix-editor';
  1. Use the openDashboardPanel() function, with the Dashboard URL as a parameter, to open your Dashboard page from the panel. For example: 
1wixEditor.openDashboardPanel('app/771680a8-ad76-4a3c-8bfc-4e2873de96c9'); 

Add code to your Dashboard Page

Use your Dashboard page's code section to add code to your Dashboard page. Your code can include:

To add code to your Dashboard Page:
  1. Open your Dashboard from the App Dashboard menu. 
  2. Go to your Dashboard's code section (if you don't see the code section, click the Maximize icon).

Dashboard Pages and the Wix Dev Center

Any Dashboard Page created in Blocks will also appear in your app's Components page in the Wix Developers Center. It is shown as a Blocks Dashboard component. 
Important
Do not attempt to edit your Blocks Dashboard Page through the Wix Dev Center. 
dev center components
You can also use the Wix Dev Center to create Dashboard Pages for your app. These Dashboard pages are different from the ones you create in Blocks, and consist of an iFrame URL that you provide. They do not have all the capabilities described in this article. They appear in the Wix Dev Center as a plain Dashboard component. 
dev center components
You will see both kinds of pages in your site's Dashboard, once the app in installed on a site. 

Did this help?

|