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)

This tutorial follows the 5.1.x Designer, where buttons are wired in a UI Action section. If your button settings show an Event Handlers section instead, you are on 5.9.x or later: follow the 5.9 version of this tutorial.

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

---

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 UI Action section, click Add UI action, set Event to CLICK, set Action Type to ACTION, and select saveData as the Node Action Name.

   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 a UI action.

Learn more about User Tasks

UI actions

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 sends the customer data to a credit scoring integration and waits for the answer. Replace the Service Task above with the following.

1. Add a Send Message Task

   This sends the customer data to your credit score adapter.

   Configure the Kafka topic to send to your credit scoring integration.

2. Add a Receive Message Task

   This waits for the credit score response.

   In Data stream topics, click Add stream, choose Custom, enter the topic your credit score service replies on, and set Key name to application.creditScore. The response is stored at that key.

Learn more about integrations

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 can only route to 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: Otherwise go to → 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.

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 and give it a UI action with Event CLICK, Action Type ACTION, and this node’s saveData as the Node Action Name, 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 the process instances view 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 a Send and Receive Message Task pair that talks to your scoring integration, 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 with its own integration.
• Pick a branch for card pickup: call a locations API through an integration, then let the customer choose a branch in another user task.

---

Next steps

UI components

Learn all available form and display components

Business rules

Add complex logic with DMN or scripts

Error handling

Handle failures gracefully

FlowX Academy

Take structured courses with certifications