# Integrate Microflow with UX/UI

In many application scenarios, user interfaces need to **retrieve data from backend systems** or **persist user input to the database**.\
To achieve this, **Pages (UX/UI)** in ONEWEB can be integrated directly with **Microflows**, allowing dynamic interaction between the UI layer and backend integration logic.

Microflow acts as the **service layer** between the UI and internal or external systems.

***

### Purpose of UI–Microflow Integration

Integrating Microflow with UX/UI enables applications to:

* Fetch and display data dynamically on a page
* Update database records from user input
* Retrieve data from external systems in real time
* Execute backend logic based on UI events

This separation allows UI components to remain simple and responsive, while Microflow handles integration and business logic.

***

### Example Scenario

Assume a requirement where:

* A page needs to display **currency exchange rates**
* The data is provided by an external service such as **Fixer.io**
* Exchange rates must be fetched dynamically when the page loads or when a user triggers an action

To implement this:

1. A **Microflow** is created
2. The Microflow uses a **Web Service Node** (REST or SOAP) to call the Fixer.io API
3. The Microflow processes the response and returns the exchange‑rate data
4. The **Page Designer** invokes the Microflow and displays the returned data on the UI

This architecture keeps external service integration out of the UI layer.

***

### How Integration Works

The interaction flow is typically as follows:

1. **User interacts with the Page**
   * Page load, button click, or field change event
2. **Page invokes a Microflow**
   * Parameters from the page are passed to the Microflow
3. **Microflow executes integration logic**
   * Calls REST or SOAP services using Web Service Node
   * Or interacts with databases, files, or other systems
4. **Microflow returns the result**
   * Output Business Object is mapped back to the Page
5. **Page updates the UI dynamically**

***

### Integration Architecture Overview

The following diagram illustrates how UX/UI, Microflow, and external systems interact:

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FThwZq3GnNxNmpX6OHjsi%2Fimage.png?alt=media&#x26;token=d759cac2-5471-43bb-bbf3-abacbe5451ed" alt=""><figcaption></figcaption></figure>

In this architecture:

* **Page Designer** handles user interaction and presentation
* **Microflow** handles integration logic
* **External systems** are accessed via Microflow nodes

***

### Benefits of Integrating Microflow with UI

* Clean separation between UI and integration logic
* Reusable backend services across multiple pages
* Easier maintenance and testing
* Consistent access to external and internal data sources
* Improved scalability and performance

***

### When to Use Microflow for UI Integration

Use Microflow to integrate with UX/UI when:

* Data must be fetched dynamically from databases or services
* Backend logic should not be embedded in UI components
* External systems are involved
* Integration logic needs to be reused across pages

For long‑running or workflow‑driven interactions, **Process Designer** may be more appropriate.

***

### Summary

**Integrating Microflow with UX/UI** allows ONEWEB applications to deliver dynamic, data‑driven user experiences while keeping integration logic centralized and reusable.

Using Microflow with Page Designer, developers can:

* Call external services from the UI
* Dynamically load and update data on pages
* Keep UI components lightweight and responsive
* Maintain clean application architecture

This integration model is a core part of building **scalable and enterprise‑grade applications** 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/designer-reference/microflow-designer/integrate-microflow-with-ux-ui.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.