Dynamic next steps are a way to guide users through complex service applications by showing them what to expect next in their application journey. These steps automatically update based on the application's status and the user's inputs, providing a personalized experience.
When creating next steps, you have access to two main sources of data:
First, you have the application response data, which contains standard information about the application. Second, you have access to all form data that users have entered.
Next steps can be constructed using simple conditions or using the model arrow function syntax for more complex scenarios. Here's how both approaches work:
// Direct field access (simple conditions)
"condition": "userType === 'business'"
// Using arrow function
"condition": "model => model.business?.licenseType === 'full'"
{
"nextSteps": [
{
"title": "Payment Required",
"description": "Your ${serviceName} application requires payment of ${price} ${currency}. Use Bill ID ${billId} to complete the payment within 48 hours. Payment can be made through any bank or mobile money service.",
"condition": "applicationStatus === 'PENDING_PAYMENT'"
},
{
"title": "Online Call Inspection",
"description": "A site inspection will be scheduled for your business premises. Our team will contact you at ${notificationPhoneNumber} to confirm the inspection date.",
"condition": "visitType === 'virtual'"
},
{
"title": "Site Inspection",
"description": "A site inspection will be scheduled for your business premises. Our team will contact you at ${notificationPhoneNumber} to confirm the inspection date.",
"condition": "model => model.visitType === 'physical'"
}
]
}
These additional properties are available in addition to the form data from the user.
| Field | Type | Example Usage | Source |
|---|---|---|---|
| applicationId | string | ${applicationId} |
Application Response |
| applicationNumber | string | ${applicationNumber} |
Application Response |
| billId | string | ${billId} |
Application Response |
| serviceId | string | ${serviceId} |
Application Response |
| serviceName | string | ${serviceName} |
Application Response |
| userId | string | ${userId} |
Application Response |
| priceType | string | ${priceType} |
Application Response |
| currency | string | ${currency} |
Application Response |
| price | number | ${price} |
Application Response |
| dateCreated | string | ${dateCreated} |
Application Response |
| lastUpdated | string | ${lastUpdated} |
Application Response |
| applicationStatus | string | condition: "applicationStatus === 'PENDING'" |
Application Response |
| locale | string | ${locale} |
Application Response |
| notificationEmail | string | ${notificationEmail} |
Application Response |
| notificationPhoneNumber | string | ${notificationPhoneNumber} |
Application Response |
| merchant | string | ${merchant} |
Application Response |
| [formField] | any | ${fieldName} or condition: "fieldName === 'value'" |
Form Data |
| [nestedFormField] | any | condition: "model => model.parent.field === 'value'" |
Form Data |