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.

​

Understanding the return statement

​

Why the return statement is essential

​

The role of return in computed values

​

✅ Correct Implementation

// Slider minimum value calculation
if (!isNaN(parseInt(${application.client.amount}))) {
    return 0.15 * parseInt(${application.client.amount});
} else {
    return 10000;
}

​

❌ Incorrect Implementation

// This will NOT work - missing return statements
if (!isNaN(parseInt(${application.client.amount}))) {
    0.15 * parseInt(${application.client.amount}); // No return!
} else {
    10000; // No return!
}

​

Best practices for testing

​

Always include return statements

​

Handle edge cases

// Good practice: Handle both valid and invalid inputs
if (!isNaN(parseInt(${application.client.amount}))) {
    return 0.15 * parseInt(${application.client.amount});
} else {
    return 10000; // Fallback value
}

​

Test different scenarios

• Valid input values - Normal expected data
• Invalid or empty input values - null, undefined, empty strings
• Edge cases - Zero, negative numbers, very large numbers
• Different data types - Strings that look like numbers, boolean values
• Network delays - Process parameters that might not be loaded yet

​

Use meaningful default values

// Provide sensible defaults for fallback scenarios
if ("${application.loanType}" == "conventional") {
    return "Single-Family Home, Townhouse, Condo, Multi-Family Dwelling";
} else {
    return "Please select a loan type first"; // Clear user guidance
}

​

Troubleshooting common issues

​

Issue: Computed value not updating

• Ensure every code path has a return statement
• Check that process parameter syntax uses ${} correctly
• Verify the process parameter actually exists and has data

​

Issue: Getting undefined values

• Check that your JavaScript expression syntax is correct and includes return
• Add fallback return statements for all possible conditions
• Use defensive programming: return ${application.value} || "default value"

​

Issue: Values not calculating correctly

• Verify that process parameters are properly referenced with ${} syntax
• Use parseInt() or parseFloat() for numeric operations
• Add type checking: if (typeof ${application.value} === 'number')

​

Issue: Expression works in console but not in UI Designer

• Remember that process parameters use ${} syntax, not regular JavaScript variables
• Ensure all code paths return values, not just the main logic
• Check for syntax errors specific to the UI Designer’s JavaScript engine

​

Summary

1. Always include return statements in your JavaScript expressions
2. Test all possible code paths and scenarios
3. Provide meaningful fallback values for edge cases
4. Verify that your expressions work correctly across different input conditions
5. Debug using browser console before implementing in UI Designer

​

Quick Reference: Common Return Patterns

// Simple conditional return
return ${application.value} > 100 ? "High" : "Low";

// Multiple conditions with fallback
if (${application.status} === "active") {
    return "Status: Active";
} else if (${application.status} === "pending") {
    return "Status: Pending";
} else {
    return "Status: Unknown";
}

// Numeric calculations with validation
if (!isNaN(parseFloat(${application.amount}))) {
    return parseFloat(${application.amount}) * 1.1;
} else {
    return 0;
}

// String operations
return (${application.firstName} || "") + " " + (${application.lastName} || "");