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.

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

Time required: about 30 minutes

Prerequisites:

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

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 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

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

---

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.

Creating process definitions

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, 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.

   
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

   
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

   
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.

   

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

Navigation areas

Input fields and validators

---

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:

   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.

   

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 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.

Learn more about the Start Integration Workflow action

Learn more about business rules

---

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:

   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.

   
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

   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.

   
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.

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

   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.

   
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.

   

   

   
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.

   

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.

Start two more instances with incomes of 50000 and 20000 to see the Standard and Basic branches.

Starting a process

Other ways to start a process: from a UI, a Kafka event, an incoming email, or a webhook.

---

Troubleshooting

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.

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.

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 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, 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

Continue: build your first workflow

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.

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