This is the final post in my tutorial series on the Self-Service template, which allows Logi Studio users to create dashboards and reports, distribute them, and collaborate with others in a web-based application. Now we’ll talk about how to create responsive dashboards that will present consistent dashboard reports no matter what type of screen or device they are viewed on.
>> Related: How to Customize the Self-Service Master Layout <<
Responsive behavior allows you to create a single report just once and automatically modify the style/width/height so that it looks the same on any device. The Dashboard element in Logi Studio is not responsive out of the box, but it’s relatively simple to transform by modifying the CSS and allowing the columns to stack over eachother when in a mobile view.
Figure 1 below shows the unresponsive dashboard that we will modify.
Step 1: Go to Logi Studio.
Step 2: Review CSS file (Note: In our example, it is called ResponsiveDashboard2.css).
In ResponsiveDashboard2.css, we specify a width of at least 900 pixels (this is variable according to your own preferences). If the device is less than the width, then the application will use the CSS style to make it responsive.
Step 3: Open the _Shared report under Reports (which includes the JavaScript Includes and CSS files Includes) to point the Style Sheet Attribute to the custom CSS file.
Step 3: Save the changes.
Step 4: Refresh the Dashboard page and go to Web Inspector → Device viewer to see the results on various devices and screen sizes.
And voila! You now have a responsive dashboard that will look consistent on any device!
To learn more about self-service styling in Logi Studio, read our previous blogs in this tutorial series:
