--- title: "Panel Component" slug: "panel-component" description: "Learn how to configure Panel components for navigation, pop-ups, and dynamic content in your module, enhancing user experience and functionality." updated: 2025-12-03T18:55:30Z published: 2025-12-09T16:46:27Z canonical: "docs.unqork.io/panel-component" --- > ## 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. # Panel Component UDesignerClassic Designer The **Panel component** creates self-contained sections or pages in [modules](/v1/docs/introduction-to-the-module-builder), and acts as a storage unit for other [components](/v1/docs/module-builder-component-library). You can also use Panel components to help with navigation, create pop-up modal, or display components from other modules. Panel components are important when used in conjunction with other components. For example, the **Modal** setting turns the component into a pop-up modal when triggered. Panel components are necessary when configure [Navigation](/v1/docs/navigation-component) components because the Navigation component uses them as each page of your module. You can also add Panel components inside other Panel components, nesting them as sub-sections inside larger sections. You'll find the Panel component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Settings ### Contextual Help | Setting | Description | | --- | --- | | Description | An internal description of what this panel's purpose is. Does not display in Express View. | #### Default State Options | Setting | Description | | --- | --- | | Accordion | Allows the end-user to minimize and maximize the Panel component. A plus (+) or minus (-) symbol displays to the right of the Panel component in Express View. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Collapse Content | Setting this Collapse Content toggle to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** results in the end-user seeing the Panel component minimized by default. The end-user has to maximize the Panel component manually to display its contents. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Enable Scrollspy | Scrollspy is a jQuery plugin that lets end-users return to a specified component in Express View. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)**, Scrollspy is enabled in the Panel component. For Scrollspy to work correctly, you must also configure a Content component in your module. In the Content component, enter: `<div scroll-spy-link="propertyIdOfFirstComponent">Back to Top</div>`. In this example, **propertyIdOfFirstComponent** represents the Property ID of the component at the top of your Panel component. When your end-user clicks this new button in Express View, they return to the top of the Panel component. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Vertical Offset | The number of pixels you want to offset the Scrollspy data from the top of the screen. This setting is useful when you want to take into account a fixed header on your screen. | | Disable Panel | Prevents end-users from interacting with or editing the input field in Express View. When the end-user hovers over the field, their cursor changes to alert them to the status change. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Hide Panel | Hides the Panel component and all components inside it from the end-user. Use this setting instead of hiding each component. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | ### Display - Interaction Type #### Panel The Panel setting displays the Panel component inline with the rest of the module, and is the default setting. #### Modal The Panel becomes a Modal when triggered by a [logic component](/v1/docs/data-event-processing). The Panel remains hidden until triggered. > [!WARNING] > In Centauri (v1.0), modal stack on top of one another when a new one is opened. In Vega (v2.0), the most recent modal replaces the current one. **Triggers & Events** > [!WARNING] > Some logic output events like `dynamicRefresh` and `trigger`, will not execute until the modal is opened at least once. | Setting | Description | | --- | --- | | Open Modal Event | Lists the event that opens the modal. This event is triggered by components like [Decisions](/v1/docs/decisions-component), [Initializer](/v1/docs/initializer-component), or [Plug-In](/v1/docs/plug-in-component) components. | | Dismiss Modal Event | Lists the event that dismisses or closes the modal. The modal closes without saving changes made to its internal state. | | Trigger on Manual Modal Dismissal | The Property ID of the component to trigger when the Panel component's modal is manually dismissed. You can dismiss the Panel component's modal by closing it. If enabled, you can also dismiss by clicking outside of the modal. | | Allow Clicking Outside Modal to Dismiss | Allows you to click anywhere outside of the pop-up modal to close it. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)**. This setting only applies to clicks. If this setting is disabled, the end-user can still use the **Esc** button on their keyboard to exit the modal. | [![A static image displaying the Panel component's Modal settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_DisplayModal_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20DisplayModal.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ##### Modal Styles | Setting | Description | | --- | --- | | Open Modal CSS Class | Specifies the on-open custom CSS class applied to the modal. | ### Display - Imported and Dynamic Content #### Import Existing Module | Setting | Description | | --- | --- | | Import type | Choose between referencing or copying the imported module. | | Reference | Automatically or manually detects when changes are made to the imported module. | | Copy | Imports a copy of the specified module. Changes to the imported module are not automatically or manually updated. | | Update Type | Choose between automatically or manually refreshing the imported module when changes are detected. | | Automatic | Detects any changes made in the source module, then automatically updates the module in this imported module. | | Manual | Coming soon. | [![A static image displaying the Import Existing Module settings in the Panel component configuration page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/importExisting_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/importExisting.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) #### Enable Dynamic Refresh This setting refreshes the Panel component with a dynamic set of components at run-time. Turning this setting to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** adds an icon to identify that this Panel component is refreshable on the Module Builder canvas. Use the `dynamicRefresh` **Output Type** in your logic components. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. When this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**, the Panel component does not respond to dynamic refresh operations targeting it. > To learn more about using Dynamic Refresh, view our [Dynamic Refresh](/v1/docs/dynamic-refresh) article. [![A static image displaying the Panel Component's Dynamic Refresh settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicRefresh_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/dynamicRefresh.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) | Setting | Description | | --- | --- | | Post Refresh Trigger | The component to trigger when a dynamic refresh of the Panel component is completed. This action occurs after the incoming component(s) loads and renders. > [!NOTE] > When Dynamic Refreshing, use this setting instead of a Plug-In component's post-trigger. | | Show Prior Components When Refreshing | Controls the visual appearance of prior components in this Panel component while a refresh is taking place. Prior components are kept in the DOM until incoming components are rendered. Once the refresh is complete, this appearance no longer applies. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** when Dynamic Refresh is enabled. | | Overlay Display Options | Choose the opaqueness (transparency) of the overlay that displays on top of components being replaced by refreshed components. The overlay disappears when the new elements refresh in. Options include: - **None**: No overlay displays on top of elements in the panel. - **Partially Transparent**: Sets the overlay's opacity to a predefined value (85%). - **Custom Opacity**: Sets the overlay's opacity using a percentage value ranging from `0` (fully visible) to `100` (invisible). By default, **Overlay Display Options** is set to **Partially Transparent**. > [!NOTE] > Hiding and Opacity prevent the prior components from being interactive to end-users while refreshing. | | Show Animation While Refreshing | Displays a predefined animation in the Panel component while a refresh is taking place. Refresh operations do not indicate the percentage of completion. Once a refresh is complete, this animation no longer applies. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** when Dynamic Refresh is enabled. > [!NOTE] > Animations are useful for dynamic refreshes involving a large number of components, large component definitions (in MB), or both. | | Animation Options | Sets the type of animation to display when a Dynamic Refresh occurs. Options include: - **Loading Spinner**: Displays a circular loading bar. - **Progress Bar**: Displays a linear loading bar. - **Three Dots**: Displays three dots that change in opacity as the Dynamic Refresh occurs. | | Custom Text While Refreshing | Enter text to display in the Panel component while refreshing. Text displays underneath the animation option. Once a refresh is complete, this text no longer displays. | | Custom CSS Class While Refreshing | A unique CSS class that lets a Creator specifically style the Panel component while a refresh is taking place. Once a refresh is complete, this CSS class no longer applies. > [!NOTE] > CSS can also modify the **Show Animation While Refreshing** settings. | | Display Errors in Panel | Displays all dynamic refresh-related error messages in the Panel component and in the DevTools Console log. Doing so helps with debugging dynamic refresh configurations. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)** when Dynamic Refresh is enabled. > [!NOTE] > Use this setting for debugging purposes only. It is not recommended to display these error messages to end-users. | ### Runtime | Setting | Description | | --- | --- | | Render Components With | Select which runtime to use for the Panel component. The runtime affects Module Import, Dynamic Refresh, or adding components in the Panel component. Runtimes include: - **Centauri (1.0)**: The first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. This is the default setting. - **Vega (2.0)**: The next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. | | Promote Data to Top Level | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** to bring Vega runtime data up a level. Vega data copies to the top level of submission data. > See an example of promoting runtime data in our [Introduction to Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support#promoting-vega-data-to-the-same-level-as-centauri-data) article. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. Vega data stores in the Panel component's key. | | Data to Clear on Refresh | For components inside the Vega-enabled Panel component, enter one or multiple component Property ID values to prevent their data from importing into the module's submission data. | [![A static image displaying the Panel Component's Runtime settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/runtime_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/runtime.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ## Validation Settings ### User Input | Setting | Description | | --- | --- | | Allow Validation | Allows for the Panel component to be targeted and validated individually, instead of validating on navigation. This setting is helpful in cases where you have multiple Panel components on a page, but only trigger validations on some of them. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | [![A static image displaying the Panel component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation_thumb_0_0(9).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/validation(10).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ## Advanced Settings ### Additional Styling | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | [![A static image displaying the Panel Component's Advanced Setting.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced_thumb_0_0(12).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/advanced(13).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ## Accessibility Settings ### ARIA | Setting | Description | | --- | --- | | Aria | Use these settings to create attributes to better support end-users that require screen readers to navigate your applications. | | Aria Label | Use this field to define the component when when a screen reader arrives at it in Express View. | | Aria Role | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference) reference guide. | [![A static image dispaying the Panel component's Accessibility settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud_accessibility_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ud%20accessibility.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ## Adding a Panel Component In this use case, you'll use Panel components to create a pop-up modal. This basic configuration will help with more complex designs. Your module will contain a single button with the label **Open**. When the end-user clicks the button, a modal displays the message **Hello!**. > [!NOTE] > These instructions assume that you have an open **FE**module saved with a title. ### Configure the Panel Component Configure the Panel component to serve as a modal. The `openMyModal` value is a custom value that the [Decisions](/v1/docs/decisions-component) component uses to trigger the Panel component to open. This value can be whatever you want, as long as you keep it consistent throughout your module. 1. In the Module Builder, drag and drop a **P****anel** component onto your canvas. 2. In the **Property ID** field, enter `panelModal`. 3. Set the **Interaction Type** to **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) Modal**. 4. In the **Open Modal Event** field, enter `openMyModal`. 5. In the **Dismiss Modal Event** field, enter `closeMyModal`. [![A static image displaying the Panel Configuration page, the property ID is "panelModal", the Interactio type is set to "Modal", and the Open Modal Event field reads "panelPopModal".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Example_1_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Example%201.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 6. Click **Save Component**. ### Configure the Decisions Component Next, add a [Decisions](/v1/docs/decisions-component) component that triggers your modal to open. The input of `buttonClick` watches for any button click. Recall that this Open button's Event ID is `openModal`. In the Micro Decisions table, you can see that `openModal` triggers `openMyModal`, which is the **panelModal** **P****anel** component's open modal event. This action opens the modal. 1. Drag and drop a **D****ecisions** component onto your canvas, placing it below the **panelModal** **P****anel** component. 2. In the **Property ID** field, enter `ruleButton`. 3. In the **Canvas Label Text** field, enter `ruleButton`. 4. From the **Trigger Type** drop-down, select **Watch**. 5. In the **Inputs** table, enter the following: | # | Source | Alias | Type | Required | Silent | | --- | --- | --- | --- | --- | --- | | 1 | buttonClick | | exact | ☐ (unchecked) | ☐ (unchecked) | 6. In the **Outputs** table, enter the following: | # | Source | Type | | --- | --- | --- | | 1 | panelModal | trigger | 7. Under the **Conditionals** table, click the **New** button twice. 8. In the **Conditionals** table, enter the following: | # | buttonClick | panelModal_trigger | | --- | --- | --- | | 1 | openModal | openMyModal | | 2 | closeModal | closeMyModal | [![A static image showing the Inputs, Outputs and Micro Decisions tables of the Decisions component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ruleButton_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/ruleButton.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 9. Click **Save Component**. ### Configure the btnOpen Button Component This [Button](/v1/docs/button-component) component triggers your pop-up Panel modal. 1. Drag and drop a **Button** component onto your canvas, placing it below the `ruleButton` **D****ecisions** component. 2. In the **Property ID** field, enter `btnOpen`. 3. In the **Label Text** field, enter `Open`. 4. Navigate to the component's **Actions** settings. 5. From the **Action Type** drop-down, select **Event**. 6. In the **Click Event** field, enter `openModal`. > [!NOTE] > The openModal Event ID is not a component. Instead, it's a value that the Decisions component uses to trigger the opening of the modal. You can customize this value however you want. [![A static image displaying the Button component configuration page, the Interaction Type is set to Modal, and the Open Modal Event field is set to panelPopModal](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnOpen_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/btnOpen.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 7. Click **Save Component**. ### Configure the HTML Element Component You can place any component in your pop-up modal. For this example, use a simple [HTML Element](/v1/docs/html-element-component) component. 1. Drag and drop an **H****TML Element** component onto your canvas, placing it inside the `panelModal` **P****anel** component. 2. In the **Property ID** field, enter `htmlModalPanel`. 3. In the **Content** field, enter `Hello World!`. 4. In the **Tag** field, enter `h3`. [![A static image of the HTML Element component's Display settings, the Tag field is set to h3, and the Content field contains the words "Hello World!".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/htmlModalPanel_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/htmlModalPanel.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 5. Click **Save Component**. ### Configure the Close Button Component This [Button](/v1/docs/button-component) component triggers your pop-up modal to close. 1. Drag and drop a **Button** component onto your canvas, placing it inside the `panelModal` **P****anel** component, and below the `htmlModalPanel` **H****TML Element** component. 2. In the **Property ID** field, enter `btnClose`. 3. In the **Label Text** field, enter `Close`. 4. Navigate to the component's **Actions** settings. 5. From the **Action Type** drop-down, select **Event**. 6. In the **Click Event** field, enter `closeModal`. 7. Click **Save Component**. 8. **Save** your module. Preview your module in Express View. You'll see the following functionality: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Modal_Panel_Animation.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) The **Panel component** creates self-contained sections or pages in [modules](/v1/docs/introduction-to-the-module-builder), and acts as a storage unit for other [components](/v1/docs/module-builder-component-library). You can also use Panel components to help with navigation, create pop-up modal, or display components from other modules. Panel components are important when used in conjunction with other components. For example, the **Modal** setting turns the component into a pop-up modal when triggered. Panel components are necessary when configure [Navigation](/v1/docs/navigation-component) components because the Navigation component uses them as each page of your module. You can also add Panel components inside other Panel components, nesting them as sub-sections inside larger sections. You'll find the Panel component in the [Display & Layout](/v1/docs/display-layout) group to the left of the [Module Builder](/v1/docs/introduction-to-the-module-builder). ## About the Configuration Window > To learn more about general component settings and those that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Display Panel [![A static image dispaying the Panel component's Display settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_config_display_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20config%20display.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ### Field Text | Setting | Description | | --- | --- | | Label Text | Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. User-friendly labels make your module more accessible. Keep labels short and descriptive (a word or two) using title case. For longer entries, use sentence case. | ### Contextual Help | Setting | Description | | --- | --- | | Description | An internal description of what this panel's purpose is. Does not display in Express View. | ### Interaction Type #### Panel The Panel setting displays the Panel component inline with the rest of the module. This is the default setting. #### Modal The Panel becomes a Modal when triggered by a logic component. The Panel remains hidden until triggered. ##### Triggers & Events | Setting | Description | | --- | --- | | Open Modal Event | Lists the event that opens the modal. This event is triggered by components like Decisions, Initializer, or Plug-In components. | | Dismiss Modal Event | Lists the event that dismisses or closes the modal. The modal closes without saving changes made to its internal state. | | Trigger on Manual Modal Dismissal | The Property ID of the component to trigger when the Panel modal is manually dismissed. You can dismiss the Panel modal by closing it. If enabled, you can also dismiss by clicking outside of the modal. | | Allow Clicking Outside Modal to Dismiss | Allows you to click anywhere outside of the modal pop-up to close the modal. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)**. This setting only applies to clicks. If this setting is disabled, the end-user can still use the **Esc** button on their keyboard to exit the modal. | ##### Modal Styles | Setting | Description | | --- | --- | | Open Modal CSS Class | Specifies the on-open custom CSS class applied to the modal. | ##### Default State Options | Setting | Description | | --- | --- | | Accordion | Allows the end-user to minimize and maximize the Panel. A plus (+) or minus (-) symbol displays to the right of the Panel. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Collapse Content | Setting this Collapse Content toggle to ON results in the end-user seeing the Panel minimized by default. The end-user has to maximize the Panel manually to see its contents. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Enable Scrollspy | Scrollspy is a jQuery plugin that allows end-users to return to a specified component in Express View. When set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)**, Scrollspy enables in the Panel. For Scrollspy to work correctly, you must also configure a Content component in your module. In the Content component, enter:
Back to Top
. In this example, **propertyIdOfFirstComponent** represents the Property ID of the component at the top of your Panel. When your end-user clicks this new button in Express View, they return to the top of the Panel. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Vertical Offset | The number of pixels you want to offset the Scrollspy data from the top of the screen. This is useful when you want to take into account a fixed header on your screen. | | Disable Panel | Prevents end-users from interacting with or editing the input field in Express View. When the end-user hovers over the field, their cursor changes to alert them to the status change. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | | Hide Panel | Hides the Panel and all components inside from the end-user. Use this setting instead of hiding each component. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | ### Imported and Dynamic Content #### Import Existing Module [![A static image displaying the Import Existing Module settings in the Panel component configuration page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_component_import_existing_module_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20component%20import%20existing%20module.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) | Setting | Description | | --- | --- | | Import Type | Choose between referencing or copying the imported module. | | Reference | Automatically or manually detects when changes are made to the imported module. | | Before Save | Select the module that will load into the Panel component. | | Update Type | Automatic Updates detects any changes made in the source module, then automatically updates the imported module. Choose between **Automatic** or **Manual**. By default, the setting is **Automatic**. | | Copy | Imports a copy of the specified module. Changes to the imported module are not automatically or manually updated. | | Before Save | Select the module that will load into the Panel component. | #### Enable Dynamic Refresh [![A static image displaying the Dynamic Refresh settings in the Panel Component configuration page.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_component_dynamic_refresh_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20component%20dynamic%20refresh.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) This setting allows this Panel to refresh with a dynamic set of components at run-time. Turning this setting to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** adds an icon to identify that this panel is refreshable in the Module Builder canvas. Use the dynamicRefresh output type found in logic components. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. When this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**, the Panel does not respond to dynamic refresh operations targeting it. > To learn more about using Dynamic Refresh, view our [Dynamic Refresh](/v1/docs/dynamic-refresh) article. | Setting | Description | | --- | --- | | Post Refresh Trigger | The component to trigger when a dynamic refresh of the Panel completes. This occurs after the incoming component(s) loads and renders. > [!NOTE] > When Dynamic Refreshing, use this setting instead of a Plug-In component's post-trigger. | | Show Prior Components When Refreshing | Control the visual appearance of prior components in this Panel while a refresh is taking place. Prior components are kept in the DOM right up until incoming components are rendered. Once a refresh is complete, this appearance no longer applies. By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** when Dynamic Refresh is enabled. | | Overlay Opacity % | Sets the opaqueness (transparency) of the overlay above components that are replaced by refreshed components. The percentage value range is 0 (fully visible) to 100 (invisible). > [!NOTE] > Hiding and Opacity prevent the prior components from being interactive to end-users while refreshing. | | Show Animation While Refreshing | Display a pre-defined animation in this Panel while a refresh is taking place. Refresh operations are indeterminate and do not indicate the percentage (%) of completion. Once a refresh is complete, this animation no longer applies. The three options are: - Loading Spinner - Progress Bar - Three Dots By default, this setting is ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** when Dynamic Refresh is enabled. > [!NOTE] > Animations are useful for dynamic refreshes involving lots of components, large (MB size) component definitions, or both. | | Custom Text While Refreshing | Text to display in this Panel while refreshing. Once a refresh is complete, this text no longer applies. | | Custom CSS Class While Refreshing | A unique CSS class that lets a creator specifically style this Panel while a refresh is taking place. Once a refresh is complete, this CSS class no longer applies. > [!NOTE] > CSS can also modify the **Show Animation While Refreshing** settings. | | Display Errors in Panel | Displays any dynamic refresh-related error messages in this Panel visually, as well as in the Console log. Aids with debugging dynamic refresh configurations. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)** when Dynamic Refresh is enabled. > [!NOTE] > Use this setting for debug purposes only, it is not recommended to display these error messages to end-users. | ## Runtime Panel components can contain components from the Centauri or Vega runtimes. By default, Panel components are set to the Centauri runtime in Centauri modules, and the vega runtime in Vega modules. [![A static image dispaying the Panel component's Runtime settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Runtime_Classic_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Runtime%20Classic.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) | Setting | Description | | --- | --- | | Render Components With | Select which runtime to use for the Panel component. The runtime affects Module Import, Dynamic Refresh, or adding components in the Panel component. Runtimes include: - **Centauri (1.0)**: The first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. This is the default setting. - **Vega (2.0)**: The next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. | | Promote Data to Top Level | Set to ![A toggle switch indicating an on/off state for a user interface element.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 1.png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(ON)** to bring Vega runtime data up a level. Vega data copies to the top level of submission data. > See an example of promoting runtime data in our [Introduction to Cross-Runtime Support](/v1/docs/introduction-to-cross-runtime-support#promoting-vega-data-to-the-same-level-as-centauri-data) article. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. Vega data stores in the Panel component's key. | | Data to Clear on Refresh | For components inside of the Vega-enabled Panel component, enter one or multiple component Property ID values to prevent their data from importing into the module's submission data. | ## Validation Panel [![A static image dispaying the Panel component's Validation settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_validation_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20validation.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ### User Input | Setting | Description | | --- | --- | | Allow Validation | Allows for the Panel to be targeted and validated individually instead of validating on navigation. This setting is helpful in cases where you have multiple Panels on a page and would like to trigger validation on some of the Panels. By default, this setting is ![A toggle switch in the 'on' position, indicating an active setting or feature.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Group 2(1).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) **(OFF)**. | ## Advanced Panel [![A static image dispaying the Panel component's Advanced settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_advanced_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20advanced.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ### Additional Styling | Setting | Description | | --- | --- | | Custom CSS Class | Enter a Custom CSS Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules. Updated CSS styling applies to all components that reference this custom class name. | ## Accessibility Panel [![A static image dispaying the Panel component's Accessibility settings.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility_thumb_0_0(3).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/accessibility(3).jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) ### ARIA | Setting | Description | | --- | --- | | Aria | Use these settings to create attributes to better support end-users that require screen readers to navigate your applications. | | Aria Label | Use this field to define the component when when a screen reader arrives at it in Express View. | | Aria Role | ARIA roles provide semantic meaning to content, letting screen readers and other accessibility tools present and support interaction with an element that is consistent with end-user expectations. ARIA roles are used to describe elements that do not exist in HTML or are not supported by the browser. > To learn about supported ARIA roles in Unqork, view our [ARIA Accessibility Settings](/v1/docs/aria-accessible-rich-internet-applications-accessibility-settings-reference) reference guide. | > To learn more about settings that display when a component is associated with Data Models, view our [General Component Settings](/v1/docs/general-component-settings) article. ## Adding a Panel Component In this use case, you'll use Panel components to create a pop-up modal. This basic configuration will help with more complex designs. Your module will contain a single button with the label **Open**. When the end-user clicks the button, a modal displays the message **Hello!**. > [!NOTE] > These instructions assume that you have an open **FE**module saved with a title. ### Configure the Panel Component Configure the Panel component to serve as a modal. The `openMyModal` value is a custom value that the [Decisions](/v1/docs/decisions-component) component uses to trigger the Panel component to open. This value can be whatever you want, as long as you keep it consistent throughout your module. 1. In the Module Builder, drag and drop a **P****anel** component onto your canvas. 2. In the **Property ID** field, enter `panelModal`. 3. Set the **Interaction Type** as **Modal**. 4. In the **Open Modal Event** field, enter `openMyModal`. 5. In the **Dismiss Modal Event** field, enter `closeMyModal`. [![A static image displaying the Panel Configuration page, the property ID is "panelModal", the Interactio type is set to "Modal", and the Open Modal Event field reads "panelPopModal".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_step4_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20step4.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 6. Click **Save & Close**. ### Configure the Decisions Component Next, add a [Decisions](/v1/docs/decisions-component) component that triggers your modal to open. The input of buttonClick watches for any button click. Recall that this Open button's Event ID is openModal. In the Micro Decisions table, you can see that `openModal` triggers `openMyModal`, which is the `panelModal` **P****anel** component's open modal event. This action opens the modal. 1. Drag and drop a **D****ecisions** component onto your canvas, placing it below the **panelModal** **P****anel** component. 2. In the **Property ID** field, enter `ruleButton`. 3. In the **Canvas Label Text** field, enter `ruleButton`. 4. In the component's configuration menu, select **Actions**. 5. Set the **Trigger Type** to **![](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/radioComponent_teal_icon(4).png?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) Watch**. 6. In the **Inputs** table, enter the following: | # | Property ID | Alias | Type | Required | Silent | | --- | --- | --- | --- | --- | --- | | 1 | buttonClick | | exact | ☐ (unchecked) | ☐ (unchecked) | 7. In the **Outputs** table, enter the following: | # | Property ID | Type | | --- | --- | --- | | 1 | panelModal | trigger | 8. In the **Micro Decisions** table, enter the following: | | Input Values | Output Values | | --- | --- | --- | | | buttonClick | panelModal_trigger | | 1 | openModal | openMyModal | | 2 | closeModal | closeMyModal | [![A static image showing the Inputs, Outputs and Micro Decisions tables of the Decisions component.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PanelComponent_example_dec_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PanelComponent%20example%20dec.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 9. Click **Save & Close**. ### Configure the Open Button Component This [Button](/v1/docs/button-component) component triggers your pop-up modal to open. 1. Drag and drop a **Button** component onto your canvas, placing it below the `ruleButton` **D****ecisions** component. 2. In the **Property ID** field, enter `btnOpen`. 3. In the **Label Text** field, enter `Open`. [![A static image displaying the Button configuration page, the Property ID is set to btnOpen, and the Label Text field reads "Open".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_btn_step3_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20btn%20step3.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 4. In the component's configuration menu, select **Actions**. 5. Set the **Action Type** to **Event**. 6. In the **Click Event** field, enter `openModal`. > [!NOTE] > The `openModal` Event ID is not a component. Instead, it's a value that the Decisions component uses to trigger the opening of the modal. You can customize this value however you want. [![A static image displaying the Button component configuration page, the Interaction Type is set to Modal, and the Open Modal Event field is set to panelPopModal](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_btn_step5_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20btn%20step5.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 7. Click **Save & Close**. ### Configure the HTML Element Component You can place any component in your pop-up modal. For this example, use a simple [HTML Element](/v1/docs/html-element-component) component. 1. Drag and drop an **H****TML Element** component onto your canvas, placing it inside the `panelModal` **P****anel** component. 2. In the **Property ID** field, enter `htmlModalPanel`. 3. In the **Tag** field, enter `h3`. 4. In the **Content** field, enter `Hello World!`. [![A static image of the HTML Element component's Display settings, the Tag field is set to h3, and the Content field contains the words "Hello World!".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PanelComponent_example_htmlElement_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/PanelComponent%20example%20htmlElement.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 5. Click **Save & Close**. ### Configure the Close Button Component This Button component triggers your pop-up Panel modal to close. 1. Drag and drop a **Button** component onto your canvas, placing it below the `htmlModalPanel` **H****TML Element** component, inside the `panelModal` **P****anel** component. 2. In the **Property ID** field, enter `btnClose`. 3. In the **Label Text** field, enter `Close`. [![A static image displaying the Button configuration page, the Property ID is set to btnClose, and the Label Text field reads "Close".](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_btnClose_step3_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20btnClose%20step3.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 4. In the component's configuration menu, select **Actions**. 5. Set the **Action Type** to **Event**. 6. In the **Click Event** field, enter `closeModal`. [![A static image displaying the Button component configuration page, the Action Type is set to Event, and the Click Event field is set to closeModal.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel_Component_btnClose_step5_thumb_0_0.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D)](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Panel%20Component%20btnClose%20step5.jpg?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) 7. Click **Save & Close**. 8. **Save** your module. Preview your module in Express View. You'll see the following functionality: [Video](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Modal_Panel_Animation.webm?sv=2026-02-06&spr=https&st=2026-11-08T03%3A56%3A45Z&se=2026-11-08T04%3A56%3A45Z&sr=c&sp=r&sig=fksHB4fLPqdIesxr9nw29eAlK7VOEJBdR%2Bo5etkvcsk%3D) A modal is a window that appears on top of the content you are currently viewing. A modal is a window that appears on top of the content you are currently viewing. The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. The DevTools Console helps you securely store, build, test, and deploy your software. Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. 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. Assistive technology that reads digital text aloud for users with visual impairments or reading disabilities. 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. 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. The Centauri (v 1.0.0) runtime is the first-generation foundation of the Unqork Designer Platform. Centauri provides Creators a codeless experience for developing applications. The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience.