Usage of Filter Dashboard Variables – Use Cases

From version 5.2.1 of Helical Insight EE, concept of dashboard variables have been introduced. This was earlier present from version 2.0 to version 4.1 as well.

Dashboard filters values can be set using the filter options which appear when you click on the Filter icon. Aside, with this newly introduced dashboard variables, you can set the value of dashboard filter variables externally also, like by clicking on some tab or based on the username passing that specific value to a dashboard filter.

In this blog, we’ll cover how to retrieve user information such as username and organization name, as well as how to manage dashboard filter values effectively.

When working with dashboards, you may encounter requirements such as dynamically hiding elements, changing chart colors, or updating filter values based on specific conditions.

Use Case 1: Changing Report Data Based on Username (setVariable)

In this use case, we will demonstrate how to adjust report data based on the username. For example, if a user with the username hiuser logs in, the dashboard will display Domestic travel data. Conversely, if a user with the username hiadmin logs in, the dashboard will show International travel data.

Create a report with a filter labeled ‘Travel Type’, add the report to the dashboard designer, and include the Travel Type filter in the dashboard. Click on the settings ‘icon.’

Choose settings>Advance>JS

The placeholder opens, allowing us to write our JS logic and enable it and click on ‘Apply’

// Here we are storing username info. It gives loggedin username
let uname = '{{ user.name }}';

// Check if the user is 'hiuser'
if (uname === 'hiuser') {
  // Set the 'Travel Type' filter label dashboard variable to 'Domestic' for 'hiuser'
  setVariable('Travel Type', ['Domestic']);
} 
// Check if the user is 'hiadmin'
else if (uname === 'hiadmin') {
  // Set the 'Travel Type' variable to 'International' for 'hiadmin'
  setVariable('Travel Type', ['International']);
}

Save the changes and open the dashboard with the user ‘hiuser’ . It validate the JS logic which we injected, which will display Domestic data in the report. Similarly, for ‘hiadmin,’ it will show International data

In the above example we have used user name of the logged in session, in a similar way other session variables like organization name, role, profile or a combination as well can also be used.

Use Case 2 :

Conditional Styling of Report Header at the Dashboard Level Based on Filter Selection

In this use case, we will demonstrate how to dynamically style the dashboard elements based on filter values i.e. applying CSS based on certain conditions.

For example:

If the filter value is ‘Domestic’, the report header color changes to green.

If the filter value is ‘International’, the color changes to red.

Otherwise, the color changes to blue.

1. Create a report with a filter labeled ‘Travel Type’, add the report to the dashboard designer, and include the Travel Type filter in the dashboard. Click on the settings ‘icon.’

Then, open the JS editor by choosing the following option: Settings > Advanced > JS.

Inject the code below into the JS placeholder, enable it, and click on ‘Apply’.

// Define the filter variable with the exact filter label name as used in the dashboard filters.
let filter = '{{Travel Type}}';

// Check the value of the filter and apply corresponding background color
if (filter === 'Domestic') {
    // Apply green background color for 'Domestic' travel type
    document.querySelectorAll('.hi-grid-item-header').forEach(item => {
        item.style.backgroundColor = 'green';
    });
} else if (filter === 'International') {
    // Apply red background color for 'International' travel type
    document.querySelectorAll('.hi-grid-item-header').forEach(item => {
        item.style.backgroundColor = 'red';
    });
} else {
    // Apply blue background color for any other travel type
    document.querySelectorAll('.hi-grid-item-header').forEach(item => {
        item.style.backgroundColor = 'blue';
    });
}

Note : We have obtained the table header class name by inspecting the dashboard.

2. Save the dashboard and open it in a new window, then try changing the Travel Type filter values.

A. When the filter value is set to ‘Domestic’, the header will display a green color according to the logic.

B. When the filter value is set to ‘International’, the header will display a red color according to the logic.