---
title: "How to: Create a Proxy Layer Structure for Applications With Anonymous Users"
slug: "proxy-layer-structure-for-applications-with-anonymous-users"
description: "Learn how to implement a Proxy Layer Structure for secure data handling in applications, ensuring user anonymity and data protection."
updated: 2026-03-02T16:27:03Z
published: 2026-03-03T16:54:09Z
canonical: "docs.unqork.io/proxy-layer-structure-for-applications-with-anonymous-users"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# How to: Create a Proxy Layer Structure for Applications With Anonymous Users

Security is an important aspect when creating applications. You must ensure that data is protected from being accessed or updated. Security is especially crucial when making an application for anonymous users. This how-to guide describes using a **Proxy Layer Structure** for anonymous users.

## What Is the Proxy Layer Structure?

The Proxy Layer Structure takes an application and switches it to the server side. After that, actions performed by your application will not display in the underlying code.

Let’s say you have a module that collects an end-user's name, address, phone number, and email address. Then, you want to validate the data and create a submission for storage. A Proxy Layer Structure does this outside of your application's code.

The Proxy Layer Structure contains at least four modules. You might add more depending on what actions you'd like to perform. For this guide, you'll create six modules:

| Module | Description |
| --- | --- |
| Browser | This is the front-end of your application. The end-user interacts with this module to complete an application or upload files. |
| Proxy | This module switches your application from the front-end application to the server-side. > [!TIP] > For roles that initiate remote execution from an Express module, enhance Proxy module security by setting the permissions to `Write`. |
| Master | This module orchestrates actions, like validating data, creating submissions, or sending emails. The Master Module connects to each action and transmits data. |
| Validate | In this example, this module validates your end-user's data from the Browser module. |
| Create | In this example, this module is where your end-user’s data becomes a submission. |
| Schema | This is the endpoint of your application where the submission stores after validation. |

To begin configuring, click on the tab that matches your Unqork version:

**UDesigner**

## Setting Up the Browser Module

This **Front-End** module is the only module your end-user can access and input data. But if their entries do not match your requirements, they cannot submit the application. Instead, they'll see an error message asking them to update their entries before submitting.

> [!NOTE]
> These instructions assume you have a new **Front-End** module open, saved, and with a title.

### Configure the Panel Component

