How to: Configure Multiple Error Messages

Some configurations require layers of remote executes or multiple Plug-In component calls. It's a best practice to create error handling for every Plug-In component in your configuration. That way, if an error occurs, your end-user will see the error message.

Every Plug-In component needs an error trigger with Hidden components that store the data in the database to carry the error responses to the front-end. Always create error handling for a Plug-In component in the module where that Plug-In component exists. Then, you'll continue the error handling configuration on any module(s). Lastly, you'll bring the error responses to the front-end, completing the assembly line.

In this how-to guide, you'll learn how to handle remote execute calls that trigger other calls. Once you learn how this configuration works, you can apply it to any number of calls.

Let's look at the two modules in this error handling example:

Because there are two calls (one remote execute and one internal), there are two potential places where issues can occur. The goal is to error handle all Plug-In components and configure error messages that display on the front-end module. From there, any error down the line triggers messages for the end-user. The end-user stays informed no matter where the error occurs.

Here's how your error message might look in Express View if a remote execute call fails:

Here's how your error message might look in Express View if the Get Submissions API call fails:

In a real-life configuration, you can choose to have a generic message. End-users might not know what a remote execute or API does, so use a message that's easy to understand. For this example, each call has a unique error message. Use this approach to test the error handling of both calls.

Configure the Back-End API Module

This back-end module makes the API call. For this use case, use the Get Submissions API call. The front-end module remote executes this back-end module, which fires the API call. If the API call fails, the back-end module tells the front-end module about the failure. The front-end module then fires a pop-up message for the end-user in Express View. This process all happens behind the scenes.

Configure the API Module

An API module contains four Panel components to help with the API setup. You can hover over the panelConfig and delete it, as it is not used further in the configuration.

To create an API module at the Application level:

1. At the top right of the page, click the + Create New drop-down.

2. Select Module. The Create Module modal displays.

3. In the Module Name* field, enter a unique name for your module. The Module Path* field populates automatically.

4. From the Module Type* drop-down, select API.

   To learn more about Module Types, view our What Is a Module? article.

5. (Optional) In the Module Description field, describe the purpose of the API module.

6. (Optional) From the Tags drop-down, select any tags you want to add.

7. Click Create.

Configure the Initializer Component

Begin by adding an Initializer component to trigger the Plug-In component that you’ll set up next.

1. In the Module Builder, drag and drop an Initializer component inside the panelInfo Panel component.

2. In the Property ID and Canvas Label Text fields, enter initPluginGetSubmissions.

3. From the Trigger Type drop-down, select New Submission

4. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	pluginGetSubmissions	trigger	GO

   

5. Click Save Component.

Configure the Plug-In Component

Next, you’ll configure a Plug-In component to run the Get Submissions API.

1. Drag and drop a Plug-In component inside the panelInfo Panel component, below the initPluginGetSubmissions Initializer component

2. In the Property ID and Canvas Label Text fields, enter pluginGetSubmissions.

3. From the Internal Services drop-down, select List Submissions for Dashboard. The Data Source URL autopopulates.

4. In the Inputs table, enter the following:

   	Property ID	Mapping
   1	moduleId	moduleId
   2	fields	fields

   

5. Click Save Component.

Configure the First Hidden Component

Next, configure two Hidden components. The first component stores the fields of the submission data, and the second component stores the module ID of the Front-End Remote Execute module.

Because this example is about error handling, you don't have actual submission data. These Hidden components are placeholders for the purpose of this guide.

To configure the first Hidden component:

1. Drag and drop a Hidden component inside the panelRequest Panel component.

2. In the Property ID and Label Text fields, enter fields.

3. Click Save Component.

Configure the Second Hidden Component

To configure the second Hidden component:

1. Drag and drop a Hidden component inside the panelRequest Panel component.

2. In the Property ID and Label Text fields, enter moduleId.

3. In the Default Value field, enter 5f0f5dc4a7aaa20205d8a48e.

   This value is the module ID of our Front-End Remote Execute Module. You can locate this ID from your front-end module's URL: https://training.unqork.io/#/form/5f0f5dc4a7aaa20205d8a48e/edit

   If you created your own front-end module, enter your module's unique module ID.

4. Click Save Component.

5. Save your module.

Front-End Remote Execute Module

Now, create a Front-End module so your end-user can interact with it.

Configure the Panel Component

Configure a Panel component that acts as a container for the other components.

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

3. Click Save Component.

Configure the Plug-In Component

Next, configure a Plug-In component that remote executes and sends the end-user's information to the back-end module.

