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.
