> ## Documentation Index
> Fetch the complete documentation index at: https://engage-docs.frigade.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Flow JS Type Definition

All of Frigade's Javascript SDKs share the same Flow type definition which is defined in the [Frigade JS SDK](https://www.npmjs.com/package/@frigade/js).

The Flow object is the main object that models a Flow's static metadata (title, subtitle, steps, etc.) as well as the current user's state in this flow.

It contains all the data and methods needed to build custom components with Frigade and to interact with the Frigade API without writing a single custom network call.

# Properties

### Accessors

### config

**config**: `FrigadeConfig`

***

### id

**id**: `string`

The Flow's ID.

***

### isCompleted

**isCompleted**: `boolean`

Whether the Flow is completed or not.

***

### isSkipped

**isSkipped**: `boolean`

Whether the Flow has been skipped or not.

***

### isStarted

**isStarted**: `boolean`

Whether the Flow is started or not.

***

### rawData

**rawData**: `StatefulFlow`

The raw metadata of the Flow. Contains all properties defined in the Flow's YAML config as well as the current state of the Flow.
Generally this should only be used when building custom components to access custom high-level props on the Flow.

***

### steps

**steps**: `Map`\<`string`, `FlowStep`>

Ordered map of the Steps in the Flow.
See [Flow Step Definition](https://docs.frigade.com/v2/sdk/js/step) for more information.

***

### subtitle

`Optional` **subtitle**: `string`

The user-facing description of the Flow, if defined at the top level of the YAML config.

***

### title

`Optional` **title**: `string`

The user-facing title of the Flow, if defined at the top level of the YAML config.

***

### type

**type**: `FlowType`

The type of the Flow such as `TOUR` or `CHECKLIST`.

## Accessors

### isVisible

`get` **isVisible**(): `boolean`

Whether the Flow is visible to the user based on the current user/group's state.
This function will return `false` if the user has already completed or dismissed the Flow or if the user
does not match the Flow's targeting/audience.

`set` **isVisible**(`visible`): `void`

<b>Parameters</b>

| Name      | Type      |
| :-------- | :-------- |
| `visible` | `boolean` |

## Methods

### applyVariables

▸ **applyVariables**(`variables`): `void`

Apply variables to the flow. This will replace any `${variable}` in the title, subtitle, and step fields with the value of the variable.

<b>Parameters</b>

| Name        | Type                       | Description                                 |
| :---------- | :------------------------- | :------------------------------------------ |
| `variables` | `Record`\<`string`, `any`> | A record of variables to apply to the flow. |

***

### back

▸ **back**(`properties?`): `Promise`\<`void`>

Navigates the flow to the previous step if one exists. This will mark that step started, but will not complete the previous step.

<b>Parameters</b>

| Name          | Type              |
| :------------ | :---------------- |
| `properties?` | `PropertyPayload` |

***

### complete

▸ **complete**(`properties?`): `Promise`\<`void`>

Marks the flow completed

<b>Parameters</b>

| Name          | Type              |
| :------------ | :---------------- |
| `properties?` | `PropertyPayload` |

***

### forward

▸ **forward**(`properties?`): `Promise`\<`void`>

Navigates the flow to the next step if one exists. This will mark that step started, but will not complete the previous step.

<b>Parameters</b>

| Name          | Type              |
| :------------ | :---------------- |
| `properties?` | `PropertyPayload` |

***

### getCurrentStep

▸ **getCurrentStep**(): `FlowStep`

Gets current step. If the current step is not visible, it will return the first visible step after it.
If no steps are visible, it will return undefined.

***

### getCurrentStepIndex

▸ **getCurrentStepIndex**(): `number`

Get the index of the current step. Starts at 0

***

### getCurrentStepOrder

▸ **getCurrentStepOrder**(): `number`

Returns the current step's order based on the number of available steps.
Works similar to getCurrentStepIndex but takes into account hidden steps due to visibilityCriteria.

***

### getNumberOfAvailableSteps

▸ **getNumberOfAvailableSteps**(): `number`

Get the number of available steps for the current user in the current flow. This is the number of steps that are not hidden.

***

### getNumberOfCompletedSteps

▸ **getNumberOfCompletedSteps**(): `number`

Get the number of completed steps for the current user in the current flow

***

### getProgress

▸ **getProgress**(): `number`

Get the progress of the flow as a number between 0 and 1. Useful when rendering a progress bar.

***

### getStepByIndex

▸ **getStepByIndex**(`index`): `FlowStep`

Get a step by index

<b>Parameters</b>

| Name    | Type     |
| :------ | :------- |
| `index` | `number` |

***

### register

▸ **register**(`callback?`): `void`

<b>Parameters</b>

| Name        | Type                          |
| :---------- | :---------------------------- |
| `callback?` | `CollectionsRegistryCallback` |

***

### reload

▸ **reload**(): `void`

Reload the Flow data from the server

***

### restart

▸ **restart**(): `Promise`\<`void`>

Restarts the flow/marks it not started

***

### sendFlowStateToAPI

▸ **sendFlowStateToAPI**(`action`, `data?`, `stepId?`): `Promise`\<`void`>

<b>Parameters</b>

| Name      | Type              |
| :-------- | :---------------- |
| `action`  | `FlowActionType`  |
| `data?`   | `PropertyPayload` |
| `stepId?` | `string`          |

***

### skip

▸ **skip**(`properties?`): `Promise`\<`void`>

Marks the flow skipped

<b>Parameters</b>

| Name          | Type              |
| :------------ | :---------------- |
| `properties?` | `PropertyPayload` |

***

### start

▸ **start**(`properties?`): `Promise`\<`void`>

Marks the flow started

<b>Parameters</b>

| Name          | Type              |
| :------------ | :---------------- |
| `properties?` | `PropertyPayload` |

***

### unregister

▸ **unregister**(): `void`

[View definition](https://github.com/FrigadeHQ/frigade-react/blob/b8996ad7/packages/js-api/src/core/flow.ts#L696)