Create, deploy, and maintain analytic applications that engage users and drive revenue. See a Logi demo

Development Tips

Logi Tutorial: How to Customize the Self-Service Master Layout

By Joshua McClure | December 26, 2017
Share on LinkedIn Tweet about this on Twitter Share on Facebook

This is the second 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 customize the Self-Service Master Layout, which wraps around your reports and allows you to apply modifications to all the report definitions.

>> Related: How to Customize Your App With Self-Service Styling <<

There are three ways to modify the Self-Service Master Layout:

  • Use Logi Studio out-of-the-box tools
  • Modify the Base Master Report Layout directly
  • Import your own CSS, JavaScript, or HTML file

Option 1: Use Logi Studio Tools

Out of the box, you can use these Logi Studio capabilities to customize the Self-Service Master Layout:

  • Theme Editor allows you to modify the CSS easily without coding. This includes supplying your own hex code or choosing a color from a color picker; changing the Color rotations and charts; and choosing a new font family, size, and colors.
  • Master Report Layout gives you a WYSIWYG tool to add headers, footers, sidebars, etc. to modify the report layout, which will apply to all reports in your application.

Option 2: Modify the Base Master Report Layout

Step 1: Go to Logi Studio.

Step 2: Open the Master Report Layout (InfoGo_GoMaster).

Step 3: Customize your Master Report for the Self-Service template directly.

Option 3: Import Your Own Customized File

In our example, we want to modify the Self-Service Analytics module in Figure 3 below by importing a CSS/JavaScript file. This should match the look and feel of the main application and create a consistent user experience across the board.

Step 1: Go to Logi Studio.

Step 2: Review the new Master Report Layout (_MasterLayout-Fluid).

This file contains the Style Includes, JavaScript Includes, and style and framework for the application layout. There is no content; it’s just a wrapper for the framework.

Step 3: Open all the relevant InfoGo Reports in the InfoGo folder:

  • GoAnalysisGrid
  • GoDashboard
  • GoDiscovery
  • GoHome
  • GoMetadata
  • GoReport
  • GoScheduleManager
  • GoThemeEditor

Step 4: Change the Master Report Element from the default InfoGo_Master to the new Master Report Layout ( _MasterLayout-Fluid).

Go to Required Attributes, and change Report Definitions to point to the new file.

Step 5: Save the Report.

Step 6: Refresh the Self-Service Module homepage to test results.

Step 7: Make the update to the rest of the reports in the InfoGo Report. Simply cut and paste the new file name in the Report Definition File field. This will ensure all your reports in the Self-Service Template have a consistent look and feel.

In the next blog in our Self-Styling series, we’ll discuss How to Modify Style for the Search Box. 

To learn more about self-service styling in Logi Studio, read our previous blog in this tutorial series: How to Customize Your App With Self-Service Styling.

 

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.

Subscribe to the latest articles, videos, and webinars from Logi.