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

# Tutorial: Build a credit card application

> Learn FlowX.AI by building and running a credit card request process with a form, a credit check, branching logic, and a confirmation screen.

Tested · October 2026

> [!TIP]
>
> **Built and run by the FlowX docs team on a live FlowX environment.** All three card-type paths ran end to end, from the form to the confirmation screen, with each instance finishing in the expected branch.

In this tutorial, you'll build a credit card application process from scratch and run it end to end. By the end, you'll know how to:

* Design a BPMN process with user tasks, service tasks, and gateways
* Build a form and wire its button to the process
* Set and read process data with business rules
* Branch on a value with an Exclusive Gateway
* Start a process instance and inspect it

> [!NOTE]
>
> **Time required:** about 15 minutes
>
> **Prerequisites:**
>
> * Access to FlowX Designer
> * A workspace and project set up ([create one here](https://docs.flowx.ai/6.x/docs/projects/workspaces.md))

> [!TIP]
>
> Everything in the guided steps runs inside FlowX, with no external system required. The credit score is simulated by a business rule. The [Extend the process](#extend-the-process) section at the end shows where real integrations plug in.

***

## What you'll build

A customer requests a new credit card through a bank app. The process:

1. Collects personal information
2. Computes a credit score
3. Assigns a card type based on the score
4. Shows the result and asks the customer to confirm

```mermaid theme={"dark"}
flowchart LR
  S((Start)) --> A[Fill Personal Data]
  A --> B[Check Credit Score]
  B --> G{Card type?}
  G -->|700 or more| P[Premium]
  G -->|500 to 699| T[Standard]
  G -->|below 500| Q[Basic]
  P --> M{" "}
  T --> M
  Q --> M
  M --> R[Review and Confirm]
  R --> E((End))
```

This is how the finished process looks on the Designer canvas:

![The finished credit-card-request process on the canvas: Start, Fill Personal Data, Check Credit Score, a Card type? gateway branching to Basic, Standard, and Premium, a Merge gateway, Review and Confirm, and End](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-finished-process.png)

***

## Step 1: Create the process

**1. Open your project**

In **FlowX Designer**, open your workspace, then your project, then its **Processes** section.

**2. Create a new process**

Add a new process, name it `credit-card-request`, and click **Create process**. The Designer opens the empty canvas.

**3. Add a Start Event**

Drag a **Start Event** from the node palette on the left onto the canvas. This is where the process begins when a customer opens the credit card application.

> [card] [Creating process definitions](https://docs.flowx.ai/6.x/docs/flowx-designer/managing-a-project-flow/creating-a-new-process-definition.md)

> [card] [Learn more about processes](https://docs.flowx.ai/6.x/docs/building-blocks/process/process.md)

***

## Step 2: Collect user data (User Task)

The first step is collecting the customer's personal information.

**1. Add a User Task**

Drag a **User Task** node after the Start Event, connect the two, and name it `Fill Personal Data`.

**2. Assign it to a navigation area**

Every user task must belong to a navigation area. Without one, the Designer marks the node with a warning and its screen does not render at runtime.

In the left panel, open the **Navigation** tab. Click **Add New Area** (the **+** button), choose **Page**, and name it `Application`. Then drag `Fill Personal Data` from **User Tasks (not allocated)** into the page. The second user task gets its own page in Step 5.

![Navigation tab in the left panel with two pages, Application holding Fill Personal Data and Confirmation holding Review and Confirm, and an empty User Tasks (not allocated) list](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-navigation-areas.png)

**3. Design the form**

Select the user task and open the **UI Designer**. Add a **Form** component, then add these fields inside it:

* Full name: an **Input** of type **Text**
* Email: an **Input** of type **Email**, which validates the address format for you
* Date of birth: a **Datepicker**
* Annual income: an **Input** of type **Number**

![UI Designer showing the Fill Personal Data form with Full name, Email, Date of birth, and Annual income fields and a Continue button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-form-ui-designer.png)

**4. Configure the data model**

Set the **Process data key** of each field. This is where the value lands in the process data:

* `application.fullName`
* `application.email`
* `application.dateOfBirth`
* `application.annualIncome`

![The process data model with the application object and its fullName, email, dateOfBirth, annualIncome, creditScore, and cardType attributes](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-data-model.png)

**5. Add a Continue button and wire it**

The form cannot advance the process on its own: it needs a button bound to an action. A user task already comes with a **Save Data** action named `saveData`, set to **Manual** so it waits for the user, so you do not have to create one.

In the **UI Designer**, drag a **Button** onto the screen and label it `Continue`. In its **Event Handlers** section, click **+**, choose the **On Click** trigger, set **Action Type** to **Node Action**, and select `saveData`.

Check **Add forms to submit** and select your form. This validates the visible fields and sends their values with the action.

![Continue button selected in the UI Designer, with an On Click event handler set to Node Action saveData and the personal data form added to submit](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-continue-button-event-handler.png)

> [!NOTE]
>
> Buttons never advance a process on their own. Each button corresponds to a **manual node action** on the same node, reached through an **On Click** event handler. If you are coming from 5.1.x, the Event Handlers section is what replaced the separate **UI actions** tab. See the [migration mapping](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/event-handlers.md#migrating-from-ui-events-and-ui-actions) for the old-to-new action names.

> [card] [Learn more about User Tasks](https://docs.flowx.ai/6.x/docs/building-blocks/node/user-task-node.md)

> [card] [Event Handlers](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/event-handlers.md)

> [card] [Navigation areas](https://docs.flowx.ai/6.x/docs/building-blocks/process/navigation-areas.md)

> [card] [Input fields and validators](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/form-elements/input-form-field.md)

***

## Step 3: Check credit score (Service Task)

Compute a credit score automatically after the form is submitted. For this tutorial, a business rule derives the score from the annual income, so you can run the process without an external scoring service.

**1. Add a Service Task**

Drag a **Service Task** after `Fill Personal Data`, connect the two, and name it `Check Credit Score`.

**2. Add a Business Rule action**

On the node's **Actions** tab, add a **Business Rule** action with **JavaScript** as the language, and paste:

```javascript theme={"dark"}
var income = Number(input.application.annualIncome);
var score = 450;
if (income >= 80000) {
  score = 750;
} else if (income >= 40000) {
  score = 600;
}
output.put("application", { "creditScore": score });
```

`input` holds the process data the form saved. `output.put` merges the new key into it, so the other `application` keys are kept.

![The Business Rule action on the Check Credit Score node with the JavaScript rule expanded and a Test Rule button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-check-credit-score-rule.png)

> [accordion] Using a real credit scoring service instead
>
> In production, this step calls an external service. In FlowX, integrations run as **Workflows**: lightweight flows that call external systems through Data Sources, triggered from your BPMN process with a **Start Integration Workflow** action. Replace the Service Task above with the following.
>
> **1. Create the credit-scoring workflow**
>
> Define your scoring service as a **RESTful System** data source, then build a workflow that calls it. New to workflows? The [integration workflow tutorial](https://docs.flowx.ai/6.x/docs/getting-started/building-your-first-workflow.md) walks through this exact Data Source + Workflow setup.
>
> **2. Add a Send Message Task with a Start Integration Workflow action**
>
> Drag a **Send Message Task** after the user task. Add a **Start Integration Workflow** action, select your credit-scoring workflow, and in **Input Mapping** select the customer data (for example `application.annualIncome`) as the source path for each workflow input.
>
> **3. Add a Receive Message Task**
>
> This waits for the workflow to complete. In **Integration Output**, add a **Data Stream**, set **Source** to **Workflow**, and select your credit-scoring workflow. With **Legacy Mapping** off (the default), use the wrench button next to the workflow's End node under **Output Mapping** to map the score to `application.creditScore`. Alternatively, turn **Legacy Mapping** on and set **Key Name** to `application.creditScore`.
>
> ![Receive Message Task Integration Output with a Workflow data stream, Legacy Mapping off, and the End node listed under Output Mapping with its wrench button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-receive-output-mapping.png)
>
> The wrench opens the data mapping for that End node. Map the workflow's `creditScore` output to `application.creditScore`:
>
> ![Data mapping modal mapping the workflow's creditScore output to application.creditScore in the process](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-receive-output-mapping-modal.png)
>
> Leaving the output mapping empty stops the process with a missing data stream mapping error.
>
> > [card] [Learn more about the Start Integration Workflow action](https://docs.flowx.ai/6.x/docs/building-blocks/actions/start-integration-workflow.md)

> [card] [Learn more about business rules](https://docs.flowx.ai/6.x/docs/building-blocks/actions/business-rule-action/business-rule-action.md)

***

## Step 4: Branch based on credit score (Exclusive Gateway)

Different credit scores qualify for different card types.

**1. Add an Exclusive Gateway**

Drag an **Exclusive Gateway** after `Check Credit Score` and connect it. This creates a decision point based on the credit score.

**2. Add Service Tasks for each branch**

Add three Service Tasks (Premium, Standard, Basic) and draw an arrow from the gateway to each one. The gateway's **Advance to** list only shows nodes it is already connected to.

On each Service Task, add a **Business Rule** action with **JavaScript** as the language, and set the card type:

```javascript theme={"dark"}
output.put("application", { "cardType": "PREMIUM" });
```

Use `STANDARD` and `BASIC` on the other two. The output is merged into the process data, so the other `application` keys (name, income, credit score) are kept.

![Premium Service Task Actions tab with a Business Rule action in JavaScript that sets application.cardType to PREMIUM](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-service-task-business-rule.png)

**3. Configure branch conditions**

Open the gateway's **Gateway Decisions** tab. Conditions read the process data through `input`, so start each one with `input.`:

* **Branch 1:** `input.application.creditScore >= 700` → Premium card
* **Branch 2:** `input.application.creditScore >= 500` → Standard card
* **Branch 3:** **Else** → Basic card

> [!NOTE]
>
> Conditions are evaluated top to bottom and the first true one wins, so keep the `>= 700` rule above the `>= 500` rule. A score of `750` satisfies both, and the order is what sends it to Premium. Click **Test** to try a sample `input` against your conditions before you save.

![Gateway Decisions tab for the card type gateway, routing credit scores of 700 or more to Premium, 500 or more to Standard, and everything else to Basic](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-gateway-decisions.png)

**4. Add a closing Exclusive Gateway**

Merge the branches back together after the card type is set: drag a second **Exclusive Gateway** and connect all three Service Tasks to it. A gateway with a single outgoing path needs no conditions.

> [card] [Learn more about Gateways](https://docs.flowx.ai/6.x/docs/building-blocks/node/exclusive-gateway-node.md)

***

## Step 5: Show results and confirm (User Task)

Let the customer review their card type and confirm.

**1. Add a User Task**

Drag a **User Task** after the closing gateway, connect it, and name it `Review and Confirm`. In the **Navigation** tab, add a second **Page** named `Confirmation` and drag the task into it. User tasks on the same page render together, so a sequential screen needs its own page.

**2. Design the confirmation screen**

Display the assigned card type. Add a **Container** or **Card** to the screen, then place a **Text** component inside it with, for example, `You have a ${application.cardType} card.` The value is filled in from the process data when the screen shows.

![UI Designer showing the Review and Confirm screen with a Your card heading, the card type text, and a Confirm button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-confirmation-ui-designer.png)

**3. Add the Confirm button**

Add a **Button** labeled `Confirm` in the **UI Designer** and give it an **On Click** event handler with **Action Type** set to **Node Action**, pointing at this node's `saveData` action, exactly as you did in Step 2.

***

## Step 6: End the process

Drag an **End Event** after `Review and Confirm` and connect it. When the customer clicks **Confirm**, the token reaches the End Event and the instance completes.

***

## Test your process

**1. Check for warnings**

The Designer saves your changes automatically. Before you start, make sure no node shows a warning, in particular a user task that is not included in a navigation area.

**2. Start a process instance**

Click **Start Process** in the top-right corner. A dialog opens where you can pass start data as **JSON data**; leave it as `{}` and click **Start Process**. The form opens. Fill it in with an annual income of `90000` and click **Continue**. The score is computed, the gateway routes to Premium, and the confirmation screen shows `You have a PREMIUM card.` Click **Confirm**.

![Start Process dialog with an empty JSON data field and the Start Process button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-start-process-dialog.png)

![Running form with full name, email, date of birth, and an annual income of 90000 filled in, and the Continue button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-run-form-filled.png)

![Confirmation screen reading You have a PREMIUM card, with the Confirm button](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-run-confirmation.png)

**3. Inspect the instance**

Open **Process Instances** to see the instance, the path its token took, and the data at each step. You should find `application.creditScore` set to `750` and `application.cardType` set to `PREMIUM`.

![Process instance view showing the finished token path through Premium and the application variables with creditScore 750 and cardType PREMIUM](https://s3.eu-west-1.amazonaws.com/docx.flowx.ai/cc-process-instance.png)

> [!TIP]
>
> You built and ran a complete process: a form that writes process data, a business rule that computes from it, a gateway that branches on it, and a screen that reads it back.

> [!TIP]
>
> Start two more instances with incomes of `50000` and `20000` to see the Standard and Basic branches.

> [card] [Starting a process](https://docs.flowx.ai/6.x/docs/flowx-designer/managing-a-project-flow/starting-a-process.md)
>
> Other ways to start a process: from a UI, a Kafka event, an incoming email, or a webhook.

***

## Troubleshooting

> [accordion] Continue fails with Previous mandatory actions were not completed
>
> The user task has more than one manual action, usually a second `saveData` added by mistake. Open the node's **Actions** tab and remove the extra action, so the **Continue** button points at the only manual action left.

> [accordion] The form and the confirmation screen show up together
>
> Both user tasks are in the same navigation area. User tasks on one page render at the same time. Move `Review and Confirm` to its own **Page** in the **Navigation** tab, as in Step 5.

> [accordion] A score of 750 ends up as a Standard card
>
> The gateway conditions are evaluated in order, and the first true condition wins. Open the **Gateway Decisions** tab and make sure the `>= 700` condition is above the `>= 500` one, then click **Save**.

***

## What you learned

| Concept | How you used it |
| - | - |
| **User Tasks** | Collecting data, showing the result, wiring buttons to node actions |
| **Navigation areas** | Giving user tasks a page to render in |
| **Service Tasks** | Computing the credit score and setting the card type with business rules |
| **Exclusive Gateway** | Branching on the credit score and merging the branches back |
| **Process data** | Written by a form and a business rule, read by gateway conditions and a Text component |

***

## Extend the process

The full version of this scenario adds integrations. Each one needs a system outside FlowX, which is why they are not part of the guided steps:

* **Real credit scoring**: replace the business rule with an integration workflow that calls your scoring service, as shown in Step 3.
* **Confirmation email**: after the customer confirms, add a **Send Message Task** that calls the [notifications plugin](https://docs.flowx.ai/6.x/docs/platform-deep-dive/core-extensions/content-management/notifications-plugin/notifications-plugin-overview.md) with the customer's name and card type.
* **Register the card in the core banking system**: run it in parallel with the email by wrapping both in a [Parallel Gateway](https://docs.flowx.ai/6.x/docs/building-blocks/node/parallel-gateway.md), each branch calling its own integration workflow.
* **Pick a branch for card pickup**: call a locations API from a workflow, then let the customer choose a branch in another user task.

***

## Next steps

> [card] [Continue: build your first workflow](https://docs.flowx.ai/6.x/docs/getting-started/building-your-first-workflow.md)
>
> Connect an external API as a Data Source, build an integration workflow around it, and call it from a process. It is the piece that turns the simulated credit check into a real one.

> [card] [Build a complete app: reconcile supplier invoices](https://docs.flowx.ai/6.x/cookbooks/invoice-reconciliation.md)
>
> A tested end-to-end build: receive invoices by email, extract them with AI, match each one against its purchase order, and send only the exceptions to a reviewer.

> [card] [UI components](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-designer.md)
>
> Learn all available form and display components

> [card] [Business rules](https://docs.flowx.ai/6.x/docs/building-blocks/actions/business-rule-action/business-rule-action.md)
>
> Add complex logic with JavaScript or Python business rules

> [card] [Error handling](https://docs.flowx.ai/6.x/docs/building-blocks/node/error-events.md)
>
> Handle failures gracefully

> [card] [FlowX Academy](https://academy.flowx.ai)
>
> Take structured courses with certifications


## Related topics

- [Intermediate message events in business processes](https://docs.flowx.ai/6.x/docs/building-blocks/node/message-events/message-intermediate/example-intermediate-message-events.md)
- [Tutorials](https://docs.flowx.ai/6.x/ai-platform/tutorials/overview.md)
- [Card](https://docs.flowx.ai/6.x/docs/building-blocks/ui-designer/ui-component-types/root-components/card.md)
- [Tutorial: Build your first UI Flow](https://docs.flowx.ai/6.x/docs/getting-started/building-your-first-ui-flow.md)
- [Start new project instance](https://docs.flowx.ai/6.x/docs/building-blocks/actions/start-new-project-instance.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.