Dynamically Completing a Step

For most components, steps in Flows are marked as completed when a user clicks the primary button. However, for components such as Checklists, you may want to complete or skip steps when your users take certain actions in your application rather than clicking the primary button. This can be achieved either marking a step completed via the SDK or API, or by defining a targeting query in the completionCriteria property on a step.

​

Marking Steps completed via the SDK

Call the complete method from the useFlow hook in the React SDK or via the JS SDK. In the example below, we’re calling the complete method from the React SDK:

import { useFlow } from '@frigade/react';

const { flow } = useFlow("my-flow-id");

await flow.steps.get('my-step-id').complete();

​

Marking Steps complete via Targeting

Use the completionCriteria property on a step to automatically mark the step as completed when a user meets the criteria. See Targeting for more examples of how to write targeting queries.

steps:
  - id: my-step-id
    ...
    completionCriteria: user.property('connectedBank') == true

​

Preventing Steps from completing on primary button click

In built-in Flow components, a step is marked as complete when the primary button is clicked. To prevent this, select No action in the editor under the Primary button property:

​

API Methods

You can also mark steps completed via the flowStates API endpoint.