Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Karol-K
Advisor
Advisor

Following the blog Design Studio SDK: New Features in UI5 Table, today the Conditional Format function.

if you want to:

* display the data from any data source in a table

* highlight some cell values based on conditions, like this below:

then this blog is for you.

The baseline.

This is an extension of the UI5 Table component, as here -Design Studio SDK: UI5 Table Component.

The idea.

The community flatten functions provided by Mike (and a bit extended by me) are capable to flatten the result set into the table row/cols specification. This allows easy access on cell level to the data - and to the members. It means, the evaluation is made on CONTENT basis, not on logical dimension / member / measure basis. But this is enough for some start.

The rules need to be given as an JSON Array:


[


    {"condition": "value", "sign": ">", "value":"4", "simpleFormat": "green2"},


    {"condition": "value", "sign": "<", "value":"3", "simpleFormat": "red2"},


    {"condition": "contains", "members": ["Brewer", "Zavala"], "exclude": false, "simpleFormat": "yellow1"}


]





the rules can be checked in 3 ways:

* Match First (then ignore others)

* Match Last (last always win)

* Collect (check all and place the assigned "simpleFormats" into an array

The "simpleFormat" is a string which is passed into special attribute on the table


data-condformat="<the dimple format string>"





and it allows you to select this content via "normal" css selector. Some selectors are already build in, but you can freely add your own.

Example for CSS class


div[class~=scn-pack-ActivateSimpleConditions] td>div>label[data-condformat="green1"] {


    background-color: #9fff9f!important;


}



you just need to replace "green1" with your own string passed as simpleFormat





Conditional Options

Then, we have following evaluation options:

contains

checks if the content contains given strings.

positive check

{"condition": "contains", "members": ["Berlin", "Munich"], "simpleFormat": "red1"}

negative check (exclude)

{"condition": "contains", "members": ["Berlin", "Munich"], "exclude": true, "simpleFormat": "red1"}

pattern

check the content for existence of some characters. you can use '?' to accept any character. Character '*' stops the check and returns the current state.


positive check


{"condition": "pattern", "members": ["Be??in*", "Mun*"], "simpleFormat": "red1"}



this should match all Be<here 2 characters which does not matter>in<and here any characters>


OR


Mun<and any character





equals

Like contains, but checks on exact content. also possible with exclude flag.


positive check


{"condition": "equals", "members": ["Berlin", "Munich"], "simpleFormat": "red1"}





empty

Checks for empty cells, can also be used with exclude flag, then non empty cells will be marked.


positive check


{"condition": "empty", "simpleFormat": "red1"}





value

works only for numbers, compares the content with given number.


positive check


{"condition": "value", "sign": ">", "value":"4", "simpleFormat": "green2"},





APS Update

The rules can be maintained in additional proeprties, so now no JSON is requried.

The maintenance does not need to be made by JSON any more, an UI is available for it:

All is available in the preview / stable as of now. If someone is willing to test / double check - you are welcome.

Restricting the Conditions to Columns

With this property you can additionally restrict applying of the conditions to some columns only. you need to place the key of the dimension/measure which is in this column.

In this case, the key of "Unit Sales" is "unit_sales" and then this condition will be applied only to "unit sales" column.

I hope this helps.

Btw, in case you have 2 dimensions in columns, this works as well - you need to make the "Column Header Id" as combination of those:

my drill down here:

The required ID: "<gender id> | <measure id>"

the release package is updated with this function now.

Help / API Specification

Go directly to the help site and find the component: Component List - SCN Design Studio Community

Download & Use

This component is available on the community package

More information on the SCN community package in blog  SCN Design Studio SDK Development Community

Example as BIAPP:

org-scn-design-studio-community/applications · GitHub

Any thoughts?

feel free to add as usual...

Enhancements Ideas?

if you have good ideas (to those who would like to contribute but cannot code...) - place an "issue" with tag "enhancement" under Issues · org-scn-design-studio-community/sdkpackage · GitHub

16 Comments