Blocks are be connected to other blocks by paths. Paths define the logic of how users will transition across blocks. Some paths transition automatically while others must be transitioned manually via SDK or API.
Some transitions are Dopt controlled which means they will happen automatically. These will be called out by paths labeled as Auto on the flow canvas. For example, any path originating from a start block would be automatically transitioned.
Another instance where transitions happen automatically are paths originating from logic blocks. In some cases, these paths can be configured, but are still automatically transitioned. For example, the true/false branch block allows you to define if its paths should map to a true condition or a false condition.
Manual transitions originate from component blocks and must be triggered via SDK or API. These transitions are named and can map to a single path or many paths. A single path may also map to many transitions which is to say that a path can have multiple names.
Naming a path
When you create a path on the flow canvas that requires a manual transition, it will be named
complete by default. You can then edit the name for that path if you so choose. This name is the string that you will use when calling the transition.
To add multiple names to a path, use the
, (comma) delimiter to separate your path names. For example, if you wanted to name a path
skip, you would enter the path name as
complete,skip. This would effectively allow you to bind both
skip transitions to the same path while surfacing them as semantically separate transitions.
Triggering a transition
Triggering a transition is done with the
transition function or method.
transition takes the name of the path you want to transition along as input. For example, if you wanted to transition along a path named
abc, you would call
In cases where you need to transition along multiple paths simultaneously, you can pass in multiple names. For example, if you wanted to transition along paths named
xyz at the same time, you would call
transition('abc', 'def', 'xyz').
When a transition on a component block is called:
- The custom block’s state is updated to
exited: true(for custom components) or
completed: true(for all other components), and the transition called is set to
- All immediate downstream blocks will have their states set to
entered: true(for custom components)
How a block was transitioned is stored as data on the block under the
transitioned property. This property exposes an object which lists all the possible transitions and whether or not they have been transitioned.
For example, if you had a block with paths named
xyz, but you had only transitioned along the
abc path, then the
transitioned property would look like:
Let’s say you have two component blocks: Step 1 and Step 2 connected with a path named
complete. Calling the
complete transition on Step 1 would look like this:
Backwards and looping paths
Paths can also point backwards (upstream) as well as loop. There are some restrictions as to which blocks a backwards path can connect to in order to prevent infinite loops. Generally, a good rule of thumb is that a component block must be in the loop in order for a path connection to be valid.