Design Studio 1.6 - Visualizing Row Selections in Scorecard

[Karol-K]

Starting u with the scorecard component (Design Studio 1.6 - View on Scorecard Component) and understanding the property selection models (Design Studio 1.6 - Advanced Selection in Scorecard) brings us to next topic - customization of the visualization.

Introduction

Basically, the scorecard component primary use is nice visualization of data with flexibility in column definition. For this reason, some "table" properties (as scorecard "runtime" is sap UI5 table) have been overwritten in the component specific CSS. Otherwise many properties on cell level would be not possible to overwrite (borders, backgrounds).

Now, there is also selection option in scorecard, actually 4:

* cell

* single row

* multiple row

* multiple row (toggle) - this is like multiple, but you can toggle the rows.

When you switch on the selection, you get a scorecard like this one:



On left side, you can see additional column which allows you to select the complete row. This is, in comparison to the cell selection (which is handled actually as cell click and does not "select" anything) a way for selection of the row - and by that it is reflected also in the scorecard model.

The Question

Is it possible to visualize the selected row?

In standard, scorecard is only visualizing selection in the first column, which is specially there for the marking of selected row. But, as there is information of the selected row, and all cells know that they are in "selected" mode, you can change the behavior.

How to Visualize Selection?

First,

you need to pay attention that the cells have possibility to define background. default is white, so you need change this definition. -> put all cell backgrounds on "transparent". This is what you get:



ok, not exactly nice - but important for the first step. Explanation is technical, so only for those who want... the background of the cell is in DIV inside of TR>TD, and the row is actually TR element.

Second,

let us make the scorecard again nice - I put on scorecard additional css class:

.myCustomScorecard .sapXTableMain {

  background-color: white!important;

}

the class "sapXTableMain" is assigned to scorecard component, so when you define overwrite rule, you can change some properties.

do not forget to assign new class to the component itself.



what this will change? now the background is set on scorecard component, and the cells are transparent. result:



ok, now our scorecard is looking same as in the beginning, but is prepared for more changes.

Third,

now, I give you 2 mode classes, which you can overwrite to bring:

1/ the hover effect

2/ the row selection effect

HOVER

.myCustomScorecard .sapXTableMain tr.sapUiTableRowHvr>td {

  background-color: red!important;

}

.myCustomScorecard .sapXTableMain tr.sapUiTableRowHvr {

  background-color: red!important;

}

SELECTION

.myCustomScorecard .sapXTableMain .sapUiTableCtrl tr:not(.sapUiTableGroupHeader).sapUiTableRowSel > td {

  background-color: green!important;

}

Making this changes, you get following result:



and animated..



Now, the hover effect is RED and row selection is GREEN. So you can better mark the selected row(s) and visualize it for the users.

How the Icons come to Scorecard?

There is a property "Icon", this one is active only when property "Display Mode" is not "Text Only".

Icon can have a link to image (must be stored on server) or use the "sap-icon://<name>" notation for access to SAP UI5 library.

Here is an example how to make icons depending on status:



In addition, you can add also similar conditional display to property "Color" and then the icon will be also formatted (works firs in 1.6 SP2 release)

Example

The example can be downloaded here:

applications/SCORECARD_SELECTION_MODEL-20160211175303.zip at master · org-scn-design-studio-communit...

hope it helps