Highlight selections without direct interaction in crosstabs, scorecards and charts

[nikhil_joy2]

Introduction

We have selection enabled components in Design Studio/Lumira Designer which helps to make our dashboard interactive. Highlighting the selection is important in user experience of an application. Generally, we highlight the selection on any component with a direct interaction in it.

But, there could be a use case where we need to highlight the selection in one or more components (scorecards, charts, crosstabs etc) based on a selection in a common selector component (dropdown, listbox etc).

Below example shows such a scenario where we have a country selector which is common for the entire dashboard. User expects to highlight the selected country row in the scorecard. Here, score card is not enabled with selection.



Approach

Here, we need to identify the row number of selected country in the scorecard and apply CSS on the particular row based on the selection in drop down. If we capture the country dimension values into an array, it does not respect the sort order we apply in script. So a dynamic calculation is done in edit initial view as shown below which is nothing but a "rank" based on a key figure. As the data source is already sorted in my case based on CY, I just used "count" option on another key figure in order to ensure distinct value for each row. (in rare scenario where base key figure is same, rank value can be same for multiple rows).



 

It is nothing but a "rank" key figure as shown.



I maintained CSS code for each row as shown in below example.

.tab1 .sapUiTableRowEven:nth-child(1) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}



.tab1 .sapUiTableRowOdd:nth-child(1) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}

.tab2 .sapUiTableRowEven:nth-child(2) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}



.tab2 .sapUiTableRowOdd:nth-child(2) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}





.tab3 .sapUiTableRowEven:nth-child(3) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}



.tab3 .sapUiTableRowOdd:nth-child(3) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}

.

.

.



.tabn .sapUiTableRowEven:nth-child(n) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}



.tabn .sapUiTableRowOdd:nth-child(n) div.sapXTableCellWrapperTop{



background-color:#c8c8c8 !important;



}

 

Then below code in "On Result set change" of the data source assigns dynamic CSS class to the scorecard based on the selection in dropdown.

var selcountry = DROPDOWNTG.getSelectedValue();



var selrank = DS_PI_SK.getData("00O2TJ8CAG96UHRYQV33XSWOG_Formula1", {

	"0COUNTRY": selcountry

}).value;



 cssclass = "tab"+selrank;



SCORECARD_1.setCSSClass(cssclass);

Limitations

It is recommended for highly aggregated data representation scenarios. When number of rows/bars are more, it might not be helpful. Also a "rank" or a "sort" logic is required to map the position/row number to the custom CSS classes.

Conclusion

In short, it is a workaround recommended in specific scenarios. Extended use case of similar logic can be used in many other scenarios. eg:- Top 10, Top 11-20 or dynamic rank brackets.

I welcome your suggestions and if there is more efficient ways to achieve this, please feel free to include your ideas in comment.

Regards,

Nikhil Joy