Panel Component
Overview
The Panel component creates self-contained sections or pages in modules, and act as a storage unit for other components. You can also use Panel components to help with navigation, create pop-up modals A modal is a window that appears on top of the content you are currently viewing., 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 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 group to the left of 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 article.
Display Panel
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, and is the default setting.
Modal
The Panel becomes a Modal A modal is a window that appears on top of the content you are currently viewing. 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 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 (ON). |
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 component. A plus (+) or minus (-) symbol displays to the right of the Panel component in Express View. By default, this setting is (OFF). |
|
Collapse Content |
Setting this Collapse Content toggle to (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 (OFF). |
|
Enable Scrollspy |
Scrollspy is a jQuery plugin that lets end-users return to a specified component in Express View. When set to (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 Pane componentl. By default, this setting is (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 (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 (OFF). |
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. |
|
Before Save |
Select the module that will load into the Panel component. |
|
Update Type |
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
This setting refreshes the Panel component with a dynamic set of components at run-time. Turning this setting to (ON) adds an icon to identify that this Panel component is refreshable on the Module Builder canvas. Use the dynamicRefreshOutput Type in your logic components.
By default, this setting is (OFF). When this setting is (OFF), the Panel component does not respond to dynamic refresh operations targeting it.
To learn more about using Dynamic Refresh, view our Dynamic Refresh article.
|
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. 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 (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:
By default, Overlay Display Options is set to Partially Transparent. 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 (ON) when Dynamic Refresh is enabled. 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:
|
|
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 Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. class that lets a Creator Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. specifically style the Panel component while a refresh is taking place. Once a refresh is complete, this CSS class no longer applies. 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 The DevTools Console helps you securely store, build, test, and deploy your software. log. Doing so helps with debugging dynamic refresh configurations. By default, this setting is (OFF) when Dynamic Refresh is enabled. 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:
|
|
Event Mapping |
Set to (ON) to enable event mapping between Vega and Centauri components. Discover how to use logic between runtimes in our How to: Use Cross-Runtime Support article. By default, this setting is (OFF). |
|
Promote Data to Top Level |
Set to (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 article. By default, this setting is (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 A Property ID is the unique field ID used by Unqork to track and link components in your module. values to prevent their data from importing into the module's submission data. |
Validation Panel
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 (OFF). |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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. |
To learn more about settings that display when a component is associated with Data Models, view our 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!.
These instructions assume that you have an open FEmodule saved with a title.
Configure the Panel Component
Configure the Panel component to serve as a modal A modal is a window that appears on top of the content you are currently viewing.. The openMyModal value is a custom value that the Decisions 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 Panel component onto your canvas. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter panelModal. |
| 3. | Set the Interaction Type to  Modal. |
| 4. | In the Open Modal Event field, enter openMyModal. |
| 5. | In the Dismiss Modal Event field, enter closeMyModal. |
| 6. | Click Save Component. |
Configure the Decisions Component
Next, add a Decisions 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 Panel component's open modal event. This action opens the modal.
| 1. | Drag and drop a  Decisions component onto your canvas, placing it below the panelModal Panel component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. enter ruleButton. |
| 4. | Navigate to the component's Actions settings. |
| 5. | From the Trigger Type drop-down, select Watch. |
| 6. | To the right of Inputs & Outputs, click Edit. |
| 7. | In the Inputs table, enter the following: |
| # | Property ID | Alias | Type | Required | Silent |
|---|---|---|---|---|---|
|
1 |
buttonClick |
exact |
☐ (unchecked) |
☐ (unchecked) |
| 8. | In the Outputs table, enter the following: |
| # | Property ID | Type |
|---|---|---|
|
1 |
panelModal |
trigger |
| 9. | Under the Conditionals table, click the New button twice. |
| 10. | In the Conditionals table, enter the following: |
| buttonClick | panelModal_trigger |
|---|---|
|
openModal |
openMyModal |
|
closeModal |
closeMyModal |
| 11. | Click Save Component. |
Configure the btnOpen Button Component
This Button component triggers your pop-up Panel modal.
| 1. | Drag and drop a  Button component onto your canvas, placing it below the ruleButton Decisions component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnOpen. |
| 3. | In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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. |
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.
| 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 component.
| 1. | Drag and drop an  HTML Element component onto your canvas, placing it inside the panelModal Panel component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter htmlModalPanel. |
| 3. | In the Tag field, enter h3. |
| 4. | In the Content field, enter Hello World!. |
| 5. | Click Save Component. |
Configure the Close Button Component
This Button component triggers your pop-up modal to close.
| 1. | Drag and drop a  Button component onto your canvas, placing inside the panelModal  Panel component, and below the htmlModalPanel  HTML Element component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnClose. |
| 3. | In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 Express View is how your end-user views you 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.. You'll see the following functionality:
Resources
Overview
The Panel component creates self-contained sections or pages in modules, and act as a storage unit for other components. You can also use Panel components to help with navigation, create pop-up modals A modal is a window that appears on top of the content you are currently viewing., 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 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 group to the left of 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 article.
Display Panel
Field Text
|
Contextual Help
|
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 A modal is a window that appears on top of the content you are currently viewing. when triggered by a logic component. The Panel remains hidden until triggered.
Triggers & Events
|
Modal Styles
|
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 (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 (OFF). |
|
Enable Scrollspy |
Scrollspy is a jQuery plugin that allows end-users to return to a specified component in Express View. When set to (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: <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. When your end-user clicks this new button in Express View, they return to the top of the Panel. By default, this setting is (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 (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 (OFF). |
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. |
|
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
This setting allows this Panel to refresh with a dynamic set of components at run-time. Turning this setting to (ON) adds an icon to identify this panel is refreshable in the Module Builder canvas. Use the dynamicRefresh output type found in logic components.
By default, this setting is (OFF). When this setting is (OFF), the Panel does not respond to dynamic refresh operations targeting it.
To learn more about using Dynamic Refresh, view our 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. 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 (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). 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:
By default, this setting is (ON) when Dynamic Refresh is enabled. 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. 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 (OFF) when Dynamic Refresh is enabled. 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 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. or Vega 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. runtimes. By default, Panel components are set to the Centauri runtime in Centauri modules, and the vega runtime in Vega modules.
|
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:
|
|
Event Mapping |
Set to (ON) to enable event mapping between Vega and Centauri components. Discover how to use logic between runtimes in our How to: Use Cross-Runtime Support article. By default, this setting is (OFF). |
|
Promote Data to Top Level |
Set to (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 article. By default, this setting is (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 A Property ID is the unique field ID used by Unqork to track and link components in your module. values to prevent their data from importing into the module's submission data. |
Validation Panel
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 (OFF). |
Advanced Panel
Additional Styling
|
Setting |
Description |
|---|---|
|
Custom CSS Class |
Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. 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. |
To learn more about settings that display when a component is associated with Data Models, view our 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!.
These instructions assume that you have an open FEmodule saved with a title.
Configure the Panel Component
Configure the Panel component to serve as a modal A modal is a window that appears on top of the content you are currently viewing.. The openMyModal value is a custom value that the Decisions 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 Panel component onto your canvas. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. 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. |
| 6. | Click Save & Close. |
Configure the Decisions Component
Next, add a Decisions 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 Panel component's open modal event. This action opens the modal.
| 1. | Drag and drop a Decisions component onto your canvas, placing it below the panelModal Panel component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. enter ruleButton. |
| 4. | In the component's configuration menu, select  Actions. |
| 5. | Set the Trigger Type to 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 |
| 9. | Click Save & Close. |
Configure the Open Button Component
This Button component triggers your pop-up modal to open.
| 1. | Drag and drop a Button component onto your canvas, placing it below the ruleButton Decisions component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnOpen. |
| 3. | In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Open. |
| 4. | In the component's configuration menu, select Actions. |
| 5. | Set the Action Type to Event. |
| 6. | In the Click Event field, enter openModal. |
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.
| 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 component.
| 1. | Drag and drop an HTML Element component onto your canvas, placing it inside the panelModal Panel component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter htmlModalPanel. |
| 3. | In the Tag field, enter h3. |
| 4. | In the Content field, enter Hello World!. |
| 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 HTML Element component, inside the panelModal Panel component. |
| 2. | In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter btnClose. |
| 3. | In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Close. |
| 4. | In the component's configuration menu, select Actions. |
| 5. | Set the Action Type to Event. |
| 6. | In the Click Event field, enter closeModal. |
| 7. | Click Save & Close. |
| 8. | Save your module. |
Preview your module in Express View Express View is how your end-user views you 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.. You'll see the following functionality:
Resources
