Panel Component

The Panel component is a layout container that groups other components together in a module. It supports inline and modal display, accordion collapse, dynamic content loading, imported modules, isolated validation, and accessibility attributes. For simple visual grouping without those advanced capabilities, use the Field Group component instead.

How to read settings tables

The tables below describe each configurable option as it displays in the UnqorkAI platform. Values are formatted as follows: inline code — a value to type exactly as shown | Bold — a value selected from a drop-down, radio button, tab, or choice chip | ON/OFF — toggle state | ✓ — checkbox checked | ☐ — checkbox unchecked

General Settings

Display Settings

Field Text

Contextual Help

Default State Options

Formatting

Panel — Renders the Panel component inline.

Modal — Renders the Panel component as a modal dialog.

Triggers and Events

Setting	Field	Type	Default	Description
Open Modal Event	modalOpenEvent	Text input	—	Event name that opens the modal.
Dismiss Modal Event	modalDismissEvent	Text input	—	Event name that closes the modal.
Trigger on Manual Modal Dismissal	triggerOnDismissal	Drop-down	—	Triggers a component on manual modal dismissal.
Allow Clicking Outside Modal to Dismiss	outsideDismiss	Toggle	ON	Allows clicking outside the modal to dismiss it.

Modal Styles

Setting	Field	Type	Default	Description
Open Modal CSS Class	windowClass	Text input	—	Adds a CSS class to the modal window element.

Imported and Dynamic Content

Import Existing Module

Import Type

Setting	Field	Type	Default	Description
↳ Reference	copyForm	Radio button	—	Links the Panel component to the source module. Updates automatically when the source changes. Visible when Import Existing Module is ON.
↳ Copy	copyForm	Radio button	—	Creates a static snapshot of the source module. Does not update when the source changes. Visible when Import Existing Module is ON.
↳ Module	form	Drop-down	—	Selects the module to import. Visible when Import Existing Module is ON.

Update Type

Setting	Field	Type	Default	Description
↳ Automatic	frozen	Radio button	—	Updates automatically when the source module changes. Visible when Reference is selected.
↳ Manual	frozen	Radio button	—	Requires the Creator to make manual updates. Visible when Reference is selected. Note: This feature is currently not supported.

Dynamic Refresh

Dynamic Refresh loads content into the Panel component without reloading the entire page. A logic component sends a new set of component definitions to the Panel component at runtime using the dynamicRefresh output type.

For full details on configuration, use cases, and best practices, see the Dynamic Refresh article.

Post Refresh Trigger

Setting	Field	Type	Default	Description
↳ Post Refresh Trigger	postRefreshTrigger	Drop-down	—	Triggers a component after all incoming components load and render. Visible when Enable Dynamic Refresh is ON.

Show Prior Components While Refreshing

Setting	Field	Type	Default	Description
↳ Show Prior Components While Refreshing	showPriorComponentsWhileRefreshing	Toggle	ON	Keeps prior components visible during refresh. Visible when Enable Dynamic Refresh is ON.

Overlay Display Options

Visible when Show Prior Components While Refreshing is ON.

Setting	Field	Type	Default	Description
None	opacityTypeWhileRefreshing	Radio button	—	Prior components display at full opacity.
Partially Transparent	opacityTypeWhileRefreshing	Radio button	Partially Transparent	Prior components display at reduced opacity during refresh.
Custom Opacity	opacityTypeWhileRefreshing	Radio button	—	Prior components display at a custom opacity during refresh.
↳ Opacity %	opacity	Text input	—	Custom opacity percentage. Visible when Custom Opacity is selected.

Show Animation While Refreshing

Setting	Field	Type	Default	Description
↳ Show Animation While Refreshing	showAnimationWhileRefreshing	Toggle	ON	Shows a loading animation during refresh. Visible when Enable Dynamic Refresh is ON.

Animation Options

Visible when Show Animation While Refreshing is ON.

Setting	Field	Type	Default	Description
Loading Spinner	loadingAnimationTypeWhileRefreshing	Radio button	Loading Spinner	Displays a circular spinner animation.
Progress Bar	loadingAnimationTypeWhileRefreshing	Radio button	—	Displays a horizontal progress bar animation.
Three Dots	loadingAnimationTypeWhileRefreshing	Radio button	—	Displays three animated dots.

Customization

Setting	Field	Type	Default	Description
↳ Custom Text While Refreshing	customTextWhileRefreshing	Text input	—	Displays text inside the Panel component while refreshing. Visible when Enable Dynamic Refresh is ON.
↳ Custom CSS While Refreshing	customCssWhileRefreshing	Text input	—	Applies a CSS class to the Panel component only during refresh. Visible when Enable Dynamic Refresh is ON.

Error Handling

Setting	Field	Type	Default	Description
↳ Display Error in Panel	displayErrorInPanel	Toggle	OFF	Shows Dynamic Refresh error messages inside the Panel component. Visible when Enable Dynamic Refresh is ON.

Runtime

The following settings control how the Panel component renders its child components and manages data when using the Vega runtime.

Validation Settings

User Input

Advanced Settings

Additional Styling

Accessibility Settings

For details on each setting, its options, and when to use it, see Accessibility Settings Reference.

Custom ARIA Attributes

Adds additional custom ARIA attributes to the element as key-value pairs.

Operations Builder

This component supports the Operations Builder in Vega modules. When the module or panel runtime is set to Vega (2.0), an Event Handlers section displays in the settings panel for configuring event-driven operations.