Tutorial: Build a credit card application

Learn FlowX.AI by building a complete credit card request flow with forms, integrations, and notifications.

In this tutorial, you’ll build a credit card application process from scratch. By the end, you’ll understand how to:

• Design a BPMN process with multiple node types
• Create user-facing forms
• Integrate with external systems
• Handle branching logic based on business rules
• Send notifications

Time required: 30-45 minutes

Prerequisites:

• Access to FlowX Designer
• A workspace and project set up (create one here)

---

What you’ll build

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

1. Collects personal information
2. Checks credit score automatically
3. Assigns a card type based on the score
4. Sends confirmation email
5. Lets the user pick a branch for card pickup

Here’s the complete BPMN diagram:

Download this process

Import this BPMN file to follow along or explore the finished result.

---

Step 1: Create the process

1. Open your project

   Navigate to FlowX Designer → your workspace → your project.

2. Create a new process

   Click New → Process. Name it credit-card-request.

3. Add a Start Event

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

Learn more about processes

---

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. Name it Fill Personal Data.

2. Design the form

   In the node settings, open the UI Designer. Add form fields:

   • Full name (text input)
   • Email (text input with email validation)
   • Date of birth (date picker)
   • Annual income (number input)
3. Configure the data model

   Map each field to a key in your data model:

   • application.fullName
   • application.email
   • application.dateOfBirth
   • application.annualIncome
4. 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.

   

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 for the old-to-new action names.

Learn more about User Tasks

Event Handlers

---

Step 3: Check credit score (integration workflow)

Call an external credit scoring service automatically. 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.

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 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 map the customer data (for example ${processInstanceData.application.annualIncome}) as 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.

   

   The wrench opens the data mapping for that End node. Map the workflow’s creditScore output to application.creditScore:

   

   Leaving the output mapping empty stops the process with a missing data stream mapping error.

Don’t have a credit score service? For testing, replace the two message tasks with a Service Task that has a Business Rule action, and simulate a score based on annual income.

Learn more about the Start Integration Workflow action

---

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

Different credit scores qualify for different card types.

1. Add an Exclusive Gateway

   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:

   output.put("application", { "cardType": "PREMIUM" });
   

   The output is merged into the process data, so the other application keys (name, income, credit score) are kept.

   
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

   
4. Add a closing Exclusive Gateway

   Merge the branches back together after the card type is set. A gateway with a single outgoing path needs no conditions.

Learn more about Gateways

---

Step 5: Show results and confirm (User Task)

Let the customer review their card type and confirm.

1. Add a User Task

   Name it Review and Confirm.

2. Design the confirmation screen

   Display the assigned card type and benefits. 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.

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: Send notification and register (Parallel Gateway)

After confirmation, two things happen simultaneously:

1. Add a Parallel Gateway

   This splits the flow into parallel branches.

2. Branch 1: Send confirmation email

   Add a Send Message Task that triggers the notification plugin.

   Configure email template with customer name and card type.

3. Branch 2: Register in bank system

   Add a Send Message Task to your bank system adapter.

   This creates the card request in your core banking system.

4. Add a Closing Parallel Gateway

   Wait for both branches to complete before continuing.

Learn more about Notifications

---

Step 7: Select pickup location (Service Task + User Task)

Let the customer choose where to pick up their card.

1. Add a Service Task to fetch locations

   Call an API (like Google Maps) to get nearby branches based on customer address.

2. Add a User Task

   Display the top 3 branches as selectable options.

---

Step 8: End the process

1. Add a Receive Message Task

   This waits for confirmation that the customer picked up the card (from branch system).

2. Add an End Event

   The process completes.

---

Test your process

1. Save and validate

   Click Save. Fix any validation errors shown.

2. Start a process instance

   Click Run to start a new instance. Fill in the forms and watch the process flow.

3. Check the token

   Use the Process Instance view to see where the token is and inspect data at each step.

---

What you learned

You’ve built a complete process that demonstrates:

Concept	How you used it
User Tasks	Collecting data, showing confirmations
Service Tasks	Calling external APIs, setting data
Exclusive Gateway	Branching based on credit score
Parallel Gateway	Running email + registration simultaneously
Integrations	Credit score check, bank system, notifications

---

Next steps

Continue: build your first workflow

Your credit score check in Step 3 used an integration workflow. Build one yourself: connect an external API as a Data Source and call it from a process.

UI components

Learn all available form and display components

Business rules

Add complex logic with JavaScript or Python business rules

Error handling

Handle failures gracefully

FlowX Academy

Take structured courses with certifications