Conditional Formatting has been traditionally used in visualizations & tables to bring attention to specific data values by formatting them differently (red = alert, green = good) based on one or more conditions. Hence the name conditional formatting.
In SAP Design Studio 1.6, there were some limitations in using Conditional Formatting:
- Conditional Formatting Rules had to be defined at the BEx query level (or in Analysis for Office) so that they could be viewed on Crosstabs or InfoCharts in the front-end
- Rules had to be individually defined (sometimes repeatedly) on each Chart you wanted to apply them on.
With SAP Lumira Designer, it is possible to:
- Define Conditional Formatting rules within the SAP Lumira Designer development environment
- Define rules globally and apply them to required components
- Define & modify rules during runtime
In this blog, we shall see how to
- Define conditional formatting rules during design time
- Apply or edit rules during runtime using the context menu
- Apply or edit rules during runtime using scripting
1. Implementing Conditional Formatting During Design Time
Implementing Conditional Formatting during design time requires the following three steps.
1.1 Create Conditional Formatting During Design Time
Rules must be set up as a separate ‘Technical Component’ within SAP Lumira Designer. This helps us define rules once and apply to one one or more components, without having to repeat rule definitions for each component.
Note: You can only create one ‘Conditional Formatting Settings’ technical component in a SAP Lumira Discovery application. This single component can accommodate one or multiple rules that can be applied selectively to one or more component(s).
1.2 Create/Edit Rules Within the Conditional Formatting Rule Manager
After creating the Conditional Formatting Settings Technical Component, individual formatting rules can be set up using the ‘Rules’ property (in the Properties sheet).
Clicking on the ‘Rules’ property brings up the Conditional Formatting Rule Manager, where the required conditions or formatting rules can be created or edited.
Rule definitions can be based on Measures or a Dimension. All the measures/dimensions available in the data sources used in the application are listed in the formatting rule editor. Measures can be compared against a hard-coded threshold value:
In case of formatting rules based on dimensions, the member of the dimension needs to be defined as the threshold value:
1.3 Assigning Conditional Formatting to UI Elements
Once the rules have been defined under the technical component, these rules can be applied to Charts and Crosstabs within the application using the ‘Conditional Formatting Settings’ property. One or more rules from the list of rules defined in the Technical Component can be applied to the component. Note that the property ‘Conditional Formatting Visible’ must be set to ‘true’ for the formatting to be visible during runtime.
A crosstab with conditional formatting applied looks like this:
2. Implementing Conditional Formatting During Runtime
SAP Lumira Designer allows users to set Conditional Formatting rules at runtime.
However, one pre-requisite for this is to have the Conditional Formatting Technical Component set up during design-time.
Note: One exception to this pre-requisite is the Crosstab component which can work even without the technical component set up during design time. However the runtime Conditional Formatting rules manager looks different in this case. See image attached for the crosstab component without a ‘Conditional Formatting Settings’ technical component set up during design time. Note that rules based on Dimensions cannot be applied to the crosstab in this case.
When the ‘Conditional Formatting Settings’ technical component is added during design time and assigned to the crosstab, the front-end UI changes as shown below. As shown, rules based on Measures and Dimensions are both available.
During runtime, rules already defined during Design Time can be added, modified or deleted – but such changes are not persistent. They would be applicable and available only for that particular session.
3. Implementing Conditional Formatting During Runtime Using Scripting
Run time Conditional formatting can also be enabled using scripting. For example,the following script can be written on the ‘On Click’ event of a Button, for instance, to add rules to a crosstab in the application:
Upon clicking the button during runtime, the user would see the Conditional Formatting Rules Manager.
Note: For this to happen, first the Conditional Formatting Settings component needs to be added to the application, and the ‘Conditional Formatting Visible’ property needs to be set to ‘true’ for the component.
- Any rules that are defined at runtime are available only during that particular session.
- Any rules that are defined during design-time or run-time override conditional formatting configured at the BEx Query level
SAP Lumira Designer provides robust conditional formatting, but is limited to only static conditional formatting, i.e, the threshold values for the conditions have to be hard coded. So, in case your conditions are dynamic in nature, involving calculations across measures in the data source, please refer – Dynamic Conditional Formatting in SAP Lumira Designer.
Got questions? Click here to get in touch.