Dynamic & computed values

​

Dynamic values

​

How it works

• Process Parameters: At runtime, values can be injected from backend logic or state, such as the outcome of an API call or an action, which then populate the relevant UI element properties.
• Substitution Tags: Whenever a UI property references a substitution tag key (e.g., 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.

​

Example using Substitution tags

​

Example using process parameters

​

Business rule example

///assigning a JSON object containing dynamic values for the specified keys to the "app" key 

output.put("app",{"label":"This is a label",
                    "title":"This is a title",
                    "placeholder":"This is a placeholder",
                    "helpertext":"This is a helper text",
                    "errorM":"This is a error message",
                    "prefix":"prx",
                    "suffix":"sfx",
                    "subtitile":"This is a subtitle",
                    "message":"This is a message",
                    "defaultV":"defaultValue",
                    "value":"Value101",
                    "value":"Value101",
                    "confirmLabel":"This is a confirm label",
                    "cancelLabel":"This is a cancel label",
                    "defaultValue":"dfs",
                    "defaultDate":"02.02.2025",
                    "defaultSlider": 90});

​

Computed values

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.

​

Slider example (parsing keys as integers)

​

Minimum Value

if ( !isNaN(parseInt(${application.client.amount})) ) {
    return 0.15 * parseInt(${application.client.amount})
}  else {
    return 10000
}

• !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.
• If the input is a valid number, the minimum value for the slider is calculated as 15% of the entered value (0.15 * parseInt(${application.client.amount})).
• If the input is not a valid number (NaN), the minimum value for the slider is set to 10000.

​

Maximum Value

if ( !isNaN(parseInt(${application.client.amount})) ) {
    return 0.35 * parseInt(${application.client.amount})
}  else {
    return 20000
}

• Similar to the previous expression, it checks if the value entered on the input field is a valid number using !isNaN(parseInt(${application.client.amount})).
• If the input is a valid number, the maximum value for the slider is calculated as 35% of the entered value (0.35 * parseInt(${application.client.amount})).
• If the input is not a valid number (NaN), the maximum value for the slider is set to 20000.

​

Summary

​

Text example (using computed strings)

​

Scenario

• Select Element - “Loan type”: This element allows users to choose from different loan types, including “Conventional,” “FHA,” “VA,” and “USDA.”

• Text Element - “Property type”: This element displays property types based on the selected loan type.

if ("${application.loanType}" == "conventional") {
    return "Single-Family Home, Townhouse CondoMulti-Family, Dwelling";
} else if ("${application.loanType}" == "fha") {
    return "Single-Family Home, Townhouse, Condo, Manufactured Home";
} else if ("${application.loanType}" == "va") {
    return "Single-Family Home, Townhouse, Condo, Multi-Family Dwelling";
} else if ("${application.loanType}" == "usda") {
    return "Single-Family Home, Rural Property, Farm Property";
} else {
    return "Please select a loan type first";
}

​

Summary

• Loan Type Selection: Users interact with the “Loan Type Select Element” to choose a loan type, such as “Conventional,” “FHA,” “VA,” or “USDA.”
• Property Types Display: Once a loan type is selected, the associated property types are dynamically generated and displayed in the “Text Element.”
• Fallback Message: If no loan type is selected or an invalid loan type is chosen, a fallback message “Please select a loan type first” is displayed.

​

Integration across the UI elements

• Slider: The min value, max value, and default value for sliders can be set using JavaScript expressions applied to process parameters. This allows for dynamic configuration based on numeric values.
• Any UI Element that accepts validators min, max, minLength, maxLength: The “params” field for these elements can also accept JavaScript expressions applied to process parameters. This enables flexibility in setting validator parameters dynamically.
• Default Value: For input elements like text inputs or number inputs, the default value can be a variable from the process or a computed value determined by JavaScript expressions.
• Text: The content of a text element can be set using JavaScript expressions, allowing for dynamic text generation or displaying process-related information.
• Link: The link text can also accept JavaScript expressions, enabling dynamic generation of the link text based on process parameters or other conditions.