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.
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 |
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.${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.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 |
return
statement is mandatory for your JavaScript expressions to function correctly. This is a fundamental requirement that ensures your computed values are properly evaluated and applied to UI elements.
Technical Reason: Computed values are executed as JavaScript functions in the UI Designer’s evaluation engine. Like any JavaScript function, they must explicitly return a value to provide output to the calling context.
return
statement. Without it, your expression will not produce any output, and the UI element will not receive the expected value.
return
statement, your computed value will evaluate to undefined
, which can cause:return
statement.
null
, undefined
, empty stringsreturn
statement${}
correctlyundefined
valuesreturn
return
statements for all possible conditionsreturn ${application.value} || "default value"
${}
syntaxparseInt()
or parseFloat()
for numeric operationsif (typeof ${application.value} === 'number')
${}
syntax, not regular JavaScript variablesreturn
statement is not optional in computed values—it’s a requirement. When testing your computed value rules:
return
statements in your JavaScript expressionsreturn
statement, your computed values will not function as expected, and your UI elements will not receive the calculated values they need to display correctly. This is the #1 cause of computed value failures.