How to: Configure a Pop-Up Error Message

Overview

It's important for end-users to understand when an error occurs in an application. Configuring a pop-up error message using a Plug-In component lets end-users know of errors and report them to developers. The method explained in this how-to guide creates a pop-up modal informing users when an error occurs from a Plug-In component API call.

Configuring a Pop-Up Error Message

For this example, configure a Plug-In component to generate an error. Then, configure a Panel component to display the error to the end-user.

Create an Improperly Configured API Call

First, create a broken API call so you can prompt a pop-up error message. If you are creating error handling for an existing Plug-In component, skip to Create a Pop-up Error Message section of this article.

Configure the Field Group Component

The Field Group component acts as a container for the components that follow.

1. In the Module Builder, drag and drop a Field Group component onto your canvas.

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

3. Click Save Component.

Configure the Plug-In Component

The goal of this guide is to create an error. So, you'll configure the Plug-In component to reference a module ID that does not exist.

1. Drag and drop a Plug-In component onto your canvas, placing it inside the fgPlugin Field Group component.

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

3. From the Internal Services drop-down, select Execute Module. The Data Source URL autopopulates with placeholder text.

4. In the Data Source URL field, replace /fbu/uapi/modules/{moduleId}/execute with /fbu/uapi/modules/5ece9eee597dbe01f8ef308cs/execute.

   

   For this example, the Data Source URL is an invalid address. The invalid address acts as an error for the purpose of demonstrating an error message popup.

5. Click Save Component.

Configure the Button Component

Configure a Button component to trigger the improperly configured Plug-In component.

1. Drag and drop a Button component onto the canvas, placing it inside the fgPlugin Field Group component and below the pluginName Plug-In component.

2. In the Property ID field, enter btnTest.

3. In the Label Text field, enter Test Error.

4. Navigate to the Actions settings.

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

6. From the On Click drop-down, enter or select pluginName.

7. Click Save Component.

Create a Pop-Up Error Message

The following steps use a Calculator component to retrieve error codes from a Plug-In component. Then, it sends the codes to the Panel component to display as a pop-up modal to the end-user.

Configure the Panel Component

This Panel component contains the error message handling, and also acts a modal to display errors.

1. Drag and drop a Panel component onto your canvas, placing it below the fgPlugin Field Group component.

2. In the Property ID field, enter panelErrorHandling.

3. Click Save Component.

Configure the Calculator Component

Configure a Calculator component to extract and concatenate the error message and code from the integratorErrorsobject.

1. Drag and drop a Calculator component onto the canvas, placing it inside the panelErrorHandling Panel component.

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

3. In the Inputs table, enter the following:

   	Source	Alias	Type	Required
   1	integratorErrors	A		(checked)

   The integratorErrors value is apart of a module's data object. In Express View, you can view this key  array by opening the DevTools Console and running the Angular Command.

4. In the Outputs table, enter the following:

   	Source	Formula
   1	errorCode	=GET(A,'pluginName.code')
   2	errorMessage	=GET(A,'pluginName.message')

   You'll create two Hidden components in the next section that match these Output IDs.

5. In the Post Trigger field, enter or select ruleIntegratorErrors

6. Click Save Component.

Configure the Hidden Components

Configure two Hidden components to contain the error code and error messages retrieved by the calcErrorHandling Calculator component.

1. Drag and drop two Hidden components onto your canvas, placing them inside the panelErrorHandling Panel component and below the calcErrorHandling  Calculator component.

2. In each component's Property ID and Label Text field, enter the following:

   	Property ID	Label Text
   1	errorCode	errorCode
   2	errorMessage	errorMessage

3. After configuring each component, click Save Component.

Configure the Decisions Component

The Decisions component creates a pop-up error message using the Panel component.

1. Drag and drop a Decisions component onto the canvas, placing it inside the panelErrorHandling Panel component and below the Hidden components.

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

3. In the Inputs table, enter the following:

   	Source	Alias	Type	Required	Silent
   1	errorCode		exact	(checked)	☐ (unchecked)
   2	errorMessage		exact	(checked)	☐ (unchecked)

4. In the Outputs table, enter the following:

   	Source	Type
   1	panelErrorHandling	popError

   The popError type triggers the panelErrorHandling Panel component to display data in a modal, regardless of the Panel component's display settings.

5. In the Conditionals table, enter the following:

   	errorCode	errorMessage	panelErrorHandling_popError
   1			=CONCATENATE(errorCode,' ',errorMessage)

   

   If you want a customized message, update the Conditionals field. For example, in the panelErrorHandling_popError column, enter =CONCATENATE('Enter your customized text here. ',errorCode,' ',errorMessage).

6. Click Save Component.

   Learn more about the CONCATENATE function here: https://support.office.com/en-us/article/concatenate-function-8f8ae884-2ca8-4f7a-b093-75d702bea31d.

Update the Plug-In Component's Error Trigger

Lastly, set calcErrorHandling Calculator component as the error trigger of the Plug-In component. Whenever an error occurs in the Plug-In component, the calcErrorHandling Calculator component fires.

To update your Plug-In component's error trigger:

1. Hover over the pluginName Plug-In component.

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

3. Click the (Settings) button.

4. Navigate to the Actions settings.

5. In the Error Trigger field, enter calcErrorHandling.

6. Click Save Component.

7. Save your module.

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

Preview your module in Express View and click Test Error. A modal displays the error generated by the improperly configured Plug-In component.

If your pop-up is blank, test your component settings for the correct spelling. In equations, verify your work contains straight quotation marks rather than curly quotation marks. Double-check your spelling and quotation marks, save your updates, and try again.