Routing Model
Routing model configuration is needed only when you use an Endpoint to power your Flow.
You can define the routing model, which is a directed graph, as each screen can go to multiple other screens. There can be up to a maximum of 10 "branches", or connections, within the routing model.
Consider the following:
The following routing model can be built:
Welcome screen => [Select car model]
Select car mode => [Pick date]
Pick date => [Select car mode, Confirm test drive]
Confirm test drive => []
When to define routes
If you don't use an Endpoint, you don't need to define a routing model,
it will be generated automatically
.
However, if you want to use a server to power your Flow, you'll have to provide a
routing_model
in your Flow JSON.
How to define routes
Routes are defined per screen via the
routing_model
property. It is a map of screen ids to an array of other screen ids it can transition to. The terminal screen is defined with
terminal=true
.
Routing rules
Route cannot be the current screen, but the route can be "refreshed" for validation purposes.
If there is an edge between two screens, then the user can go back and forth between them using the BACK button.
Only forward routes should be specified in the routing model. For example, if you have specified an edge from Screen_A to Screen_B then you shouldn't specify another edge from Screen_B to Screen_A.
Routes can be empty for a screen if there is no forward route from it.
All routes must end at the terminal screen.
Routing Model Flow JSON Example (Endpoint)
In the example below, there is a simple 3-screen Flow that uses an Endpoint. It is expected that the server will return the next screen with a response to
data_exchange
action. The server has to comply with defined
routing_model
in the Flow JSON:
{
"version": "2.1",
"data_api_version": "3.0",
"data_channel_uri": "https://whatsapp.com",
"routing_model": {
"MY_FIRST_SCREEN": [
"MY_SECOND_SCREEN"
],
"MY_SECOND_SCREEN": [
"MY_THIRD_SCREEN"
]
},
"screens": [
{
"id": "MY_FIRST_SCREEN",
"title": "First Screen",
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "data_exchange",
"payload": {}
}
}
]
}
},
{
"id": "MY_SECOND_SCREEN",
"title": "Second Screen",
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "data_exchange",
"payload": {}
}
}
]
}
},
{
"id": "MY_THIRD_SCREEN",
"title": "Third Screen",
"terminal": true,
"data": {},
"layout": {
"type": "SingleColumnLayout",
"children": [
{
"type": "Footer",
"label": "Continue",
"on-click-action": {
"name": "data_exchange",
"payload": {}
}
}
]
}
}
]
}