# Integrate Page with Other Systems Using Microflow

Pages in ONEWEB can be integrated with **internal and external systems** such as databases or web services by invoking **Microflows**.\
This enables pages to become **dynamic**, reacting to user actions and displaying real‑time data returned from backend services.

In this section, you will learn how to:

* Call a **Microflow** from a Page
* Pass input values from the Page to the Microflow
* Display the data returned by the Microflow on the Page

Microflow acts as the **service layer**, while the Page handles **presentation and interaction**.

***

### Page → Microflow Integration Flow

Typical execution flow:

1. User interacts with a Page (input or button)
2. Page triggers a Microflow
3. Microflow executes backend logic (DB / REST / SOAP / etc.)
4. Microflow returns data
5. Page updates UI elements dynamically

***

### Page Calls a Microflow (Step‑by‑Step)

#### Step 1: Open Page in Page Designer

1. Go to **Page Designer**
2. Open the Page that you want to make dynamic

***

#### Step 2: Select Input Field to Pass Data

1. Click the **input field** whose value should be sent to the Microflow

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F2Y9bXJcA27EYPr8ktjm9%2Fimage.png?alt=media&#x26;token=5f34c7c8-0053-4935-ab6b-7a5701283847" alt=""><figcaption></figcaption></figure>

***

#### Step 3: Connect Input Field to State

Microflow input parameters can only be mapped from **State parameters**, so the input field must first be connected to state.

1. Click **Connect to Data** icon
2. Open the **State** tab
3. Click **Connect to State**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fd1bvE9FDa3J5kKVzz0pZ%2Fimage.png?alt=media&#x26;token=a2103595-67d2-4157-b7b7-28154754df28" alt=""><figcaption></figcaption></figure>

4. Select the required **State parameter**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FT6lmA6RzidvWSqRFCvfg%2Fimage.png?alt=media&#x26;token=f5605aa4-4596-4911-8da7-0b50c1b9f047" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Select Trigger Element (Button or Container)

1. Click the element that will trigger the Microflow\
   (for example, a **Button**)

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FRx62XxjmrscXW8Bg6Xt0%2Fimage.png?alt=media&#x26;token=cb29a1e4-0c1d-422c-b500-7ee086b791d5" alt=""><figcaption></figcaption></figure>

***

#### Step 5: Configure Microflow Action

1. Click the **Interaction / Data Flow** icon in the left tools panel

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FFobOuAr1CjxFxqHrjr8v%2Fimage.png?alt=media&#x26;token=4a7f4a16-72eb-45aa-ba44-99dfb2bfff5e" alt=""><figcaption></figcaption></figure>

2. Under **Action**:

* Click **Add**
* Choose **Event** = `click`
* Select **Microflow**
* Click **Refresh**
* Select:
  * **Microflow Project**
  * **Microflow Name**

***

#### Step 6: Map Page → Microflow Input

1. Click **Mapping** to open Mapping Window
2. Map **State parameters** to **Microflow input parameters**
3. Click **Save** in the mapping screen

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FjsBJGILiYlVDg8q2cZ0p%2Fimage.png?alt=media&#x26;token=798f7d0e-0ecd-4aaf-b9dc-b7f415539744" alt=""><figcaption></figcaption></figure>

***

#### Optional Enhancements

* Attach **JavaScript hooks** before or after Microflow execution
* Redirect to another page on successful execution

***

### Update Page Data from Microflow Response

#### Step 7: Select Display Element

1. Select the UI component that will display data returned from Microflow

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FhmqEX8BQBPHvbtmiNpDx%2Fimage.png?alt=media&#x26;token=982300a6-762a-4713-9da2-e67712d40572" alt=""><figcaption></figcaption></figure>

***

#### Step 8: Connect to Microflow Data

1. Click **Connect to Data**
2. Open the **Microflow** tab
3. Click **Connect to Data**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fr07wBTAxajiuJjtLBUhe%2Fimage.png?alt=media&#x26;token=82074132-81e9-44fc-9421-81e52800a1cf" alt=""><figcaption></figcaption></figure>

***

#### Step 9: Map Output Field

1. Select Microflow output field
2. Click **Connect**
3. Click **Done**

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FGGrIve8NfnyWZo3Jajki%2Fimage.png?alt=media&#x26;token=eff899c6-c9f1-4e1b-bca4-1e69ee0f72c9" alt=""><figcaption></figcaption></figure>

***

### Runtime Result

The Page is now fully integrated with the Microflow:

* User triggers an event (click / change)
* Page calls the Microflow
* Microflow fetches data from backend system
* Page updates dynamically with returned values

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fzspx1r3ZciK04lIWC0sP%2Fimage.png?alt=media&#x26;token=6d4816ef-13f6-40fb-8ceb-46e606dc7962" alt=""><figcaption></figcaption></figure>

***

### Summary

As a sub‑section of **Integrate Microflow with UX / UI**, this pattern shows how Pages can:

* Invoke Microflows on user interaction
* Pass input values via State parameters
* Receive and render backend data dynamically
* Keep UI logic decoupled from integration logic

This is the **recommended approach** for building dynamic, data‑driven Pages in ONEWEB.


---

# 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/building-apps/integrations/develop-integration-with-oneweb-microflow/integrate-microflow-with-ux-ui/integrate-page-with-other-systems-using-microflow.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.