1. Drag and drop a Plug-In component inside the panelRemoteExecute Panel component.

2. In the Property ID and Canvas Label Text fields, enter pluginRemoteExecuteAPI.

3. From the Internal Services drop-down, select ExecuteModule.

4. In the Data Source URL field, replace {moduleId} with the back-end module's ID. In this case, enter 5f0f5df7804251020c3b89e0.

   

5. Click Save Component.

Configure the Button Component

Next, configure a Button component that triggers the pluginRemoteExecuteAPI Plug-In component, which prompts the remote execute.

1. Drag and drop a Button component inside the panelRemoteExecute Panel component.

2. In the Property ID field, enter btnGetSubmissionsAPI.

3. In the Label Text field, enter Execute Get Submissions API.

4. From the Action Type drop-down, select Event.

5. From the On Click drop-down, select pluginRemoteExecuteAPI.

   

6. Click Save Component.

7. Save your module.

Error Handling Configuration

Now configure pop-up modal error messages for multiple calls on the front-end module. Doing so ensures end-users see error messages if a call fails. Error handling involves both back-end and front-end configuration.

It’s important to note that all pop-up error messages should be configured in the front-end module. This ensures that if any calls fail, the end-user will receive an error message in Express View.

Error Handling the Back-End API Module

Add an Initializer component as the error trigger for the back-end module's API call. Then, add a Hidden component to store the error response if the API call fails.

Configure the Initializer Component

1. Drag and drop an Initializer component inside the panelInfo Panel component, below the pluginGetSubmissions Plug-In component.

2. In the Property ID and Canvas Label Text fields, enter initError.

3. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	apiResponseError	value	There was an error with the Get Submissions call.

   

4. Click Save Component.

Update the Plug-In Component's Error Trigger

Next, set initError Initializer component as the error trigger of your pluginGetSubmissions Plug-In component. This configuration indicates that when an error occurs in your Plug-In component, the Initializer component is triggered.

1. Hover over the pluginGetSubmissions 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 Error Trigger field, enter initError.

4. Click Save Component.

Configure the Hidden Component

This Hidden component stores the error response for the API call. When the API call fails, the initError Initializer component is triggered and outputs an error response into the Hidden component.

1. Drag and drop a Hidden component inside the panelResponse Panel component.

2. In the Property ID and Label Text fields, enter apiResponseError.

3. Set Store Data in Database to  (ON).

   Storing this Hidden component in the database means you can map to it. You'll use mapping when you bring the API's error response to the front-end module.  

4. Click Save Component.

5. Save your module.

Error Handling the Front-End Remote Execute Module

Next, set up error handling for the remote execute call in the front-end module.

It’s important to note that all pop-up error messages should be configured in the front-end module. This ensures that if any calls fail, the end-user will receive an error message in Express View.

Configure the Panel Component

Configure a Panel component that acts as a container for the other components.

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

3. Click Save Component.

Configure the Initializer Component

Now, configure an Initializer component as the error trigger for the pluginRemoteExecuteAPI Plug-In component. If the remote execute call fails, the Initializer component outputs the error response to a Hidden component.

1. Drag and drop an Initializer component inside the panelRemoteExecuteError Panel component.

2. In the Property ID and Canvas Label Text fields, enter initRemoteExecuteError.

3. In the Outputs table, enter the following:

   #	Source	Type	Value
   1	remoteExecuteError	value	error

   

4. Click Save Component.

Update the Plug-In Component's Error Trigger

Next, configure the initRemoteExecuteError Initializer component as the error trigger of your pluginRemoteExecuteAPI Plug-In component. So, when an error occurs in your Plug-In component, the initRemoteExecuteError Initializer component is triggered.

1. Hover over the pluginRemoteExecuteAPI 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 Error Trigger field, enter initRemoteExecuteError.

4. Click Save Component.

Configure the Hidden Component

This Hidden component stores the error response when the front-end's remote execute fails.

1. Drag and drop a Hidden component inside the panelRemoteExecuteError Panel component, below the initRemoteExecuteError Initializer component.

2. In the Property ID and Label Text fields, enter remoteExecuteError.

3. Click Save Component.

Configure the Decisions Component

Now, configure a Decisions component to display an error message when the remote execute operation fails.

1. Drag and drop a Decisions component inside the panelRemoteExecuteError Panel component, below the remoteExecuteError Hidden component.

2. In the Property ID and Canvas Label Text fields, enter ruleShowRemoteExecuteError.

