--- title: "How to: Configure a Pop-Up Error Message" slug: "how-to-configure-a-pop-up-error-message" updated: 2025-09-25T20:17:45Z published: 2025-09-25T20:17:45Z canonical: "docs.unqork.io/how-to-configure-a-pop-up-error-message" --- > ## 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: Configure a Pop-Up Error Message UDesignerClassic Designer ## **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](/v1/docs/plug-in-component) 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](/v1/docs/plug-in-component) component to generate an error. Then, configure a [Panel](/v1/docs/panel-component) 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](/v1/docs/field-group-component) component acts as a container for the components that follow. 1. In the Module Builder, drag and drop a **F****ield 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](/v1/docs/plug-in-component) 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** **F****ield 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.` ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/pluginName_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) > [!NOTE] > 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](/v1/docs/button-component) component to trigger the improperly configured Plug-In component. 1. Drag and drop a **Button** component onto the canvas, placing it inside the **fgPlugin** **F****ield 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](/v1/docs/calculator-component) component to retrieve error codes from a [Plug-In](/v1/docs/plug-in-component) component. Then, it sends the codes to the [Panel](/v1/docs/panel-component) component to display as a pop-up modal to the end-user. #### **Configure the Panel Component** This [Panel](/v1/docs/panel-component) component contains the error message handling, and also acts a modal to display errors. 1. Drag and drop a **P****anel** component onto your canvas, placing it below the **fgPlugin** **F****ield Group** component. 2. In the Property ID field, enter **panelErrorHandling**. 3. Click **Save Component**. #### **Configure the Calculator Component** Configure a [Calculator](/v1/docs/calculator-component) component to extract and concatenate the error message and code from the `integratorErrors`object. 1. Drag and drop a **Calculator** component onto the canvas, placing it inside the **panelErrorHandling** **P****anel** 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**) | > [!TIP] > 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 . 4. In the Outputs table, enter the following: | | **Source** | **Formula** | | --- | --- | --- | | 1 | errorCode | =GET(A,'pluginName.code') | | 2 | errorMessage | =GET(A,'pluginName.message') | > [!NOTE] > 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](/v1/docs/hidden-component) components to contain the error code and error messages retrieved by the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(21).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Calculator** component. 1. Drag and drop two **H****idden** components onto your canvas, placing them inside the **panelErrorHandling** **P****anel** component and below the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(21).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **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](/v1/docs/decisions-component) component creates a pop-up error message using the [Panel](/v1/docs/panel-component) component. 1. Drag and drop a **D****ecisions** component onto the canvas, placing it inside the **panelErrorHandling** **P****anel** component and below the **H****idden** 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 | > [!TIP] > 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) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ruleIntegratorErrors_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) > [!NOTE] > 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](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** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(21).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Calculator** component as the error trigger of the [Plug-In](/v1/docs/plug-in-component) component. Whenever an error occurs in the Plug-In component, the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(21).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **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: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/moduleComplete_thumb_0_0(4).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Preview** your module in Express View and click **Test Error**. A modal displays the error generated by the improperly configured Plug-In component. > [!TIP] > 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. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView_thumb_0_0(5).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) ## **Overview** It's important for end-users to understand when an error occurs in an application. **Configuring a pop-pp error message** using a [Plug-In](/v1/docs/plug-in-component) 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 Plug-Ins** For this example, configure a [Plug-In](/v1/docs/plug-in-component) component to generate an error. Then, configure a [Panel](/v1/docs/panel-component) 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](/v1/docs/field-group-component) component acts as a container for the components that follow. 1. In the Module Builder, drag and drop a **F****ield Group** component onto your canvas. 2. In the Property ID and Canvas Label Text fields, enter `fgPlugin`. 3. Click **Save & Close**. #### **Configure the Plug-In Component** The goal of this guide is to create an error. So, you'll configure the [Plug-In](/v1/docs/plug-in-component) 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** **F****ield 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.` > [!NOTE] > 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. ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_ErrorHandling_PluginData_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) 5. Click **Save & Close**. #### **Configure the Button Component** Configure a [Button](/v1/docs/button-component) component to trigger the improperly configured Plug-In component. 1. Drag and drop a **Button** component onto the canvas, placing it inside the **fgPlugin** **F****ield 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 & Close**. ### **Create a Pop-Up Error Message** The following steps use a [Calculator](/v1/docs/calculator-component) component to retrieve error codes from a [Plug-In](/v1/docs/plug-in-component) component. Then, it sends the codes to the [Panel](/v1/docs/panel-component) component to display as a pop-up modal to the end-user. #### **Configure the Panel Component** This [Panel](/v1/docs/panel-component) component contains the error message handling, and also acts a modal to display errors. 1. Drag and drop a **P****anel** component onto your canvas, placing it below the **fgPlugin** **F****ield Group** component. 2. In the Property ID field, enter **panelErrorHandling**. 3. Click **Save & Close**. #### **Configure the Calculator Component** Configure a [Calculator](/v1/docs/calculator-component) component to extract and concatenate the error message and code from the `integratorErrors`object. 1. Drag and drop a **Calculator** component onto the canvas, placing it inside the **panelErrorHandling** **P****anel** 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**) | > [!TIP] > 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 . 4. In the **Outputs** table, enter the following: | | **Source** | **Formula** | | --- | --- | --- | | 1 | errorCode | =GET(A,'pluginName.code') | | 2 | errorMessage | =GET(A,'pluginName.message') | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calcErrorHandlingClassic_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) > [!NOTE] > 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 & Close**. #### **Configure the Hidden Components** Configure two [Hidden](/v1/docs/hidden-component) components to contain the error code and error messages retrieved by the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(22).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Calculator** component. 1. Drag and drop two **H****idden** components onto your canvas, placing them inside the **panelErrorHandling** **P****anel** component and below the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(22).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **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 & Close**. #### **Configure the Decisions Component** The [Decisions](/v1/docs/decisions-component) component creates a pop-up error message using the [Panel](/v1/docs/panel-component) component. 1. Drag and drop a **D****ecisions** component onto the canvas, placing it inside the **panelErrorHandling** **P****anel** component and below the **H****idden** 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 | > [!NOTE] > 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) | ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Sol_ErrorHandling_Decisions_thumb_0_0(1).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) > [!NOTE] > If you want a customized message, change the **Conditionals** field as follows: In the **panelErrorHandling_popError** column enter `=CONCATENATE('Enter your customized text here. ',errorCode,' ',errorMessage).` 6. Click **Save & Close**. > Learn more about the CONCATENATE function here: [https://support.office.com/en-us/article/concatenate-function-8f8ae884-2ca8-4f7a-b093-75d702bea31d](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** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(23).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Calculator** component as the error trigger of the [Plug-In](/v1/docs/plug-in-component) component. Whenever an error occurs in the Plug-In component, the **calcErrorHandling** ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/calculator_teal_component(26).png?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Calculator** component fires. To update your Plug-In'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 & Close**. 7. **Save** your module. Here's how your completed module looks in the Module Builder: ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/moduleBuilderClassic_thumb_0_0(2).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) **Preview** your module in Express View and click **Test Error**. A modal displays the error generated by the improperly configured Plug-In component. > [!TIP] > 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.× ![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/expressView_thumb_0_0(12).jpg?sv=2026-02-06&spr=https&st=2026-11-08T10%3A18%3A21Z&se=2026-11-08T11%3A18%3A21Z&sr=c&sp=r&sig=kkvntf%2BoiooJ0toli5lvEkX3Mggg0h6hEocAQCgywJM%3D) ## **Resources** - [How to: Configure Multiple Error Messages](/v1/docs/how-to-configure-multiple-error-messages) - [How to: Configure Advanced Integration Error Handling](/v1/docs/how-to-configure-advanced-integration-error-handling) - [How-to Guides: Error Handling](/v1/docs/how-to-guides-error-handling) - [Discover Formulas for Equations](/v1/docs/excel-formulas). 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. A modal is a window that appears on top of the content you are currently viewing. 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. 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. A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 . Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity. Enter inputs components and actions you want the component to perform. 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. An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects. The DevTools Console helps you securely store, build, test, and deploy your software. Enter outputs components and actions you want the component to perform.