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
- go to Component List - SCN Design Studio Community
- for download use the button on right upper side "Free Download"
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
- SAP Managed Tags:
16 Comments
