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

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.

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 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 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 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 (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 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 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}$.

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

   

5. Click Save Component.

Configure the Email Component

To collect your end-user’s email address, configure an Email 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 (ON).

4. In the Regular Expression Pattern field, enter ^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$.

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

   

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 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.

   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.

   

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 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

   The Outputs table sends the data to two Hidden components you'll add in the next step.

   

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 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 (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	(checked)

5. In the Outputs table, enter the following:

   #	Source	Type
   1	successMessage	visible
   2	errorMessage	visible

   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

   

7. Click Save Component.

Configure the Success HTML Element Component

This HTML Element 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 (ON).

5. In the Tag field,  enter h4.

6. In the Custom CSS Class for Container field, enter successMessage.

   

7. Click Save Component.

Configure the Error HTML Element Component

This HTML Element 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 (ON).

5. In the Tag field, enter h4.

6. In the Custom CSS Class for Container field, enter errorMessage.

   

7. Click Save Component.

8. Save your module.

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

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

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.

These instructions assume you have a new API module open, saved, and with a title.

1. In the Module Builder, click the (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 (ON).

   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 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 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 PUT.

   This indicates the HTTP request your module simulates.

4. Click Save Component.

Configure the Data Hidden Components

These Hidden 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

   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 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

   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 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

   This Property ID must match the Property ID of the Plug-In component you'll add later.

   

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

   

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 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

   

6. From the Error Trigger drop-down, select initError.

7. Set Assign Values If They Are Null or Empty String to (OFF).

   

8. Click Save Component.

9. Save your module.

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

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 (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.

   

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 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 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 PUT.

   This setting indicates the HTTP request your module simulates.

4. Click Save Component.

Configure the Data Hidden Components

These Hidden 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

   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 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

   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 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

   

5. Click Save Component.

Configure the Create Submission Initializer Component

This Initializer 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

   

4. Click Save Component.

Configure the Response Handling Initializer Components

These Initializer 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

   

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

   

10. Click Save Component.

Configure the Validation Plug-In Component

This Plug-In 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 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.

   

8. Click Save Component.

Configure the Save Submission Plug-In Component

This Plug-In 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.

   

8. Click Save Component.

9. Save your module.

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

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 (Settings) button.

3. In the Data Source URL, replace {moduleId} with the module ID of your Master module.

   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.

These instructions assume you have a new API module open, saved, and with a title.

Update the Panel Component

Your Panel 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 (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}$.

   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 (ON).

5. In the Regular Expression Pattern field, enter ^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$.

   This validates the data against the same requirement set in the Browser Module.

6. Click Save Component.

Configure the Hidden Component

This Hidden 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 PUT.

   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:

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 (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.

These instructions assume you have a new API module open, saved, and with a title.

Configure the Panel Component

Your Panel 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 PUT.

   This setting indicates the HTTP request your module simulates.

4. Click Save Component.

Configure the Data Hidden Components

These Hidden 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

   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 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.

   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 (OFF).

   

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

   

5. Click Save Component.

6. Save your module.

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

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 (Settings) button.

3. In the Data Source URL, replace {moduleId} with the module ID of your Creation Module.

   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.

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 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:

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 (Settings) button.

3. In the Data Source URL field, replace {moduleId} with the module ID of your Schema module.

   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