# Integrate Smart Form with Other Systems Using Microflow

In most enterprise applications, **dynamic user interfaces** require integration with backend logic to retrieve or update data based on user interaction.

For example:

* When a user enters a **ZIP code**
* The system automatically returns **province, district, and sub‑district**
* The data is retrieved dynamically from a database or an external system

In ONEWEB, this kind of UI dynamic behavior is implemented by integrating **Smart Forms** with **Microflows**, where Microflow acts as the **integration and service layer**.

***

### Purpose of Smart Form–Microflow Integration

Integrating Smart Forms with Microflow allows applications to:

* Execute backend logic in response to UI events
* Retrieve data dynamically from databases or external services
* Update UI fields automatically based on returned results
* Keep UI logic clean and lightweight

This approach ensures a **clear separation of concerns**:

* **Smart Form** → user interaction and presentation
* **Microflow** → integration and business logic

***

### Example Scenario

Assume the following requirement:

* A user inputs a ZIP code on a form
* The system fetches location details from the database
* The form displays province, district, and sub‑district automatically

To achieve this:

1. A **Microflow** is created to query the database
2. The **Smart Form** triggers the Microflow on a UI event
3. Input values are passed to the Microflow
4. Microflow returns the result
5. Output values are mapped back to form fields

***

### Smart Form Integration Using Microflow (Step‑by‑Step)

#### Step 1: Open App Designer

1. Navigate to **App Designer**
2. Open the application containing your Smart Form

***

#### Step 2: Open the Entity

1. Open the **Entity** bound to the Smart Form
2. Select the field or button that should trigger the Microflow

***

#### Step 3: Select Trigger Element

1. Click the **Integrate icon** on the selected field or button\
   (This icon is available on all fields and buttons)

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fw8rtQVdznBpj3ztIx888%2Fimage.png?alt=media&#x26;token=a3bf7f80-8d4d-4463-a1aa-99ded090b501" alt=""><figcaption></figcaption></figure>

***

#### Step 4: Open Microflow Configuration

Click the **Microflow** icon to open the **Microflow Configuration Window**.

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FBX7cIzRmMgwjVOGFq6WD%2Fimage.png?alt=media&#x26;token=76e3647a-c400-4ff1-81f2-2bc49251547b" alt=""><figcaption></figcaption></figure>

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2F7LeS1dUY6U3WwZZUZkmA%2Fimage.png?alt=media&#x26;token=1860b722-eea7-4f56-9255-04765e773aa5" alt=""><figcaption></figcaption></figure>

***

#### Step 5: Configure Microflow Invocation

In the **Microflow Configuration Window**:

1. Select **Event**
   * Example: `change()` (triggered when field value changes)
2. Click the **Microflow** selector button and choose:
   * **Project** – Your project name
   * **Microflow** – The Microflow to invoke
3. Set **Async** option:
   * `Y` → Asynchronous call ( UI does not wait )
   * `N` → Synchronous call ( UI waits for response )

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FgPJlF27jy7rhd2gSp52Y%2Fimage.png?alt=media&#x26;token=cbc12402-3b29-4cf1-bf08-6803bf59ef5d" alt=""><figcaption></figcaption></figure>

***

#### Step 6: Map Input Parameters

1. Map **Entity parameters** to **Microflow input parameters**
2. Drag and drop fields to match required input values

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FVwcCH8AdhqSVeB5uZSJ9%2Fimage.png?alt=media&#x26;token=2e0137dd-8d2e-41bb-aba0-c3d2c98a5928" alt=""><figcaption></figcaption></figure>

***

#### Step 7: Map Output (Response) Parameters

1. Open the **Response** tab
2. Map Microflow output parameters back to Entity fields
3. This allows the UI to update dynamically

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FmrahoT4t7MkLx8ABb3qv%2Fimage.png?alt=media&#x26;token=d1bcb679-12f9-48b7-8b45-d5e903330fc2" alt=""><figcaption></figcaption></figure>

***

#### Step 8: Save Configuration

1. Click **OK**
2. Save the Entity

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2FDLFJTlB8d9hgDkdYCcDY%2Fimage.png?alt=media&#x26;token=3043a325-d496-432b-9d05-6c2dd818de27" alt=""><figcaption></figcaption></figure>

***

### Runtime Behavior

Once configured:

* When the form is opened in **Runtime**
* And the user interacts with the configured field or button
* The Smart Form invokes the Microflow automatically
* Returned data is displayed on the UI dynamically

<figure><img src="https://2015371994-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FMpDjHWFRUtZ5nJcSfVXd%2Fuploads%2Fj4J8yW6dywkvHNTdCcgg%2Fimage.png?alt=media&#x26;token=13298e2a-f10a-48a2-b250-a9e9f9b14f37" alt=""><figcaption></figcaption></figure>

***

### Summary

Integrating **Smart Forms with Microflow** enables ONEWEB applications to deliver rich, dynamic, and data‑driven user experiences.

With this integration, developers can:

* Trigger backend logic from UI events
* Retrieve and display data dynamically
* Keep UI logic simple and clean
* Reuse Microflows across multiple forms

This pattern is fundamental for building **interactive, enterprise‑grade applications** using 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-smart-form-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.