Enhancing SAP Analytics Cloud Dashboards with Image-Based Filters

[sraji2486]

In today's data-driven world, visual appeal and interactivity play a crucial role in how users engage with dashboards. In SAP Analytics Cloud (SAC), we often use filters to segment data based on different criteria. In this blog, I’ll share an approach to implementing image-based filters in the dashboard. Instead of a traditional checkbox for filtering, I utilized images as clickable filters, enhancing user experience while making the data selection process more intuitive.

Implementation Overview

I created a simple dashboard with continent data. To create an interactive image-based filter, I set up five script variables, each defined as an integer and initialized with a default value of 1. These script variables are  linked to images representing different continents, enabling effective tracking of user interactions.

CSS

To provide users with visual feedback when they interact with the images, I created two CSS classes.

.highlight-image {
    border: 2px solid #000000;
    background-color: #eaf0f0; /* Highlight color */
    opacity: 0.7; /* Slightly transparent to indicate selection */
}

.normal {
    /* Normal state styling */
}

When an image is clicked, it receives the highlight-image class, making it visually distinct. Clicking the image again reverts it to the normal class.

Script

For the first continent image, I implemented the following JavaScript code in the on-click edit script.

ScriptVariable_1 = ScriptVariable_1 + 1; // Increment the script variable

var Script_Array = [ScriptVariable_1, ScriptVariable_2, ScriptVariable_3, ScriptVariable_4, ScriptVariable_5];
var CC_Array = ["Africa", "Asia", "Europe", "North America", "South America"]; // Array of continents
var emptyArray = ArrayUtils.create(Type.string); // Create an empty array for filtering
var j = 0; // Index for the empty array

// Loop through script variables to build the filter array
for (var i = 0; i < 5; i++) {
    if (Script_Array[i] % 2 === 0) { // Check if the script variable is even
        emptyArray[j] = CC_Array[i]; // Add the corresponding continent to the empty array
        j++;
    }
}

// Apply filters based on selected images
if (emptyArray.length === 0) {
    // If no images are selected, apply filter for all continents
    Population.getDataSource().setDimensionFilter("Continent", CC_Array);
    GDP_Per_Capita.getDataSource().setDimensionFilter("Continent", CC_Array);
    Inflation_Rate.getDataSource().setDimensionFilter("Continent", CC_Array);
    Tax_Revenue.getDataSource().setDimensionFilter("Continent", CC_Array);
    Export_Import_Value.getDataSource().setDimensionFilter("Continent", CC_Array);
    Interest_Rate.getDataSource().setDimensionFilter("Continent", CC_Array);
    Continent_Details.getDataSource().setDimensionFilter("Continent", CC_Array);
} else {
    // If images are selected, apply the corresponding filters
    Population.getDataSource().setDimensionFilter("Continent", emptyArray);
    GDP_Per_Capita.getDataSource().setDimensionFilter("Continent", emptyArray);
    Inflation_Rate.getDataSource().setDimensionFilter("Continent", emptyArray);
    Tax_Revenue.getDataSource().setDimensionFilter("Continent", emptyArray);
    Export_Import_Value.getDataSource().setDimensionFilter("Continent", emptyArray);
    Interest_Rate.getDataSource().setDimensionFilter("Continent", emptyArray);
    Continent_Details.getDataSource().setDimensionFilter("Continent", emptyArray);
}

// Toggle CSS class for image highlighting based on script variable state
if (ScriptVariable_1 % 2 === 0) {
    Image_1.setCssClass('highlight-image'); // Apply highlight class if even
} else {
    Image_1.setCssClass('normal'); // Revert to normal class if odd
}

console.log(emptyArray); // Log the current empty array for debugging

Refresh Functionality

The dashboard also includes a refresh image that resets all filters and returns the dashboard to its initial state. When clicked, the following code executes.

// This code is executed when the refresh image is clicked

// Remove dimension filters from all data sources related to the "Continent"
Population.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Population chart
GDP_Per_Capita.getDataSource().removeDimensionFilter("Continent"); // Removes filter from GDP Per Capita chart
Inflation_Rate.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Inflation Rate chart
Tax_Revenue.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Tax Revenue chart
Export_Import_Value.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Export/Import Value chart
Interest_Rate.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Interest Rate chart
Continent_Details.getDataSource().removeDimensionFilter("Continent"); // Removes filter from Continent Details chart

// Reset the CSS class of all images to 'normal'
// This visually indicates that no images are currently selected
Image_1.setCssClass('normal'); // Reset Image 1
Image_2.setCssClass('normal'); // Reset Image 2
Image_3.setCssClass('normal'); // Reset Image 3
Image_4.setCssClass('normal'); // Reset Image 4
Image_5.setCssClass('normal'); // Reset Image 5

This code removes all dimension filters related to the continent from each chart and table in the dashboard, ensuring that all data is displayed. Additionally, it resets the CSS class of all images to normal, visually indicating that no images are selected.

How It Works

1. Incrementing the Script Variable: Each time an image is clicked, its associated script variable increments by 1. This allows us to track whether the image is selected (even) or unselected (odd).

2. Building the Filter Array: The script uses a for loop to iterate through all script variables. If a variable is even, the corresponding continent from CC_Array is added to the emptyArray.

3. Applying Filters:

   • If the emptyArray is populated (indicating that at least one image is selected), the dashboard applies filters based on the selected continents.
   • If no images are selected (the emptyArray is empty), the filter is set to include all continents from CC_Array.

4. Visual Feedback: The script toggles the CSS class for each clicked image based on the state of its associated script variable, providing immediate visual feedback to the user.

5. Reusability: This logic is repeated for all images with the respective other script variables, ensuring a consistent user experience across the dashboard.

6. Resetting Filters: The refresh button removes all applied filters, resetting the dashboard to its original state and displaying all data, while also reverting all images to their default visual style.

Dashboard Output

The dashboard, built with sample continent data, displays images representing each continent.

Initially, I clicked on Africa, Asia, Europe, and South America, which resulted in those images being highlighted and filters applied solely to the selected continents.

When I re-clicked any of the highlighted images, they returned to their normal state, and the corresponding filters were removed.

Also, clicking the refresh image in the dashboard resets all filters, restoring the dashboard to its initial state with all data visible.

Conclusion

This blog covered the implementation of an image-based filtering system in SAP Analytics Cloud, allowing users to visually filter with images. This approach enhances user interaction and makes data exploration more intuitive, offering a valuable technique for improving dashboards.

Hope this inspires you to enhance your own dashboards!

Note

Please be aware that using this method may lead to performance issues when applied to dashboards with a large number of KPIs. It is recommended to implement this approach for smaller dashboards with fewer KPIs to ensure optimal performance.