Calculation Rules: Show UI elements dynamically

When creating custom screens in SAP Sales Cloud that contain more screen elements than average, you might want to create order in the chaos of UI elements on screen. You can statically show or hide UI elements on you custom screen. But there is a simple way to dynamically show or hide UI elements in the PDI. In our example, we have multiple search types. Depending on the search type, you want to show or hide certain result tables.

In this example we have already created a custom screen (Embedded Component) with a screen element that contains the current Search Type. The value for the Search Type is exposed in the data model for our screen:

The datamodel:

Now, for a UI element that we would like to show or hide, we go to the visibility property in the Designer View and select ‘Calculation Rule’:

The calculation rule window will pop up. Since we exposed our Search Type variable in the data model we can refer to it in our calculation rule logic:

The script in the screenshot above is a so called front-end script. It is the programming language used in the user interface designer (UI designer) to define a set of rules and the logic of the behavior of UI controls. The code snippet can be found below.

search_type=$data.SearchType
if ( search_type =="1" )
result = true
else
result = false
end

In the Calculation Rule the result variable determines if the specific UI element will be visible or not. In this particular case the logic is quite straightforward and the UI element will only be visible when the Search Type is ‘1’. In case more complex logic is required I would recommend chapter Front-End Script for the UI Designer from the Cloud Application Studio documentation, which elaborates on the front-end script syntax.