Mobile-friendly consoles and dashboards in mWater Portal
Consoles and dashboards now allow users to define and preview how they will appear on smaller screens like smartphones and tablets. Consoles will automatically move to compact mode when viewed on small screens. Dashboards now have a Layout button where users can set the mobile responsive parameters. The default parameters will adapt to most screen sizes, but users can tweak these settings to ensure the desired appearance on screen sizes of their choosing for more control.
Contents
Consoles
Compact mode
Click the Edit Tabs button to change "Use compact mode at width" setting. On screen sizes smaller than the specified resolution, the console will use compact mode. In compact mode, the console tabs collapse into a dropdown and the controls collapse into a gear menu.
While in compact mode, clicking on the current tab will produce a popup to switch tabs (see below).
Fullscreen
Consoles now include a fullscreen mode, which is great for mobile devices or data presentations. To use fullscreen in compact mode, click the gear icon and click "Fullscreen". This will remove the operating system bar, browser bar, and mWater portal header in order to provide a larger viewing area.
For mobile devices
For presentations
Editing tabs
Modifying, deleting, and reordering tabs can now be done from the edit tabs popup.
Modifying tab names - Click on the tab name and write the new name in the popup
Deleting - Click the x button next to the tab Warning: Deleting tabs cannot be undone
Reordering - Click the bar menu to the left of the tab name and drag it to the desired location.
Dashboards
The default settings now allow most dashboards to adapt automatically to small screen sizes without changing any layout parameters. To manually change these parameters:
Click the Edit button
Click the Layout button
View and modify the dashboard's responsive settings
Themes
Themes define the overall look of a dashboard and predefine some of the mobile responsive parameters.
Classic Dashboard -Has a white background that is optimized for data visualizations with minimal text. This format will typically fill the entire width of a desktop screen to maximize the usage of screen space.
Framed Dashboard - The same as the classic theme except that the background of the page is grey. When printed, these dashboards will still print on a white background but contain borders around each widget.
Story Dashboard - Has a white background on a page that is optimized for text and photos. Scaling down of the text size will only occur on smartphones (<400 pixels). The width of the text will only fill the screen at resolutions of laptop sizes or below (<1000pixels). On larger screens, it will insert padding on the right and left margins to keep the text at a consistent width.
Note: The dashboard used for this resource article uses the Story theme.
Preview as
The buttons in the "Preview as" section allow users to preview the dashboard as it will appear on various device types, including Phone, Tablet, Laptop, and Desktop.
Standard device sizes that are used are:
Desktop (1280 x 1024 pixels)
Laptop (1000 x 800 pixels)
Tablet (768 x 1024 pixels)
Phone (360 x 640 pixels)
Note: If you are designing for a specific device that doesn't have one of these standard resolutions, then you may use the next largest screen size to estimate how it will appear on the device. This may differ in appearance a little when viewed on a slightly smaller device.
Advanced settings
The advanced settings section is where users can set the parameters for various responsive behaviors.
Collapse to Single Column
While desktop and laptop screens are typically wider than they are tall with an aspect ratio of around 1.2:1, mobile devices are taller than they are wide with an aspect ratio between 1:1.3 and 1:2. Many dashboards are set up with modules placed next to each other horizontally. In order to fit nicely on mobile device screens, these horizontal widgets can be collapsed to be displayed one after another vertically instead. By changing the value of Collapse to Single Column users can define the screen size at which horizontal columns collapse into a single column.
Hide Quickfilters
Dashboards can contain various quickfilters at the top, which allow users to filter down a specific set of data. On smaller screens, these quick filters can take up a lot of the available screen space. By setting the Hide Quickfilters parameter, users can define the screen size at which filters will automatically collapse. Quickfilters can be manually expanded or collapsed by clicking the buttons below.
Collapse quickfilters
Expand quickfilters
Minimum Width (before scrolling or scaling)
Users need to decide whether widgets should be Scaled-down at small screen sizes or if they should stay the same size, and users should Scroll horizontally to see them entirely. By setting the Minimum width, users can define the screen size at which either of these behaviors takes effect.
Scale
The scale option will resize the widget to fit entirely on the smaller screen. This is the default method because it is the most commonly used.
Scroll
The scroll option will keep the widget size the same but adds scroll bars. The widget will be cut off at the right and bottom sides because it is too large for the page. The scroll bars allow users to scroll to view the rest of the widget.
Maximum Width (before padding)
This parameter is used to define the behavior of the dashboard on larger screens. It is sometimes preferable on larger screens for the width of the content to have a maximum width that it cannot exceed. As shown below, if the screen resolution is wider than this width, the dashboard will add padding (blank space) on either side of the content. This parameter is used to limit the page width in the Story theme, which is the same theme that this dashboard is using.
