Topics Covered:
- Limitations of mobile widgets
- Testing methods
- Best Practices
- Sizing for mobile
Limitations Of Mobile Widgets
- All widgets are put into a single row
- Widgets are given a height of approximately 650px
- Pivot tables render poorly (text is shrunk significantly)
This dashboard viewed at full resolution becomes...
Stacked on mobile view with widgets taking approx 650px
Testing - How To Preview Mobile In The Browser
- In the development console (press F12 to access with windows) click on the mobile icon (red arrow)
- Select the view you would like to preview (green arrow)
- Refresh the dashboard to see the updated mobile view
Best Practices
TEXT
There are cases where the text widget does not wrap appropriately.
If after testing you see this is the case, then BloX should be used with the 'wrap' text configuration enabled.
INDICATORS
These widgets are great for starting a dashboard and informing the viewer of the most important metrics.
These simple widgets are great for side by side viewing, but this is not possible with the standard indicator widget in mobile.
To address this we can create a BloX widget with column sets that will maintain side by side viewing.
TABLES
Don't use pivot tables!
Use the supported table with aggregation plugin to show tabular results.
This plugin scales for smaller screens by showing only the first 4 columns and giving the user an option to click on the row and display additional column results for it.
Vertical Sizing For Mobile - Optimizing With JavaScript
In order to override the automatic sizing provided by Sisense mobile, you can use the following widget script to hardcode widget heights.
widget.on('ready', ()=>{
$(element).parent().height('250');
})
$(element).parent().height('250');
})
Additionally, you may want to remove the title area from the widgets. This may be done with the following dashboard script.
dashboard.on('widgetinitialized', function(w, args) {
$('widget-header').remove();
});
$('widget-header').remove();
});
