SAP BusinessObjects Design Studio: Design

Studio SDK: UI5 Table with Conditional

Formats
Posted by Karol Kalisz Sep 24, 2015
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:
[

Generated by Jive on 2015-09-25+02:00

1

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

{"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

Generated by Jive on 2015-09-25+02:00

2

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

{"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:

Generated by Jive on 2015-09-25+02:00

3

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

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.

Generated by Jive on 2015-09-25+02:00

4

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

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>"

Generated by Jive on 2015-09-25+02:00

5

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

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
218 Views Tags: zen, sapzen, business_objects_design_studio, design_studio,
sapbusinessobjectsdesignstudio, sapdesignstudio, sap_design_studio, sap_zen, sap_bo_design_studio

Karol Kalisz in response to Harish Nayak on page 6

Sep 24, 2015 6:46 PM
Hi Harish,
ok, I have found a simple way - based on the column id, either the dimension ID or measure ID. please check it
up. the blog above is updated. package is rebuild.
Karol
Karol Kalisz in response to Harish Nayak on page 6
Sep 24, 2015 6:07 PM
not yet, I need to think about.
Harish Nayak
Sep 24, 2015 11:58 AM
Hi Karol,
Thanks for sharing the information. This is very helpful.

Generated by Jive on 2015-09-25+02:00

6

SAP BusinessObjects Design Studio: Design Studio SDK: UI5 Table with Conditional Formats

Is it possible to highlight conditional format for specific columns?

Example:
1) Red and Green for "Store Sales" Column - If value< 2 the Red else Green
2) Yellow and Blue for "Unit Sales" Column - If Value<5 then Yellow else Blue.
Please let me know.
Thanks,
Harish Nayak

Generated by Jive on 2015-09-25+02:00

7