In modern application development, the ability to create dynamic and interactive user interfaces is essential for delivering personalized and responsive experiences to users. Dynamic values and computed values are powerful features that enable developers to achieve this level of flexibility and interactivity.
Dynamic values give you the flexibility to fill various UI properties at runtime, based on process parameters or substitution tags. By doing so, your application can adapt to specific scenarios or user inputs.
Use this feature to fine-tune how your application appears and behaves without needing to rebuild or redeploy. The table below outlines which UI elements support dynamic values and the corresponding properties that can accept parameters or substitution tags.
Element | Properties | Accepts |
---|---|---|
Form Elements Input, Textarea, Select, Checkbox, Radio, Switch, Datepicker, Slider, Segmented Button | - Default Value - Label - Placeholder - Helper Text - Validators - Prefix, Suffix | Yes: Process parameters or Substitution tags |
Document Preview | - Title - Subtitle | Yes: Process parameters or Substitution tags |
Card | - Title - Subtitle | Yes: Process parameters or Substitution tags |
Form | - Title | Yes: Process parameters or Substitution tags |
Message | - Message | Yes: Process parameters or Substitution tags |
Button, Upload | - Label | Yes: Process parameters or Substitution tags |
Select, Checkbox, Radio, Segmented Button (Static source type only) | - Label - Value | Substitution tags only |
Text | - Text | Yes: Process parameters or Substitution tags |
Link | - Link Text | Yes: Process parameters or Substitution tags |
Modal ( modalDismissAlert properties) | - Title - Message - ConfirmLabel - CancelLabel | Yes: Process parameters or Substitution tags |
Step | - Label | Yes: Process parameters or Substitution tags |
Tab | - Title | Yes: Process parameters or Substitution tags |
Default Value is not available for the Switch element.
test
), the application replaces it with the appropriate content at runtime. This is particularly useful for rapid localization, real-time data injection, and user-specific content.Use keys beginning with ”@@” to return their value. If a valid key isn’t found, you’ll get an empty string. If the key format is incorrect, the original string is returned.
In the preceding example, an MVEL business rule demonstrates the population of specific keys with dynamic values from the task. This JSON object, assigned to the “app” key, captures the values for various UI properties:
Note that for releases < 3.3.0, concatenating process parameters with substitution tags isn’t supported when utilizing dynamic values.
Computed values present a method to dynamically generate values using JavaScript expressions. Beyond adhering to predefined values, computed values enable the manipulation, calculation, and transformation of data grounded in particular rules or conditions.
Computed values can be created via JavaScript expressions that operate on process parameters or other variables within the application.
To introduce a computed value, you simply toggle the “Computed value” option (represented by the f(x) icon). This will transform the chosen field into a JavaScript editor.
By enabling computed values, the application provides flexibility and the ability to create dynamic and responsive user interfaces.
The instance above showcases computed values’ usage in a Slider element. JavaScript expressions are used to dynamically compute minimum and maximum values based on a value sourced from a linked input UI element (connected via the process key ${application.client.amount}
).
!isNaN(parseInt(${application.client.amount}))
: This part ascertains whether the value in the input field (${application.client.amount})
can be effectively converted to an integer using parseInt
. Moreover, it validates that the outcome isn’t NaN
(i.e., not a valid number), ensuring input validity.(0.15 * parseInt(${application.client.amount}))
.(NaN)
, the minimum value for the slider is set to 10000.!isNaN(parseInt(${application.client.amount}))
.(0.35 * parseInt(${application.client.amount}))
.(NaN)
, the maximum value for the slider is set to 20000.In summary, the above expressions provide a dynamic range for the slider based on the value entered on the input field. If a valid numeric value is entered, the slider’s range will be dynamically adjusted between 15% and 35% of that value. If the input is not a valid number, a default range of 10000 to 20000 is set for the slider. This can be useful for scenarios where you want the slider’s range to be proportional to a user-provided value.
The following scenario outlines the functionality and implementation of dynamically displayed property types via a text UI element. This is done based on the chosen loan type through a select UI element in a user interface.
The UI in focus showcases two primary UI elements:
The following code snippet illustrates how the dynamic property types are generated based on the selected loan type (JavaScript is used):
The UI Designer allows the inclusion of JavaScript expressions for generating computed values. This functionality extends to the following UI elements and their associated properties:
Element | Properties |
---|---|
Slider | min Value, max Value, default Value |
Input | Default Value |
Any UI Element that accepts validators | min, max, minLength, maxLength |
Text | Text |
Link | Link Text |
When working with computed values, it’s important to note that they are designed to be displayed as integers and strings.
For input elements (e.g., text input), you may require a default value from a process variable, while a number input may need a computed value.
In modern application development, the ability to create dynamic and interactive user interfaces is essential for delivering personalized and responsive experiences to users. Dynamic values and computed values are powerful features that enable developers to achieve this level of flexibility and interactivity.
Dynamic values give you the flexibility to fill various UI properties at runtime, based on process parameters or substitution tags. By doing so, your application can adapt to specific scenarios or user inputs.
Use this feature to fine-tune how your application appears and behaves without needing to rebuild or redeploy. The table below outlines which UI elements support dynamic values and the corresponding properties that can accept parameters or substitution tags.
Element | Properties | Accepts |
---|---|---|
Form Elements Input, Textarea, Select, Checkbox, Radio, Switch, Datepicker, Slider, Segmented Button | - Default Value - Label - Placeholder - Helper Text - Validators - Prefix, Suffix | Yes: Process parameters or Substitution tags |
Document Preview | - Title - Subtitle | Yes: Process parameters or Substitution tags |
Card | - Title - Subtitle | Yes: Process parameters or Substitution tags |
Form | - Title | Yes: Process parameters or Substitution tags |
Message | - Message | Yes: Process parameters or Substitution tags |
Button, Upload | - Label | Yes: Process parameters or Substitution tags |
Select, Checkbox, Radio, Segmented Button (Static source type only) | - Label - Value | Substitution tags only |
Text | - Text | Yes: Process parameters or Substitution tags |
Link | - Link Text | Yes: Process parameters or Substitution tags |
Modal ( modalDismissAlert properties) | - Title - Message - ConfirmLabel - CancelLabel | Yes: Process parameters or Substitution tags |
Step | - Label | Yes: Process parameters or Substitution tags |
Tab | - Title | Yes: Process parameters or Substitution tags |
Default Value is not available for the Switch element.
test
), the application replaces it with the appropriate content at runtime. This is particularly useful for rapid localization, real-time data injection, and user-specific content.Use keys beginning with ”@@” to return their value. If a valid key isn’t found, you’ll get an empty string. If the key format is incorrect, the original string is returned.
In the preceding example, an MVEL business rule demonstrates the population of specific keys with dynamic values from the task. This JSON object, assigned to the “app” key, captures the values for various UI properties:
Note that for releases < 3.3.0, concatenating process parameters with substitution tags isn’t supported when utilizing dynamic values.
Computed values present a method to dynamically generate values using JavaScript expressions. Beyond adhering to predefined values, computed values enable the manipulation, calculation, and transformation of data grounded in particular rules or conditions.
Computed values can be created via JavaScript expressions that operate on process parameters or other variables within the application.
To introduce a computed value, you simply toggle the “Computed value” option (represented by the f(x) icon). This will transform the chosen field into a JavaScript editor.
By enabling computed values, the application provides flexibility and the ability to create dynamic and responsive user interfaces.
The instance above showcases computed values’ usage in a Slider element. JavaScript expressions are used to dynamically compute minimum and maximum values based on a value sourced from a linked input UI element (connected via the process key ${application.client.amount}
).
!isNaN(parseInt(${application.client.amount}))
: This part ascertains whether the value in the input field (${application.client.amount})
can be effectively converted to an integer using parseInt
. Moreover, it validates that the outcome isn’t NaN
(i.e., not a valid number), ensuring input validity.(0.15 * parseInt(${application.client.amount}))
.(NaN)
, the minimum value for the slider is set to 10000.!isNaN(parseInt(${application.client.amount}))
.(0.35 * parseInt(${application.client.amount}))
.(NaN)
, the maximum value for the slider is set to 20000.In summary, the above expressions provide a dynamic range for the slider based on the value entered on the input field. If a valid numeric value is entered, the slider’s range will be dynamically adjusted between 15% and 35% of that value. If the input is not a valid number, a default range of 10000 to 20000 is set for the slider. This can be useful for scenarios where you want the slider’s range to be proportional to a user-provided value.
The following scenario outlines the functionality and implementation of dynamically displayed property types via a text UI element. This is done based on the chosen loan type through a select UI element in a user interface.
The UI in focus showcases two primary UI elements:
The following code snippet illustrates how the dynamic property types are generated based on the selected loan type (JavaScript is used):
The UI Designer allows the inclusion of JavaScript expressions for generating computed values. This functionality extends to the following UI elements and their associated properties:
Element | Properties |
---|---|
Slider | min Value, max Value, default Value |
Input | Default Value |
Any UI Element that accepts validators | min, max, minLength, maxLength |
Text | Text |
Link | Link Text |
When working with computed values, it’s important to note that they are designed to be displayed as integers and strings.
For input elements (e.g., text input), you may require a default value from a process variable, while a number input may need a computed value.