# Integrate Microflow with UI to Produce Dynamic App

In this section, you will integrate the **Microflow service** created earlier with the **Mobile UI** to display **dynamic data** at runtime.\
Specifically, the Microflow service will be connected to **Benefit Page (Page 2)** so that benefit records retrieved from the database are rendered dynamically on the screen.

***

### Objective

After completing this section, you will be able to:

* Trigger a Microflow from a mobile page event
* Pass **Page State parameters** to a Microflow
* Bind Microflow output data to UI components
* Display database records dynamically on a mobile page

***

### Step 1: Configure Microflow Action on Benefit Page

1. Open **Benefit Page** in **Page Designer**
2. Select **PageContent** (at the bottom of the design canvas)
3. In the left‑hand configuration panel, open the **Interaction and DataFlow** tab
4. Click the **“+”** button under **Action List**
5. Choose **Microflow** as the action type
6. Select your application project, for example:\
   \&#xNAN;**`WorkForce_[yourname]`**

> **Note**\
> Select the Microflow created in the previous section (`Retrieve_Benefits`) that retrieves benefit data from the database.

7. Set **Event** to **`Load`**
8. Select the Microflow service to be triggered on page load

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F16eLvT0B58E7eEHO240n%2Fimage.png?alt=media&#x26;token=ef87cfac-344b-4052-9322-6e797c5948b0" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Microflow action configuration</em></p>

***

### Step 2: Map Page State to Microflow Input Parameters

1. Click **Open Mapping** for the selected Microflow action
2. From **Page Designer parameters**, add two **Page State parameters**:
   * `type`
   * `username`
3. Set default values:
   * `type` = **Travel**
   * `username` = **Alisha**

These values are passed automatically to the Microflow when the page is loaded.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fv8tPYHbULHVSWg7Euc0q%2Fimage.png?alt=media&#x26;token=a86d366b-e826-46fb-8cea-b6ed162298d6" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Page State to Microflow input mapping</em></p>

4. Click **Save**

After saving, the Microflow appears under **Action List**, indicating it is active for this page.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FTQcdjn3srm6bLB3jtGvY%2Fimage.png?alt=media&#x26;token=9f3ebc3c-ff2a-48a2-b219-79087bdb5560" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Microflow highlighted under Action List</em></p>

***

### Step 3: Bind Microflow Output to Card UI

Next, bind the Microflow output (`BenefitBOout_[yourname]`) to the **Card UI** so the page can render multiple rows dynamically.

1. Select the **Card** component on the Benefit Page
2. Click the **Connect to Data** icon
3. Select **Connect to Data**
4. Choose **`BenefitBOout_[yourname]`**
5. Click **Connect** and review the configuration

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FAp3pWHBWHvqeuVr0byr2%2Fimage.png?alt=media&#x26;token=c7c3a8c7-ad37-4f23-864b-50ba5ac7145d" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Card component data binding</em></p>

This configuration allows the Card component to repeat for each record returned by the Microflow.

***

### Step 4: Map Data Fields to UI Components

1. Inside the Card, select an **H1** (or text component)
2. Click the **database icon** to connect data
3. Enable **Data from parent**
4. Select the corresponding data field (e.g. `item.travel_date`)
5. Click **Connect**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FZfHvstqx49La2AO2tyma%2Fimage.png?alt=media&#x26;token=e779f8b5-5b96-4c9c-9a92-b756ebec7987" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Bind Card fields to Microflow output</em></p>

Repeat this process for all UI elements (project name, amount, status, etc.), mapping each to its corresponding output field.

***

### Step 5: Build and Test the Application

1. Click **Save**
2. Click the **PlayMe** button to build the application
3. Once build is complete, run the application again

When the Benefit Page loads:

* The Microflow is triggered automatically
* Data is fetched from the database
* Results are rendered dynamically on the mobile UI

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FeW1vBft5SRkrl1VtdCaB%2Fimage.png?alt=media&#x26;token=5ab839ed-f488-4ee3-ad3f-42cf688fd630" alt=""><figcaption></figcaption></figure>

<p align="center"><em>Final dynamic Benefit Page output</em></p>

***

### Summary

In this section, you have successfully:

* Integrated a Microflow with a mobile page
* Passed Page State parameters into backend logic
* Bound Microflow output data to UI components
* Displayed dynamic, database‑driven content at runtime

Your **Workforce App (Mobile)** is now fully connected end‑to‑end—from database, through Microflow, to the mobile UI.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.onewebstack.com/oneweb-platform-th/tutorials-examples/workforce-app-mobile/integrate-microflow-with-ui-to-produce-dynamic-app.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.