Skip to main content

Paths

Overview

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.

Automatic transitions

Automatic transition

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

Manual transition

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 complete and skip, you would enter the path name as complete,skip. This would effectively allow you to bind both complete and 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 transition('abc').

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 abc, def, and xyz at the same time, you would call transition('abc', 'def', 'xyz').

When a transition on a component block is called:

  1. The custom block’s state is updated to active: false, exited: true (for custom components) or completed: true (for all other components), and the transition called is set to true
  2. All immediate downstream blocks will have their states set to active: true and entered: true (for custom components)

Accessing transitions

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 abc, def, and xyz, but you had only transitioned along the abc path, then the transitioned property would look like:

{
"abc": true,
"def": false,
"xyz": false
}

Example

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

Backwards path

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.