Flex UI configuration supports capabilities which allow for dynamic construction of Flex UIs or more complex device responsiveness.

Any property of any element can be specified as a string prefixed with CALC: in order to evaluate the following text as an expression and use the result as the value of the property. If any dynamic data referenced in the expression changes then the element will be regenerated with the updated property value, unless it is in the classes or styles sections, in which case it will simply dynamically update the class or style for the existing HTML element.

Apply the "nms-compact-headings" class to an element based on an expression

Another common use for CALC in Flex is to do more complex device responsiveness, for example this switches a layout from using CSS flex row display to using column instead, if the containing tool is less than a certain width (xl in this case).

The sizeAtLeast and corresponding sizeAtMost checks can be used in expressions to dynamically check against a number of predefined break points and apply different styles, classes or other element properties. The supported break points are:

 

The CALC: syntax is also used extensively in the map configuration and there is additional information about that in that section.

The if element type allows a UI element to be included based on a condition, in the then property of the element, with an optional else property defining a UI element to be included if the condition evaluates to false. If anything changes in the data being tested against then the UI will be regenerated.

The case element type allows a UI element to be generated from a list of possibilities, either by comparing a value for each entry against a field or expression, or by each entry in the list having an expression to evaluate. A final entry with no value or if property can be provided as a default if none of the other entries in the list matched.

If anything changes in the data being tested against then the UI will be regenerated.

Using a fixed value expression

 

The same as the above but using an expression on each entry

 

The for-each element type allows a UI element to be generated for each entry in a list, and if the list changes, the elements will be regenerated to match the new list. This requires some syntax to allow the referencing of data from the current list entry within the embedded element definition, so that each element generated from the list can be specific to its entry in the list. This relies on the CALC: syntax detailed earlier and by default you reference the item as $item. This can be overridden with configuration on the for-each element, for example if you had a nested for-each you would have to use a different name for the $item in the nested for-each.

Here is an example from the Update Multiple Events dialog configuration