Mobile Dashboard Editor#
The mobile dashboard editor is a new addition to the dashboard editing tool. It allows you to edit and maintain a mobile version for each dashboard. The web and mobile versions of a dashboard share the same URL.
While the web mode of a dashboard renders on all web-like and tablet screens, the mobile mode of a dashboard renders on all mobile-like screens.
Different Modes of the Same Dashboard#
Widgets are primarily designed for desktop screens.
Although widgets work on mobile as well, they need to be manually adjusted and reconfigured bearing in mind that the User Experience offered on a web dashboard is a very different one from the experience offered on the mobile dashboard.
In the dashboard edit mode, the user is shown desktop and mobile device icons to switch from one mode to the other.
The Leading Dashboard#
As the desktop mode of a dashboard is the primary focus, this is reflected in the dashboard editing UI as well.
You will start by building and saving the web mode of a dashboard first.
Afterward, you can navigate to the mobile version of it, where you will see the same layers and widgets. You can edit the mobile mode by resizing, reordering, adding, deleting, and reconfiguring the existing widgets.
Once edited, the mobile mode is not in sync with the web mode anymore. Instead, it starts living as an independent mode for mobile.
Tip: You can at any point re-sync the two modes, but re-syncing is uni-directional, i.e., it copies the layers and widgets from the web mode to the mobile and not the other way around.
Mobile Dashboard Editor#
The Dashboard Edit mode has a toggle button to switch from the Dashboard mode to the Mobile mode and vice-versa.
In the mobile mode, the dashboard is displayed inside a mobile frame to show the canvas where the widgets can be placed.
A sync button used to turn the sync on / off between the two.
Note: The sync is turned on by default.
Edit Mode Details#
The following are notes relating to the mobile edit mode:
Dashboard properties are the same for both modes.
When a dashboard is created and saved for the very first time, the mobile mode is by default synced to it.
When a user goes to the mobile mode, he can see that the sync between the two modes is on.
Widgets are stacked one below the other.
Widgets are scrolled vertically.
Widgets occupy the entire width of the mobile screen for good UX.
It is not possible to resize the width of the widgets.
It is possible to resize the height of the widgets as needed.
It is possible to drag and reorder the widgets.
Some widgets have reduced configuration options based on optimization for mobile.
Some widgets offer bad UX on mobile. In that case, a
not supported on mobilemessage is displayed for that widget.Once the user makes changes to the original mobile mode of a dashboard, the sync gets turned off.
When the user turns the sync off, they get a message conveying that the mobile mode won’t sync with the web mode anymore.
If the user turns the sync on again, they get a confirmation dialog notifying the user that all current configurations for mobile mode will be over-written and revert to the web mode.
When the user turns the sync on, the editor tree panel, config panel, and the dashboard get replaced with the web mode version.
Sync is a uni-directional action. Only the mobile mode syncs up with the web mode of the dashboard.
On saving a dashboard, the changes made to both modes are saved.
Display Details#
The web mode of a dashboard will render on all web-like and tablet screens.
The mobile mode of a dashboard will render on all mobile-like screens.
The potrait and the landscape mode of the mobile remains the same, i.e. widgets scroll vertically and occupy the entire width of the screen.