3. In the Inputs table, enter the following:

   #	Source	Type	Required
   1	remoteExecuteError	exact	(checked)

4. In the Outputs table, enter the following:

   #	Source	Type
   1	panelRemoteExecuteError	popError

5. In the Conditionals table, enter the following:

   #	remoteExecuteError	panelRemoteExecuteError_popError
   1		Uh-oh, there was an error with your remote execute call.

   

6. Click Save Component.

7. Save your module.

Now, if your remote execute fails, the end-user can see the message set in your Decisions component.

Adding a Pop-Up Error Message for the API Call

Next, create a pop-up error message for the back-end module's API call.

It’s important to note that all pop-up error messages should be configured in the front-end module. This ensures that if any calls fail, the end-user will receive an error message in Express View.

Update the Plug-In Component's Output Mapping

Update your pluginRemoteExecuteAPI Plug-In component to map the back-end module's apiResponseError Hidden component to a Hidden component you'll add in the front-end module.

1. Hover over the pluginRemoteExecuteAPI 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 Outputs table, enter the following:

   #	Source	Mapping	Option
   1	responseAPIErrorFrontEnd	data.resolved.apiResponseError	replace

   

   The apiResponseError value is the name of the Hidden component on the back-end module. Because you set apiResponseError to store in the database, you can now map to that field. You can find mapping values using the Angular command in the DevTools Console.

4. Click Save Component.

Configure the Panel Component

This Panel component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Panel component onto your canvas, placing it below the panelRemoteExecuteError Panel component.

2. In the Property ID and Canvas Label Text fields, enter panelAPIError.

3. Click Save Component.

Configure the Hidden Component

This Hidden component stores the error response if the back-end API call fails.

1. Drag and drop a Hidden component onto your canvas, placing it inside the panelAPIError Panel component.

2. In the Property ID and Label Text fields, enter responseAPIErrorFrontEnd.

3. Click Save Component.

Configure the Decisions Component

This Decisions component displays an error message on the front-end if the back-end's API call fails.

1. Drag and drop a Decisions component inside the panelAPIError Panel component, below the responseAPIErrorFrontEnd Hidden component.

2. In the Property ID and Canvas Label Text fields, enter ruleShowAPIError.

3. In the Inputs table, enter the following:

   #	Source	Type	Required
   1	responseAPIErrorFrontEnd	exact	(checked)

4. In the Outputs table, enter the following:

   #	Source	Type
   1	panelAPIError	popError

5. In the Conditionals table, enter the following:

   #	responseAPIErrorFrontEnd	panelAPIError_popError
   1		Oh no! Your API call failed!

   

6. Click Save Component.

7. Save your module.

Test Your Pop-Up Error Messages

You have two different Plug-In component calls, and each has its own error handling. To test the error messages, you must fail each call. When a call fails, the error trigger fires, which triggers a pop-up error message on the front-end module.

An easy way to fail a call is to add a bracket to the Plug-In component's Data Source URL. If the URL is incorrect, the call fails, and you receive a pop-up error message. Once you verify that your error message works, you can remove the bracket from the Data Source URL.

Error Message for the Remote Execute Call

First, force the Plug-In component to fail and return an error. Then, check that the error message displays in Express View.

1. Open the front-end module in the Module Builder.

2. Hover over the pluginRemoteExecuteAPI Plug-In component.

   A 5-button toolbar displays above the component on hover-over.

3. Using the toolbar, click the (Settings) button.

4. In the Data Source URL field, enter a bracket anywhere in the URL.

   

5. Click Save Component.

6. Save your module.

To test that your pop-up error message works:

1. Open your front-end module in Express View.

2. Click the Execute Get Submissions API button.

A pop-up displays with the error message that you set in the ruleShowRemoteExecuteError Decisions component.

Error Message for the API Call

You can now test your error handling for the Get Submissions API call. First, cause the Plug-In component to fail and return an error. Then, check that the error message displays in Express View. Remember, you want all error messages to display in the front-end module.

1. Open the Back-End API Module in the Module Builder.

2. Hover over the pluginGetSubmissions Plug-In component.

   A 5-button toolbar displays above the component on hover-over.

3. Using the toolbar, click the (Settings) button.

4. In the Data Source URL field, enter a bracket anywhere in the URL.

   

5. Click Save Component.

6. Save your module.

To test that the pop-up error message works:

1. Open your front-end module in Express View.

2. Click the Execute Get Submissions API button.

You'll see a pop-up with the error message that you set in the ruleShowAPIError Decisions component.