Begin by adding a [Panel](https://docs.unqork.io/docs/panel-component) component to act as a container for the components that follow.

1. In the **Module Builder**, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelPersonalInfo`.
3. Click **Save Component**.

### Configure the Columns Component

This [Columns](https://docs.unqork.io/docs/columns-component) component keeps your Browser module organized for your end-user. You’ll place fields for your end-user’s first, middle, and last name.

1. Drag and drop a **Columns** component onto your canvas, placing it in the `panelPersonalInfo` Panel component.
2. In the **Property ID** field, enter `colPersonalInfo`.
3. In the **Default State Options**, select the icon displaying three evenly spaced columns.
4. Click **Save Component**.

### Configure the Text Field Components

To collect your end-user’s name, configure three [Text Field](https://docs.unqork.io/docs/text-field-component) components.

1. Drag and drop three **Text Field** components onto your canvas, placing one in each of your three columns.
2. In the **Property ID** and **Label Text** fields, enter the following:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
3. In the `firstName` and `lastName` **Text Field** components, set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. Click **Save Component** for each component as you add it.

### Configure the Address Component

To collect your user’s address, configure an [Address](https://docs.unqork.io/docs/address-v1-component) component to call the Google Maps API for autoformatting.

1. Drag and drop an **Address** component inside the `panelPersonalInfo` **Panel** component, below your `colPersonalInfo` **Columns** component.
2. In the **Property ID** field, enter `address`.
3. In the **Label Text** field, enter `Address`.
4. Click **Save Component**.

### Configure the Phone Number Component

To collect your end-user’s phone number, configure a [Phone Number](https://docs.unqork.io/docs/phone-number-component) component.

1. Drag and drop a **Phone Number** component inside the `panelPersonalInfo` **Panel** component, below your `address` **Address** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. In the **Regular Expression Pattern** field, enter `^(\+\d{1,2}\s)?\(?\d{3}\)?[()\s.-]?\d{3}[\s.-]?\d{4}$`.

> [!NOTE]
> A Regular Expression Pattern enforces phone number formatting. This expression returns an error if your end-user enters letters or special characters.

![A static image displaying the Phone number input field with validation options and regular expression pattern displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_PhoneNumber(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save Component**.

### Configure the Email Component

To collect your end-user’s email address, configure an [Email](https://docs.unqork.io/docs/email-component) component.

1. Drag and drop an **Email** component inside the `panelPersonalInfo` **Panel** component, below your `phoneNumber` **Phone Number** component.
2. In the **Property ID** and **Label Text** fields, enter `Email`.
3. In the **Validation** field, set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. In the **Regular Expression Pattern** field, enter `^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$`.

> [!NOTE]
> The Regular Expression Pattern enforces email formatting. This expression returns an error if your end-user enters an invalid email address.

![A static image displaying the Email input field with validation options and error messages for user guidance.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_Email.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save Component**.

### Configure the Button Component

When your end-user completes their entry, they’ll need to submit it. So, add a [Button](https://docs.unqork.io/docs/how-to-guide-button-component) component to your module.

1. Drag and drop a **Button** component inside the `panelPersonalInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** field, enter `btnValidate`.
3. In the **Label Text** field, enter `Submit`.
4. From the **Action Type** drop-down, select **Event**.
5. From the **On Click** drop-down, enter `pluginCreatePersonalInfoProxy`.

> [!NOTE]
> The On Click setting connects the Button component to a Plug-In component you'll add in the next step. When an end-user clicks the button, the Plug-In component triggers.

![A static image displaying the Button configuration with action type and triggers for user interaction settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_Button.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save Component**.

### Configure the Plug-In Component

To pass the data collected by your Browser module to the Proxy module, you’ll use a [Plug-In](/v1/docs/plug-in-component) component. This Plug-In component also receives a response at the end of the data flow. Depending on this result, either a `Success` or an `Error` message is displayed to the end-user.

1. Drag and drop a **Plug-In** component inside the `panelPersonalInfo` **Panel** component, below your `submit` **Button** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginCreatePersonalInfoProxy`.
3. From the **Internal Services** drop-down, select **Execute** **Module**. The Request Type and Data Source URL autopopulate.

> You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this Plug-In component once you have created your Proxy module and replace the `{moduleId}` placeholder with the module ID of your Proxy module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | resolution | data.resolved.resolution |
| 2 | referenceNumber | data.resolved.referenceNumber |

> [!NOTE]
> The Outputs table sends the data to two Hidden components you'll add in the next step.

![A static image displaying the Configuration settings for Unqork plugin, including input and output mappings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_Plugin.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save Component**.

### Configure the Hidden Components

When completed, the data flow returns a result to the Browser module and stores it in two [Hidden](https://docs.unqork.io/docs/hidden-component) components. The `resolution` **Hidden** component manages the response from any module further along in the data flow. The `referenceNumber` **Hidden** component retains the end-user's reference number once their submission has been saved.

1. Drag and drop two **Hidden** components inside the `panelPersonalInfo` **Panel** component, below your `pluginCreatePersonalInfoProxy` **Plug-In** component.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |
3. Set **Store Data in Database** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. Click **Save Component** for each component as you add it.

### Configure the Decisions Component

Next, you’ll configure a Decisions component at the end of the data flow to display either a `Success` or an `Error` message to your end-user.

1. Drag and drop a **Decisions** component inside the `panelPersonalInfo` **Panel** component, below your Hidden components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleShowMessage`.
3. From the **Trigger Type** drop-down, select **Watch**.
4. In the **Inputs** table, enter the following:

| # | Source | Type | Required |
| --- | --- | --- | --- |
| 1 | resolution | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(901).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (checked) |
5. In the **Outputs** table, enter the following:

| # | Source | Type |
| --- | --- | --- |
| 1 | successMessage | visible |
| 2 | errorMessage | visible |

> [!NOTE]
> These Property IDs refer to the HTML Element components you'll add in the next few steps.
6. In the **Conditionals** table, enter the following:

| # | resolution | successMessage_visible | errorMessage_visible |
| --- | --- | --- | --- |
| 1 | Success | yes | no |
| 2 | Error | no | yes |

![A static image displaying the Decision component showing inputs, outputs, and conditionals for message visibility rules.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_decisons.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save Component**.

### Configure the Success HTML Element Component

This [HTML Element](/v1/docs/html-element-component) component acts as your `Success` message. This component remains hidden until the data flow returns a response.

1. Drag and drop an **HTML Element** component inside the `panelPersonalInfo` **Panel** component, below your `ruleShowMessage` **Decisions** component.
2. In the **Property ID** field, enter `successMessage`.
3. In the **Content** field, enter `Your submission is complete!`.
4. Set **Hide Field** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Tag** field, enter `h4`.
6. In the **Custom CSS Class for Container** field, enter `successMessage`.

![A static image displaying the Success message indicating submission completion in a web form interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_SuccessMessage.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save Component**.

### Configure the Error HTML Element Component

This [HTML Element](/v1/docs/html-element-component) component acts as your `Error` message. This component remains hidden until the data flow returns a response.

1. Drag and drop a second **HTML Element** component inside the `panelPersonalInfo` **Panel** component, below your `successMessage` **HTML Element** component.
2. In the **Property ID** field, enter `errorMessage`.
3. In the **Content** field, enter `We're experiencing some issues with the submission. Please review the information you provided.`.
4. Set **Hide Field** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Tag** field, enter `h4`.
6. In the **Custom CSS Class for Container** field, enter `errorMessage`.

![A static image displaying the Error message indicating submission issues and instructions for user review.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_ErrorMessage.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save Component**.
8. **Save** your module.

Here's how your Browser module looks in the Module Builder:

![A static image displaying the Form fields for personal information submission including name, address, phone, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/BrowserModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

And here's how your Browser module looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyStructure_BrowserModule_EV.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)You now have a user-facing Browser module to collect the end-user’s personal information. Your Browser module initiates the data flow when your end-user clicks the **Submit** button.

## Setting Up the Proxy Module

After a successful submission in the Browser module, the end-user's data passes to the Proxy module. Your Proxy module works on the server-side only, so your end-user's don’t see it in Express View.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

1. In the Module Builder, click the ![ellipsisButtonDummy.jpg](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsisButtonDummy.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**ellipsis**) button.
2. Select **Module** **Settings**.
3. To the left of the modal, click **Module** **Settings**.
4. Set **Act as Super-user when Server Side Executing** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.

> [!TIP]
> This setting does not grant Super-user access to the end-user, only server-side module access. To enhance security, you can set the Proxy module permissions to `Write` for the roles that need to initiate remote execution from the Express module.

![A static image displaying the Settings menu displaying module options and server-side execution features for configuration.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModule_Settings.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save & Close**.

### Configure the Panel Components

These [Panel](/v1/docs/panel-component) components act as containers for the components that follow. The `panelRequest` **Panel** component manages the end-user’s data. The `panelConfig` **Panel** component manages the data validation and progresses the data flow. The `panelResponse` **Panel** component manages the result of the data flow. Lastly, the `panelInfo` **Panel** component is not used further in the configuration, so you can remove it.

1. In the Module Builder, hover over the existing components within the **panelConfig** and delete them, as they are no longer required in the configuration.
2. Click **Save Component.**

### Configure the API Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This indicates the HTTP request your module simulates.
4. Click **Save Component**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store data passed from the Browser module.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | address | address |
| 5 | phoneNumber | phoneNumber |
| 6 | email | email |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in your Browser module. They must match for data mapping purposes.
3. Click **Save Component** for each component as you add it.

### Configure the Response Hidden Components

These [Hidden](/v1/docs/hidden-component) components handle the data flow response.

1. Drag and drop two **Hidden** components inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in your Browser module. They must match for data mapping purposes.
3. Click **Save Component** for each component as you add it.

### Configure the Initializer Components

These [Initializer](https://docs.unqork.io/docs/initializer-component) components trigger the data flow. Your `initExecute` **Initializer** component progresses the data flow forward. If an error occurs, the `initError` **Initializer** component sends the response back to the Browser module.

1. Drag and drop an **Initializer** component inside the `panelConfig` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initExecute`.
3. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginValidatePersonalInfo | trigger | GO |

> [!NOTE]
> This Property ID must match the Property ID of the Plug-In component you'll add later.

![A static image displaying the Configuration settings for a trigger action in the interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModule_InitExecute.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
4. Click **Save Component**.
5. Drag and drop another **Initializer** component inside the `panelConfig` **Panel** component, below your `initExecute` **Initializer** component.
6. In the **Property ID** and **Canvas Label Text** fields, enter `initError`.
7. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | resolution | value | Error |

![A static image displaying the Configuration settings for a trigger action in the interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModule_InitExecute.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save Component**.

### Configure the Plug-In Component

To pass the data from your Proxy module to the Master module, you’ll use a [Plug-In](https://docs.unqork.io/docs/plug-in-component) component. This Plug-In component also receives a response from the rest of the data flow.

1. Drag and drop a **Plug-In** component inside the `panelConfig` **Panel** component, between the Initializer components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginValidatePersonalInfo`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.
4. In the **Inputs** table, enter the following:

| # | Property Id | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property Id | Mapping |
| --- | --- | --- |
| 1 | resolution | data.resolved.resolution |
| 2 | referenceNumber | data.resolved.referenceNumber |

![A static image displaying the Form fields for personal information input and output mapping in a plugin interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModulePlugin1.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. From the **Error Trigger** drop-down, select **initError**.
7. Set **Assign Values If They Are Null or Empty String** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_OFF(3).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(OFF)**.

![A static image displaying the Configuration settings for a plugin with error trigger and advanced options highlighted.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModule_Plugin2.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save Component**.
9. **Save** your module.

Here's how your Proxy Module looks in the Module Builder:

![A static image displaying the User input fields for personal information validation in the Module Builder.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyModule_MB(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

## Connect the Proxy and Browser Modules

Next, you'll connect your Proxy module to the Browser module.

1. In your Browser module, hover over the `pluginCreatePersonalInfoProxy` **Plug-In** component. A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Proxy module.

> To locate the module ID, look in the module URL. You can see the module ID for our sample Proxy module bolded here: https://training.unqork.io/#/form/**5ebc0fa57b2213020fc9ee03**/edit.

![A static image displaying the Configuration settings for a plugin including data source URL and request type options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyLinkedtoBrowser.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only Proxy module to pass data from the Browser module.

## Setting Up the Master Module

The Master module communicates with subsequent modules to orchestrate data validation and the creation of end-user submissions.

> These instruction assume you have a new **API** module open, saved, and with a title.

### Configure the Panel Components

The [Panel](/v1/docs/panel-component) component acts as a container for the components that follow. The `panelRequest` **Panel** component manages your end-user’s data. The `panelValidate` **Panel** component manages the data validation. Your `panelCreateSubmission` **Panel** component manages the creation of the end-user’s submission. And your `panelResponse` **Panel** component manages error and success messages.

Hover over the `panelInfo` and `panelConfig` **Panel** components and delete them because they are no longer required in the configuration.

1. In the Module Builder, drag and drop two **Panel** components onto your canvas, placing them between the `panelRequest` and `panelResponse` **Panel** components.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | panelValidate | panelValidate |
| 2 | panelCreateSubmission | panelCreateSubmission |
3. Click **Save Component** for each component as you add it.

### Configure the API Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save Component**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store data passed from the Browser module.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | address | address |
| 5 | phoneNumber | phoneNumber |
| 6 | email | email |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Proxy module. They must match for data mapping purposes.
3. Click **Save Component** for each component as you add it.

### Configure the Response Hidden Components

These [Hidden](/v1/docs/hidden-component) components handle the data flow response.

1. Drag and drop two **Hidden** components inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Proxy module. They must match for data mapping purposes.
3. Click **Save Component** for each component as you add it.

### Configure the Validation Initializer Component

This [Initializer](/v1/docs/initializer-component) component progresses the data validation flow.

1. Drag and drop an **Initializer** component inside the `panelValidate` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initValidate`.
3. In the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginValidate | trigger | GO |

![A static image displaying the Initializer settings for a plugin validation action in a submission process.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_InitValidate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save Component**.

### Configure the Create Submission Initializer Component

This [Initializer](/v1/docs/initializer-component) component creates the submission once your end-user’s data validates.

1. Drag and drop an **Initializer** component inside the `panelCreateSubmission` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initCreate`.
3. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginSaveSubmission | trigger | GO |

![A static image displaying the Initializer settings with actions for manual trigger and outputs configuration.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_InitCreate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
4. Click **Save Component**.

### Configure the Response Handling Initializer Components

These [Initializer](/v1/docs/initializer-component) components relay `Success` or `Error` messages back up the data flow to the Browser module.

1. Drag and drop an **Initializer** component inside the `panelCreateSubmission` **Panel** component, below the `initCreate` **Initializer** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initSuccess`.
3. Set the **Trigger Type** as **Watch**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | resolution | value | Success |

![A static image displaying the Initializer settings with actions and outputs for a successful resolution trigger.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_InitSuccess.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save Component**.
6. Drag and drop another **Initializer** component inside the `panelCreateSubmission` **Panel** component below the `initSuccess` **Initializer** component.
7. In the **Property ID** and **Canvas Label Text** fields, enter `initError`.
8. Set the **Trigger Type** as **Watch**.
9. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | resolution | value | Error |

![A static image displaying the Initializer settings with property ID and output configurations for error handling.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_InitError.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
10. Click **Save Component**.

### Configure the Validation Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component progresses the data validation flow.

1. Drag and drop a **Plug-In** component inside the `panelValidate` **Panel** component, below the `initValidate` **Initializer** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginValidate`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.

> The Request Type and Data Source URL autopopulate. You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this [Plug-In](/v1/docs/plug-in-component) component once you have created your Validation module. Then you'll replace `{moduleId}` with the module ID for your Validation module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. Set the **Trigger Type** as **Watch**.
6. From the **Post Trigger** drop-down, select **initCreate**.
7. From the **Error Trigger** drop-down, select **initError**.

![A static image displaying the Plugin Configuration settings with input fields and trigger actions displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_plugInValiddate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save Component**.

### Configure the Save Submission Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component sends data to the Creation module.

1. Drag and drop a **Plug-In** component inside the `panelCreateSubmission` **Panel** component between the `initCreate` and `initSuccess` **Initializer** components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginSaveSubmission`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.

> The Request Type and Data Source URL autopopulate. You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this Plug-In component once you have created your Validation module. Then you'll replace `{moduleId}` with the module ID for your Validation module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | referenceNumber | id |
6. From the **Post Trigger** drop-down, select **initSuccess**.
7. From the **Error Trigger** drop-down, select **initError**.

![A static image displaying the Form layout showing data inputs and outputs for Unqork plugin submission.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_PluginSaveSubmission.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save Component**.
9. **Save** your module.

Here's how your Master module looks in the Module Builder:

![A static image displaying the Form fields for user information submission including validation and response sections.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/MasterModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Connect the Master and Proxy Modules

Next, you'll connect your Master module to the Proxy module.

1. In your Proxy module, hover over the `pluginValidatePersonalInfo` **Plug-In** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Master module.

> [!NOTE]
> To find the module ID, look in the module URL. You can see the module ID for our sample Master module bolded here: https://training.unqork.io/#/form/**5ebc196fb47819020ecd171a**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only module that passes data where needed to perform your desired actions. Your Master module continues the data flow from the Proxy module.

## Setting Up the Validation Module

The first action the Master module calls is data validation. This is the second time your end-users data validates. But unlike the first time, this validation occurs on the server side. This ensures the data still matches the requirements you set in the Browser module. If validation fails, an error message triggers and sends it back to the data flow.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Update the Panel Component

Your [Panel](/v1/docs/panel-component) component acts as a container for the components that follow. Your `panelRequest` **Panel** manages the data passed from the Browser module. Hover over the `requestParameter` **Hidden** component and delete it.

Then, hover over the `panelInfo`, `panelConfig`, and `panelResponse` **Panel** components and delete them because they are no longer required in the configuration.

### Configure the Columns Component

Columns help keep your Validation module organized. You’ll place the first, middle, and last name fields here as you did in the Browser module.

1. Drag and drop a **Columns** component inside the `panelRequest` **Panel** component.
2. In the **Property ID** field, enter `colPersonalInfo`.
3. In the **Display** field, select the icon for three evenly spaced columns.
4. Click **Save Component**.

### Configure the Text Field Components

1. Drag and drop three **Text Field** components onto your canvas, placing them inside each of your three columns.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
3. Set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)** in your `firstName` and `lastName` **Text Field** components.
4. Click **Save Component** for each component as you add it.

### Configure the Address Component

1. Drag and drop an **Address** component onto your canvas, placing it below the `colPersonalInfo` **Columns** component.
2. In the **Property ID** field, enter `address`.
3. In the **Label Text** field, enter `Address`.
4. Click **Save Component**.

### Configure the Phone Number Component

1. Drag and drop a **Phone Number** component onto your canvas, placing it below your `address` **Address** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. In the **Regular Expression Pattern** field, enter `^(\+\d{1,2}\s)?\(?\d{3}\)?[()\s.-]?\d{3}[\s.-]?\d{4}$`.

> [!NOTE]
> This Regular Expression Pattern validates the data against the same requirement set in the Browser module.
5. Click **Save Component**.

### Configure the Email Component

1. Drag and drop an **Email** component onto your canvas, placing it below the `phoneNumber` **Phone Number** component.
2. In the **Property ID** field, enter `email`.
3. In the **Label Text** field, enter `Email`.
4. Set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Regular Expression Pattern** field, enter `^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$`.

> [!NOTE]
> This validates the data against the same requirement set in the Browser Module.
6. Click **Save Component**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save Component**.
5. **Save** your module.

Here's how your Validation module looks in the Module Builder:

![A static image displaying the Form fields for personal information including name, address, phone number, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ValidationModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

## Connect the Validation and Master Modules

Next, you'll connect your Validation module back to the Master module.

1. In your Master module, hover over the `pluginValidate` **Plug-In** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Validation module.

> You can see the module ID for our sample Validation module bolded here: https://training.unqork.io/#/form/**5ebc28147b2213020fc9ef10**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only module that validates end-user data passed from the Master module. Your Validation module is the end of the validation portion of this Proxy Structure.

## Setting Up the Creation Module

Once data clears the Validation module, the Master module passes it to the next step. The Creation module handles it by creating the submission. Submissions then pass to the Schema module for storage, which you'll create in the next step. If the Creation module fails, an error message sends it back in the flow.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Configure the Panel Component

Your [Panel](/v1/docs/panel-component) components act as containers for the components that follow. Your `panelRequest` **Panel** component manages the data passed from the Browser module. Your `panelCreateSubmission` **Panel** component manages the submission for storage in the Schema module. And your `panelResponse` **Panel** component manages the error handling.

Hover over the `panelInfo` and `panelConfig` Panel components and delete them because they are no longer required in the configuration.

1. In the **Module Builder**, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `panelCreateSubmission`.
3. Click **Save Component**.

### Configure the API Hidden Component

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save Component**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store the data passed from the Browser module. Hover over the existing Hidden component and delete it because it’s not required in the configuration.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | email | email |
| 5 | address | address |
| 6 | phoneNumber | phoneNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Master module. They must match to ensure proper data mapping.
3. Click **Save Component** for each component as you add it.

### Configure the Response Hidden Component

This [Hidden](/v1/docs/hidden-component) component handles the data flow response. Hover over the existing Hidden component and delete it because it’s not required in the configuration.

1. Drag and drop another **Hidden** component inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `referenceNumber`.

> [!NOTE]
> This Property ID is the same as the Property ID used in the Master module. They must match to ensure proper data mapping.
3. Click **Save Component**.

### Configure the Plug-In Component

1. Drag and drop a **Plug-In** component inside the `panelCreateSubmission` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginSaveSubmission`.
3. From the **Internal Services** drop-down, select **Create Module Submissions(s)**.

> You'll return to this Plug-In component once you have created your Schema module. Then you'll replace `{moduleId}` with the module ID for your Schema module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | referenceNumber | id |
6. Set **Assign Values If They Are Null or Empty String** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_OFF(6).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(OFF)**.

![A static image displaying the Plugin settings for internal services submission including first name, address, and phone number.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CreationModule_PluginSavesubmission.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save Component**.

### Configure the Initializer Component

1. Drag and drop an **Initializer** component onto your canvas, placing it below your `pluginSaveSubmission` **Plug-In** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initSave`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginSaveSubmission | trigger | GO |

![A static image displaying the Initializer Settings for a new submission trigger with output parameters displayed in a user interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CreationModule_InitSave.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save Component**.
6. **Save** your module.

Here's how your Creation module looks in the Module Builder:

![A static image displaying the Form fields for user information submission including first name, last name, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CreationModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Connect the Creation and Master Modules

Next, you'll connect your Creation module to the Master module.

1. In your Master module, hover over the `pluginSaveSubmission` **Plug-In** component.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Creation Module.

> [!NOTE]
> You can see the module ID for our sample Creation module bolded here: https://training.unqork.io/#/form/**5ebc3204b47819020ecd1d55**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only Creation module that creates a submission based on end-user data. Your Creation module passes that submission to the Schema module for storage.

## Setting Up the Schema Module

From the Creation module, your end-user submissions are stored in your Schema module. The Schema module only serves as storage and doesn't take any actions.

The Schema module components mirror the data-entry fields from your Browser module. You’ll apply the same requirements in the Schema module as you did in the Browser module.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Configure the Hidden Components

To set up the Schema module, you’ll add six [Hidden](/v1/docs/hidden-component) components. Your Hidden components correspond to the data fields in your Browser module.

1. In the Module Builder, drag and drop six **Hidden** components onto your canvas.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
| 4 | address | Address |
| 5 | phoneNumber | Phone Number |
| 6 | email | Email |
3. Click **Save Component** for each component as you add it.
4. **Save** your module.

Here's how your Schema module looks in the Module Builder:

![A static image displaying the Form fields for personal information including name, address, phone number, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/SchemaModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

## Connect the Schema and Creation Modules

Next, you'll connect your Schema module back to the Creation module.

1. In your Creation module, hover over the `pluginSaveSubmission` **Plug-In** component.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL** field, replace `{moduleId}` with the module ID of your Schema module.

> [!NOTE]
> You can see the module ID for our sample Schema module bolded here: https://training.unqork.io/#/form/**5ebd7fb0ce23f0020fbf91d5**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Schema module that stores end-user submissions. You can use this Schema module to populate a dashboard to view end-user submissions.

You now have a series of six modules that form a Proxy Layer Structure. The structure begins with the Browser module, where your end-user submits their information. Then, the data passes through the rest of the data flow, hiding it from any code. All the end-user sees after clicking **Submit** is a `Success` or an `Error` message.Lab

**Classic Designer**

## Setting Up the Browser Module

This **Front-End** module is the only module your end-user can access and input data. But if their entries do not match your requirements, they cannot submit the application. Instead, they'll see an error message asking them to update their entries before submitting.

> [!NOTE]
> These instructions assume you have a new **Front-End** module open, saved, and with a title.

### Configure the Panel Component

Begin by adding a [Panel](https://docs.unqork.io/docs/panel-component) component to act as a container for the components that follow.

1. In the **Module Builder**, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** field, enter `panelPersonalInfo`.
3. Click **Save & Close**.

### Configure the Columns Component

This [Columns](https://docs.unqork.io/docs/columns-component) component keeps your Browser module organized for your end-user. You’ll place fields for your end-user’s first, middle, and last name.

1. Drag and drop a **Columns** component onto your canvas, placing it in the `panelPersonalInfo` Panel component.
2. In the **Property ID** field, enter `colPersonalInfo`.
3. In the **Default State Options**, select the icon displaying three evenly spaced columns.
4. Click **Save & Close**.

### Configure the Text Field Components

To collect your end-user’s name, configure three [Text Field](https://docs.unqork.io/docs/text-field-component) components.

1. Drag and drop three **Text Field** components onto your canvas, placing one in each of your three columns.
2. In the **Property ID** and **Label Text** fields, enter the following:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
3. In the `firstName` and `lastName` **Text Field** components, set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. Click **Save & Close** for each component as you add it.

### Configure the Address Component

To collect your user’s address, configure an [Address](https://docs.unqork.io/docs/address-v1-component) component to call the Google Maps API for autoformatting.

1. Drag and drop an **Address** component inside the `panelPersonalInfo` **Panel** component, below your `colPersonalInfo` **Columns** component.
2. In the **Property ID** field, enter `address`.
3. In the **Label Text** field, enter `Address`.
4. Click **Save**.

### Configure the Phone Number Component

To collect your end-user’s phone number, configure a [Phone Number](https://docs.unqork.io/docs/phone-number-component) component.

1. Drag and drop a **Phone Number** component inside the `panelPersonalInfo` **Panel** component, below your `address` **Address** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. In the **REGULAR EXPRESSION PATTERN** field of the **Validation** section, enter `^(\+\d{1,2}\s)?\(?\d{3}\)?[()\s.-]?\d{3}[\s.-]?\d{4}$`.

> [!NOTE]
> A Regular Expression Pattern enforces phone number formatting. This expression returns an error if your end-user enters letters or special characters.

![A static image displaying the Phone Number Component settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_BrowserModule_PhonNumber.jpeg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save**.

### Configure the Email Component

To collect your end-user’s email address, configure an [Email](https://docs.unqork.io/docs/email-component) component.

1. Drag and drop an **Email** component inside the `panelPersonalInfo` **Panel** component, below your `phoneNumber` **Phone Number** component.
2. In the **Property ID** and **Label Text** fields, enter `Email`.
3. In the **Validation** field, set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. In the **Regular Expression Pattern** field, enter `^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$`.

> [!NOTE]
> The Regular Expression Pattern enforces email formatting. This expression returns an error if your end-user enters an invalid email address.

![A static image displaying the Email component settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_BrowserModule_Email.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save**.

### Configure the Button Component

When your end-user completes their entry, they’ll need to submit it. So, add a [Button](https://docs.unqork.io/docs/how-to-guide-button-component) component to your module.

1. Drag and drop a **Button** component inside the `panelPersonalInfo` **Panel** component, below your `email` **Email** component.
2. In the **Property ID** field, enter `btnValidate`.
3. In the **Label Text** field, enter `Submit`.
4. Set the **Action Type** as **Event**.
5. From the **On Click** drop-down, enter `pluginCreatePersonalInfoProxy`.

> [!NOTE]
> The On Click setting connects the Button component to a Plug-In component you'll add in the next step. When an end-user clicks the button, the Plug-In component triggers.

![A static image displaying the Button component settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_BrowserModule_ButtonValidate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save & Close**.

### Configure the Plug-In Component

To pass the data collected by your Browser module to the Proxy module, you’ll use a [Plug-In](/v1/docs/plug-in-component) component. This Plug-In component also receives a response at the end of the data flow. Depending on this result, either a `Success` or an `Error` message is displayed to the end-user.

1. Drag and drop a **Plug-In** component inside the `panelPersonalInfo` **Panel** component, below your `submit` **Button** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginCreatePersonalInfoProxy`.
3. From the **Internal Services** drop-down, select **Execute** **Module**. The Request Type and Data Source URL autopopulate.

> You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this Plug-In component once you have created your Proxy module and replace the `{moduleId}` placeholder with the module ID of your Proxy module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | resolution | data.resolved.resolution |
| 2 | referenceNumber | data.resolved.referenceNumber |

> [!NOTE]
> The Outputs table sends the data to two Hidden components you'll add in the next step.

![A static image displaying the Settings page for a plugin with input and output mapping fields displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_BrowserModule_PluginCreatePersonal.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
6. Click **Save**.

### Configure the Hidden Components

When completed, the data flow returns a result to the Browser module and stores it in two [Hidden](https://docs.unqork.io/docs/hidden-component) components. The `resolution` **Hidden** component manages the response from any module further along in the data flow. The `referenceNumber` **Hidden** component retains the end-user's reference number once their submission has been saved.

1. Drag and drop two **Hidden** components inside the `panelPersonalInfo` **Panel** component, below your `pluginCreatePersonalInfoProxy` **Plug-In** component.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |
3. Set **Store Data in Database** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
4. Click **Save & Close** for each component as you add it.

### Configure the Decisions Component

Next, you’ll configure a Decisions component at the end of the data flow to display either a `Success` or an `Error` message to your end-user.

1. Drag and drop a **Decisions** component inside the `panelPersonalInfo` **Panel** component, below your Hidden components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `ruleShowMessage`.
3. Set the **Trigger Type** as **Watch**.
4. In the **Inputs** table, enter the following:

| # | Source | Type | Required |
| --- | --- | --- | --- |
| 1 | resolution | exact | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/image(901).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (checked) |
5. In the **Outputs** table, enter the following:

| # | Source | Type |
| --- | --- | --- |
| 1 | successMessage | visible |
| 2 | errorMessage | visible |

> [!NOTE]
> These Property IDs refer to the HTML Element components you'll add in the next few steps.
6. In the **Micro Decisions** table, enter the following:

| # | resolution | successMessage_visible | errorMessage_visible |
| --- | --- | --- | --- |
| 1 | Success | yes | no |
| 2 | Error | no | yes |

![A static image displaying the Decisions component settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_BrowserModule_Decision.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save**.

### Configure the Success HTML Element Component

This [HTML Element](/v1/docs/html-element-component) component acts as your `Success` message. This component remains hidden until the data flow returns a response.

1. Drag and drop an **HTML Element** component inside the `panelPersonalInfo` **Panel** component, below your `ruleShowMessage` **Decisions** component.
2. In the **Property ID** field, enter `successMessage`.
3. In the **Content** field, enter `Your submission is complete!`.
4. Set **Hide Field** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Tag** field, enter `h4`.
6. In the **Custom CSS Class for Container** field, enter `successMessage`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppSecurity_AnonymousBrowser_HTML_01.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save**.

### Configure the Error HTML Element Component

This [HTML Element](/v1/docs/html-element-component) component acts as your `Error` message. This component remains hidden until the data flow returns a response.

1. Drag and drop a second **HTML Element** component inside the `panelPersonalInfo` **Panel** component, below your `successMessage` **HTML Element** component.
2. In the **Property ID** field, enter `errorMessage`.
3. In the **Content** field, enter `We're experiencing some issues with the submission. Please review the information you provided.`.
4. Set **Hide Field** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Tag** field, enter `h4`.
6. In the **Custom CSS Class for Container** field, enter `errorMessage`.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppSecurity_AnonymousBrowser_HTML_02.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save**.
8. **Save** your module.

Here's how your Browser module looks in the Module Builder:

![A static image displaying the configuration for personal information submission, including name, phone, and email sections.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_browsermoduel_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

And here's how your Browser module looks in Express View:

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ProxyStructure_BrowserModule_EV.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

You now have a user-facing Browser module to collect the end-user's personal information. Your Browser module begins the data flow when your end-user clicks the **Submit** button.

## Setting Up the Proxy Module

After a successful submission in the Browser module, the end-user's data passes to the Proxy module. Your Proxy module works on the server-side only, so your end-user's don’t see it in Express View.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

1. In the Module Builder, click the ![ellipsisButtonDummy.jpg](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ellipsisButtonDummy.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**ellipsis**) button.
2. Select **Module** **Settings**.
3. To the left of the modal, click **Module** **Settings**.
4. Set **Act as Super-user when Server Side Executing** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.

> [!TIP]
> This setting does not grant Super-user access to the end-user, only server-side module access. To enhance security, you can set the Proxy module permissions to `Write` for the roles that need to initiate remote execution from the Express module.
5. Click **Save & Close**.

### Configure the Panel Components

These [Panel](/v1/docs/panel-component) components act as containers for the components that follow. The `panelRequest` **Panel** component manages the end-user’s data. The `panelConfig` **Panel** component manages the data validation and progresses the data flow. The `panelResponse` **Panel** component manages the result of the data flow. Lastly, the `panelInfo` **Panel** component is not used further in the configuration, so you can remove it.

1. In the Module Builder, hover over the existing components within the **panelConfig** and delete them, as they are no longer required in the configuration.
2. Click **Save & Close**.

### Configure the API Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This indicates the HTTP request your module simulates.
4. Click **Save & Close**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store data passed from the Browser module.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | address | address |
| 5 | phoneNumber | phoneNumber |
| 6 | email | email |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in your Browser module. They must match for data mapping purposes.
3. Click **Save & Close** for each component as you add it.

### Configure the Response Hidden Components

These [Hidden](/v1/docs/hidden-component) components handle the data flow response.

1. Drag and drop two **Hidden** components inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in your Browser module. They must match for data mapping purposes.
3. Click **Save & Close** for each component as you add it.

### Configure the Initializer Components

These [Initializer](https://docs.unqork.io/docs/initializer-component) components trigger the data flow. Your `initExecute` **Initializer** component progresses the data flow forward. If an error occurs, the `initError` **Initializer** component sends the response back to the Browser module.

1. Drag and drop an **Initializer** component inside the `panelConfig` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initExecute`.
3. Set the **Trigger Type** to **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginValidatePersonalInfo | trigger | GO |

> [!NOTE]
> This Property ID must match the Property ID of the Plug-In component you'll add later.

![A static image displaying the Display settings for a trigger action labeled 'New Submission' in a software interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ProxyModule_InitExecute.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save & Close**.
6. Drag and drop second **Initializer** component onto your canvas, placing it below your `initExecute` **Initializer** component.
7. In the **Property ID** and **Canvas Label Text** fields, enter `initError`.
8. In the **Outputs** table, enter the following:

| Property ID | Type | Value |
| --- | --- | --- |
| resolution | value | Error |

![A static image displaying the Initializer settings showing an error related to resolution in the output section.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ProxyModule_InitError.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
9. Click **Save & Close**.

### Configure the Plug-In Component

To pass the data from your Proxy module to the Master module, you’ll use a [Plug-In](https://docs.unqork.io/docs/plug-in-component) component. This Plug-In component also receives a response from the rest of the data flow.

1. Drag and drop a **Plug-In** component inside the `panelConfig` **Panel** component, between the Initializer components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginValidatePersonalInfo`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.
4. In the **Inputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| firstName | data.firstName |
| middleName | data.middleName |
| lastName | data.lastName |
| address | data.address |
| phoneNumber | data.phoneNumber |
| email | data.email |
5. In the **Outputs** table, enter the following:

| Property ID | Mapping |
| --- | --- |
| resolution | data.resolved.resolution |
| referenceNumber | data.resolved.referenceNumber |
6. From the **Error Trigger** drop-down, select **initError**.
7. Set **Assign Values If They Are Null or Empty String** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_OFF.png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(OFF)**.

![A static image displaying the Settings interface for a plugin with data mapping and action configurations displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ProxyModule_Pluginvalidate(1).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save**.
9. **Save** your module.

Here's how your Proxy module looks in the Module Builder:

![A static image displaying the Form fields for personal information including name, address, and contact details.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ProxyModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Connect the Proxy and Browser Modules

Next, you'll connect your Proxy module to the Browser module.

1. In your Browser module, hover over the `pluginCreatePersonalInfoProxy` **Plug-In** component. A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Proxy module.

> [!NOTE]
> To locate the module ID, look in the module URL. You can see the module ID for our sample Proxy module bolded here: https://training.unqork.io/#/form/**5ebc0fa57b2213020fc9ee03**/edit.

![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/AppSecurity_AnonymousBrowser_Plugin_05.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
4. Click **Save**.
5. **Save** your module.

You now have a Server-Side Execute Only Proxy module to pass data from the Browser module.

## Setting Up the Master Module

The Master module communicates with subsequent modules to orchestrate data validation and the creation of end-user submissions.

> These instruction assume you have a new **API** module open, saved, and with a title.

### Configure the Panel Components

The [Panel](/v1/docs/panel-component) component acts as a container for the components that follow. The `panelRequest` **Panel** component manages your end-user’s data. The `panelValidate` **Panel** component manages the data validation. Your `panelCreateSubmission` **Panel** component manages the creation of the end-user’s submission. And your `panelResponse` **Panel** component manages error and success messages.

Hover over the `panelInfo` and `panelConfig` **Panel** components and delete them because they are no longer required in the configuration.

1. In the Module Builder, drag and drop two **Panel** components onto your canvas, placing them between the `panelRequest` and `panelResponse` **Panel** components.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | panelValidate | panelValidate |
| 2 | panelCreateSubmission | panelCreateSubmission |
3. Click **Save & Close** for each component as you add it.

### Configure the API Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save & Close**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store data passed from the Browser module.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | address | address |
| 5 | phoneNumber | phoneNumber |
| 6 | email | email |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Proxy module. They must match for data mapping purposes.
3. Click **Save & Close** for each component as you add it.

### Configure the Response Hidden Components

These [Hidden](/v1/docs/hidden-component) components handle the data flow response.

1. Drag and drop two **Hidden** components inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Canvas Label Text |
| --- | --- | --- |
| 1 | resolution | resolution |
| 2 | referenceNumber | referenceNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Proxy module. They must match for data mapping purposes.
3. Click **Save & Close** for each component as you add it.

### Configure the Validation Initializer Component

This [Initializer](/v1/docs/initializer-component) component progresses the data validation flow.

1. Drag and drop an **Initializer** component inside the `panelValidate` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initValidate`.
3. In the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginValidate | trigger | GO |

![A static image displaying the Configuration settings for a new submission trigger and output properties in the application.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_InitValiddate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save & Close**.

### Configure the Create Submission Initializer Component

This [Initializer](/v1/docs/initializer-component) component creates the submission once your end-user’s data validates.

1. Drag and drop an **Initializer** component inside the `panelCreateSubmission` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initCreate`.
3. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginSaveSubmission | trigger | GO |

![A static image displaying the Initializer Settings for a plugin submission with property ID and action outputs displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_InitCreate.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
4. Click **Save & Close**.

### Configure the Response Handling Initializer Components

These [Initializer](/v1/docs/initializer-component) components relay `Success` or `Error` messages back up the data flow to the Browser module.

1. Drag and drop an **Initializer** component inside the `panelCreateSubmission` **Panel** component, below the `initCreate` **Initializer** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initSuccess`.
3. Set the **Trigger Type** as **Watch**.
4. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | resolution | value | Success |

![A static image displaying the Initializer settings showing field text, trigger type, and output properties for success.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_InitSuccess.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save & Close**.
6. Now, drag and drop another **Initializer** component inside the `panelCreateSubmission` **Panel** component, below the `initSuccess` **Initializer** component.
7. In the **Property ID** and **Canvas Label Text** fields, enter `initError`.
8. Set the **Trigger Type** as **Watch**.
9. In the **Outputs** table, enter the following:

| # | Source | Type | Value |
| --- | --- | --- | --- |
| 1 | resolution | value | Error |

![A static image displaying the Display settings for an initializer with error resolution and trigger type options.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_InitError.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
10. Click **Save & Close**.

### Configure the Validation Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component progresses the data validation flow.

1. Drag and drop a **Plug-In** component inside the `panelValidate` **Panel** component, below the `initValidate` **Initializer** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginValidate`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.

> The Request Type and Data Source URL autopopulate. You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this [Plug-In](/v1/docs/plug-in-component) component once you have created your Validation module. Then you'll replace `{moduleId}` with the module ID for your Validation module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. Set the **Trigger Type** as **Watch**.
6. From the **Post Trigger** drop-down, select **initCreate**.
7. From the **Error Trigger** drop-down, select **initError**.

![A static image displaying the Configuration settings for a plugin with input fields and action triggers displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_PluginValidate(3).jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save**.

### Configure the Save Submission Plug-In Component

This [Plug-In](/v1/docs/plug-in-component) component sends data to the Creation module.

1. Drag and drop a **Plug-In** component inside the `panelCreateSubmission` **Panel** component between the `initCreate` and `initSuccess` **Initializer** components.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginSaveSubmission`.
3. From the **Internal Services** drop-down, select **Execute** **Module**.

> The Request Type and Data Source URL autopopulate. You'll see `/fbu/uapi/modules/{moduleId}/execute` as your Data Source URL. You'll return to this Plug-In component once you have created your Validation module. Then you'll replace `{moduleId}` with the module ID for your Validation module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | referenceNumber | id |
6. From the **Post Trigger** drop-down, select **initSuccess**.
7. From the **Error Trigger** drop-down, select **initError**.

![A static image displaying the Configuration settings for a plugin submission with input and output mappings displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_PluginSaveSubmissions.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
8. Click **Save**.
9. **Save** your module.

Here's how your Master module looks in the Module Builder:

![A static image displaying the User input fields and validation panels for a submission process interface.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_MasterModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Connect the Master and Proxy Modules

Next, you'll connect your Master module to the Proxy module.

1. In your Proxy module, hover over the `pluginValidatePersonalInfo` **Plug-In** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Master module.

> [!NOTE]
> To find the module ID, look in the module URL. You can see the module ID for our sample Master module bolded here: https://training.unqork.io/#/form/**5ebc196fb47819020ecd171a**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only module that passes data where needed to perform your desired actions. Your Master module continues the data flow from the Proxy module.

## Setting Up the Validation Module

The first action the Master module calls is data validation. This is the second time your end-users data validates. But unlike the first time, this validation occurs on the server side. This ensures the data still matches the requirements you set in the Browser module. If validation fails, an error message triggers and sends it back to the data flow.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Update the Panel Component

Your [Panel](/v1/docs/panel-component) component acts as a container for the components that follow. Your `panelRequest` **Panel** manages the data passed from the Browser module. Hover over the `requestParameter` **Hidden** component and delete it.

Then, hover over the `panelInfo`, `panelConfig`, and `panelResponse` **Panel** components and delete them because they are no longer required in the configuration.

### Configure the Columns Component

Columns help keep your Validation module organized. You’ll place the first, middle, and last name fields here as you did in the Browser module.

1. Drag and drop a **Columns** component inside the `panelRequest` **Panel** component.
2. In the **Property ID** field, enter `colPersonalInfo`.
3. In the **Display** field, select the icon for three evenly spaced columns.
4. Click **Save & Close**.

### Configure the Text Field Components

1. Drag and drop three **Text Field** components onto your canvas, placing them inside each of your three columns.
2. In the **Property ID** and **Canvas Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
3. Set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)** in your `firstName` and `lastName` **Text Field** components.
4. Click **Save & Close** for each component as you add it.

### Configure the Address Component

1. Drag and drop an **Address** component onto your canvas, placing it below the `colPersonalInfo` **Columns** component.
2. In the **Property ID** field, enter `address`.
3. In the **Label Text** field, enter `Address`.
4. Click **Save**.

### Configure the Phone Number Component

1. Drag and drop a **Phone Number** component onto your canvas, placing it below your `address` **Address** component.
2. In the **Property ID** field, enter `phoneNumber`.
3. In the **Label Text** field, enter `Phone Number`.
4. In the **Regular Expression Pattern** field, enter `^(\+\d{1,2}\s)?\(?\d{3}\)?[()\s.-]?\d{3}[\s.-]?\d{4}$`.

> [!NOTE]
> This Regular Expression Pattern validates the data against the same requirement set in the Browser module.
5. Click **Save & Close**.

### Configure the Email Component

1. Drag and drop an **Email** component onto your canvas, placing it below the `phoneNumber` **Phone Number** component.
2. In the **Property ID** field, enter `email`.
3. In the **Label Text** field, enter `Email`.
4. Set **Required** to ![A toggle switch icon indicating an on state for user interface settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggledOn.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(ON)**.
5. In the **Regular Expression Pattern** field, enter `^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$`.

> [!NOTE]
> This validates the data against the same requirement set in the Browser Module.
6. Click **Save & Close**.

### Configure the Hidden Component

This [Hidden](/v1/docs/hidden-component) component acts as simple API documentation for others working on the application.

1. Drag and drop a **Hidden** component above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save & Close**.
5. **Save** your module.

Here's how your Validation module looks in the Module Builder:

![A static image displaying the Form fields for panel request including name, address, phone number, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_ValidationModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

## Connect the Validation and Master Modules

Next, you'll connect your Validation module back to the Master module.

1. In your Master module, hover over the `pluginValidate` **Plug-In** component.

A 5-button toolbar appears above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Validation module.

> You can see the module ID for our sample Validation module bolded here: https://training.unqork.io/#/form/**5ebc28147b2213020fc9ef10**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only module that validates end-user data passed from the Master module. Your Validation module is the end of the validation portion of this Proxy Structure.

## Setting Up the Creation Module

Once data clears the Validation module, the Master module passes it to the next step. The Creation module handles it by creating the submission. Submissions then pass to the Schema module for storage, which you'll create in the next step. If the Creation module fails, an error message sends it back in the flow.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Configure the Panel Component

Your [Panel](/v1/docs/panel-component) components act as containers for the components that follow. Your `panelRequest` **Panel** component manages the data passed from the Browser module. Your `panelCreateSubmission` **Panel** component manages the submission for storage in the Schema module. And your `panelResponse` **Panel** component manages the error handling.

Hover over the `panelInfo` and `panelConfig` Panel components and delete them because they are no longer required in the configuration.

1. In the **Module Builder**, drag and drop a **Panel** component onto your canvas.
2. In the **Property ID** and **Canvas Label Text** fields, enter `panelCreateSubmission`.
3. Click **Save Component**.

### Configure the API Hidden Component

1. Drag and drop a **Hidden** component onto your canvas, placing it above the `panelRequest` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `method`.
3. In the **Default Value** field, enter ``.

> [!NOTE]
> This setting indicates the HTTP request your module simulates.
4. Click **Save & Close**.

### Configure the Data Hidden Components

These [Hidden](/v1/docs/hidden-component) components store the data passed from the Browser module. Hover over the existing Hidden component and delete it because it’s not required in the configuration.

1. Drag and drop six **Hidden** components inside the `panelRequest` **Panel** component.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | firstName |
| 2 | middleName | middleName |
| 3 | lastName | lastName |
| 4 | email | email |
| 5 | address | address |
| 6 | phoneNumber | phoneNumber |

> [!NOTE]
> These Property IDs are the same as the Property IDs used in the Master module. They must match to ensure proper data mapping.
3. Click **Save & Close** for each component as you add it.

### Configure the Response Hidden Component

This [Hidden](/v1/docs/hidden-component) component handles the data flow response. Hover over the existing Hidden component and delete it because it’s not required in the configuration.

1. Drag and drop another **Hidden** component inside the `panelResponse` **Panel** component.
2. In the **Property ID** and **Label Text** fields, enter `referenceNumber`.

> [!NOTE]
> This Property ID is the same as the Property ID used in the Master module. They must match to ensure proper data mapping.
3. Click **Save & Close**.

### Configure the Plug-In Component

1. Drag and drop a **Plug-In** component inside the `panelCreateSubmission` **Panel** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `pluginSaveSubmission`.
3. From the **Internal Services** drop-down, select **Create Module Submissions(s)**.

> You'll return to this Plug-In component once you have created your Schema module. Then you'll replace `{moduleId}` with the module ID for your Schema module.
4. In the **Inputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | firstName | data.firstName |
| 2 | middleName | data.middleName |
| 3 | lastName | data.lastName |
| 4 | address | data.address |
| 5 | phoneNumber | data.phoneNumber |
| 6 | email | data.email |
5. In the **Outputs** table, enter the following:

| # | Property ID | Mapping |
| --- | --- | --- |
| 1 | referenceNumber | id |
6. Set **Assign Values If They Are Null or Empty String** to ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/toggle_OFF(6).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) **(OFF)**.

![A static image displaying the Settings interface for a plugin with input and output property mappings displayed.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_CreationModule_Pluginsavesubmisison.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
7. Click **Save**.

### Configure the Initializer Component

1. Drag and drop an **Initializer** component onto your canvas, placing it below your `pluginSaveSubmission` **Plug-In** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `initSave`.
3. From the **Trigger Type** drop-down, select **New Submission**.
4. In the **Outputs** table, enter the following:

| # | Property ID | Type | Value |
| --- | --- | --- | --- |
| 1 | pluginSaveSubmission | trigger | GO |

![A static image displaying the Initializer Settings for a new submission trigger in the application.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_CreationModuel_InitSave.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)
5. Click **Save & Close**.
6. **Save** your module.

Here's how your Creation module looks in the Module Builder:

![A static image displaying the Form fields for user information submission including first name, email, and phone number.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_CreationModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

### Connect the Creation and Master Modules

Next, you'll connect your Creation module to the Master module.

1. In your Master module, hover over the `pluginSaveSubmission` **Plug-In** component.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL**, replace `{moduleId}` with the module ID of your Creation Module.

> [!NOTE]
> You can see the module ID for our sample Creation module bolded here: https://training.unqork.io/#/form/**5ebc3204b47819020ecd1d55**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Server-Side Execute Only Creation module that creates a submission based on end-user data. Your Creation module passes that submission to the Schema module for storage.

## Setting Up the Schema Module

From the Creation module, your end-user submissions are stored in your Schema module. The Schema module only serves as storage and doesn't take any actions.

The Schema module components mirror the data-entry fields from your Browser module. You’ll apply the same requirements in the Schema module as you did in the Browser module.

> [!NOTE]
> These instructions assume you have a new **API** module open, saved, and with a title.

### Configure the Hidden Components

To set up the Schema module, you’ll add six [Hidden](/v1/docs/hidden-component) components. Your Hidden components correspond to the data fields in your Browser module.

1. In the Module Builder, drag and drop six **Hidden** components onto your canvas.
2. In **Property ID** and **Label Text** fields, enter the following for each component:

| # | Property ID | Label Text |
| --- | --- | --- |
| 1 | firstName | First Name |
| 2 | middleName | Middle Name |
| 3 | lastName | Last Name |
| 4 | address | Address |
| 5 | phoneNumber | Phone Number |
| 6 | email | Email |
3. Click **Save Component** for each component as you add it.
4. **Save** your module.

Here's how your Schema module looks in the Module Builder:

![A static image displaying the fields for personal information including name, address, phone number, and email.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_SchemaModule_MB.jpg?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D)

## Connect the Schema and Creation Modules

Next, you'll connect your Schema module back to the Creation module.

1. In your Creation module, hover over the `pluginSaveSubmission` **Plug-In** component.

A 5-button toolbar displays above the component on hover-over.
2. Using the toolbar, click the ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Screenshot 2025-09-15 202009(1).png?sv=2026-02-06&spr=https&st=2026-11-09T03%3A51%3A16Z&se=2026-11-09T04%3A51%3A16Z&sr=c&sp=r&sig=XaBviAyTLS66HA5AWq7LS1dSAaaZi2DdzLkWc0WtFEg%3D) (**Settings**) button.
3. In the **Data Source URL** field, replace `{moduleId}` with the module ID of your Schema module.

> [!NOTE]
> You can see the module ID for our sample Schema module bolded here: https://training.unqork.io/#/form/**5ebd7fb0ce23f0020fbf91d5**/edit.
4. Click **Save Component**.
5. **Save** your module.

You now have a Schema module that stores end-user submissions. You can use this Schema module to populate a dashboard to view end-user submissions.

You now have a series of six modules that form a Proxy Layer Structure. The structure begins with the Browser module, where your end-user submits their information. Then, the data passes through the rest of the data flow, hiding it from any code. All the end-user sees after clicking **Submit** is a `Success` or an `Error` message.

In Unqork an application is a program used to perform specific tasks. An application can be one of two types: workflow or module.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

The Unqork front-end application framework that delivers Creator-built applications to end-users. Express is the layer end-users interact with—the published forms, screens, and navigation built in the Module Builder. Express is distinct from Express View, which is a Creator-facing preview tool in the IDE.

Also known as Record Data. Submission data consists of information saved by Unqork components. View submission data by using the angular command, or in Record Collections.

A Property ID is the unique field ID used by Unqork to track and link components in your module.

Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

The action performed by the button when selected.

DOM (Document Object Model) events are signals or notifications that something has occurred or is occurring within a web page, often triggered by user interactions or by the browser itself. These events allow JavaScript to react to changes and interactions on a web page, making it dynamic and interactive.

Enter the Property ID of the component that you want to trigger on each button-click.

Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the .

A URL (uniform resource locator) is a unique identifier used to locate a resource on the internet. Also known as a web address.

Enter inputs components and actions you want the component to perform..

Enter outputs components and actions you want the component to perform.

Deteremines how the component triggers.

Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A modal is a window that appears on top of the content you are currently viewing.

In JavaScript, a method is a function that is associated with an object. It is essentially a property of an object whose value is a function. Methods define actions or operations that can be performed on the object they belong to.

HTTP (Hypertext Transfer Protocol) is an application-layer protocol used to transmit hypermedia documents like HTML.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

The component fires when the page or called module loads without an existing submission ID. Dashboards and remote execute modules are great uses for this trigger.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.