---
category: [Administration & Integrations, Platform and Product Extensions, Platform and Product Extensions/Integration, Administration & Integrations/Custom Integrations & Apps, Platform and Product Extensions/Workday Extend]
keyword: [Extend, Presentation Components, UI components]
nav: wcp_docs
parent_url: /wcp_docs/
title: >- 
  Concept: Page Flows
layout: subsection
---

## <a id="section_ahf_zc2_3pb"></a>Flows and Flow Steps

A flow is a sequence of edit pages that provides users a guided experience for completing a multistep transaction. A flow step represents each page (or task) in the flow. Use a flow to:

-   Override the default navigation of an <b>OK</b> button on an edit page.
-   Define conditional logic with page transitions.
-   Define multiple navigation patterns using the same set of edit pages.


Consider an app that enables users to order business cards. The sample app has 2 edit pages:

-   The <b>orderStart</b> page for entering the order details. Its task ID is `orderStart`.
-   The <b>orderSubmit</b> page for submitting the order. Its task ID is `orderSubmit`.


![](GUID-377e53fb-8109-4a96-b6b2-2750b25aebd0-enHYPHENus.png)

By default, the <b>OK</b> button on <b>orderStart</b> navigates the user to the previous page after submitting the outbound endpoints. To redirect the <b>OK</b> button to a flow, reference the task ID of the edit page in the initial flow step. Example: The `orderStartStep` references the `orderStart` task ID. When a user clicks <b>OK</b> on <b>orderStart</b> , it always transitions to `orderSubmitStep`. When the flow reaches the last step, the user returns to the page before the flow started.

You define a flow in the `flowDefinitions` array in the AMD. This AMD snippet displays the sample 2-step flow definition:

```
{
      "id": "orderSubmitFlow",
      "flowSteps": [
        {
          "id": "orderStartStep",
          "taskId": "orderStart",
          "transitions": [
            {
              "order": "a",
              "value": "orderSubmitStep",
              "condition": "true"
            }
          ]
        },
        {
          "id": "orderSubmitStep",
          "taskId": "orderSubmit"
        }
      ]
    }
```

Assume that you also want your app to confirm the business card order after submitting it. You can add transitions to `orderSubmitStep` and add a confirmation step that displays the <b>orderConclude</b> view page.

![](GUID-aeb9db85-192e-4e1e-8f7f-2a07c3624be5-enHYPHENus.png)

To determine the next step to execute, you can specify a list of ordered conditions in the `transitions` of a flow step. Example: `orderStartStep` and `orderSubmitStep` evaluate conditions in `transitions` to determine the next step. The first true condition in `transitions` executes first.

As a view page, the <b>orderConclude</b> page doesn't automatically display the <b>OK</b> and <b>Cancel</b> buttons. Because the flow no longer controls the navigation, you can add a button that displays the next page, such as the Order History page.

This AMD snippet displays the sample `orderSubmitConcludeFlow` definition:

```
"flowDefinitions": [
    {
      "id": "orderSubmitConcludeFlow",
      "flowSteps": [
        {
          "id": "orderStartStep",
          "taskId": "orderStart",
          "startsFlow": true,
          "transitions": [
            {
              "order": "a",
              "value": "orderSubmitStep",
              "condition": "<% flowVariables.isValid == true %>"
            },
            {
              "order": "b",
              "value": "orderStartStep",
              "condition": "<% flowVariables.isValid == false %>"
            }
          ]
        },
        {
          "id": "orderSubmitStep",
          "taskId": "orderSubmit",
          "transitions": [
            {
              "order": "a",
              "value": "orderConcludeStep",
              "condition": "<% flowVariables.isConfirmed == true %>"
            },
            {
              "order": "b",
              "value": "orderStartStep",
              "condition": "<% flowVariables.isConfirmed == false %>"
            }
          ]
        },
        {
          "id": "orderConcludeStep",
          "taskId": "orderConclude",
          "endsFlow": true
        }
      ]
    }
]
```

## <a id="section_rb2_b4h_d2b"></a>Using flowVariables to Send Values Across Pages in a Flow

As your app navigates across the steps in a flow, you can send variables from 1 page to another. To send variable data to a flow, use the `outboundVariable` tag with a `flow` variable scope. To reference the variable within a flow step, use the `flowVariables` app variable.

In the sample app, the condition in `orderStartStep` evaluates `flowVariables.isValid` to determine the next flow step. The `isValid` variable comes from the <b>orderStart</b> PMD. This PMD snippet demonstrates how to set `isValid` as an `outboundVariable`:

```
"outboundData" : {
    "outboundEndPoints" : [ {
      "type" : "outboundVariable",
      "variableScope" : "flow",
      "name" : "transitionOutboundVars",
      "values" : [ 
        {
          "outboundPath" : "isValid",
          "value" : "<% !empty workerid.value %>"
        },
        {
          "outboundPath": "id",
          "value": "<% workerid.value %>"
        },
        . . .
      ]
    }
   ]
}
```

This flow step snippet demonstrates how to reference the `isValid` variable using `flowVariables` in a flow:

```
"flowSteps": [
  {
    "id": "orderStartStep",
    "taskId": "orderStart",
    "startsFlow": true,
    "transitions": [
      {
        "order": "a",
        "value": "orderSubmitStep",
        "condition": "<% flowVariables.isValid == true %>"
      },
      {
        "order": "b",
        "value": "orderStartStep",
        "condition": "<% flowVariables.isValid == false %>"
      }
    ]
  },
  . . .
]
```

### Related Information

[Concept: Page Types](/wcp_docs/zrd1553321160092.html)

[Concept: Page Navigation](/wcp_docs/qoc1553369215127.html)

[Reference: Extend App Metadata](/wcp_docs/btj1547749859781.html)