Development Tips

Logi Tutorial: How to Create Responsive Dashboards

By Joshua McClure
Share on LinkedIn Tweet about this on Twitter Share on Facebook

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:

Originally published January 16, 2018; updated on September 12th, 2019

About the Author

Josh McClure is a software developer at Logi Analytics. He's spent time in various engineering and customer solutions roles at Logi, where he's specialized in UI/UX, custom styling, and tailored solutions.