Panel Component
Estimated Reading Time: 7 minutes
Overview
The Panel component creates self-contained sections or pages in modules. Panels act as a storage unit that houses components. You can also use Panels 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.
Panels become much more important when used in conjunction with other components. For example, the Modal setting turns the Panel into a pop-up modal. The modal displays only when triggered.
They're also necessary to configure Navigation components. This is because the Navigation component uses Panels to sort each section of your module.
Modules can contain multiple Panels. You can also add Panels inside other Panels, nesting them as sub-sections inside sections.
You'll find the Panel component in the Display & Layout group on the left of the Module Editor.
What You'll Learn
After completing this article, you’ll know when to use a Panel component, how to configure its settings, and how to use it an Unqork application..
About the Configuration Window
General
Setting |
Description |
---|---|
Property ID |
A Property ID is the unique field ID used by Unqork to track and link components in your module. The Property ID is how the software identifies your component. Using Property IDs lets you link components, creating logic-based configurations and API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. calls. Property IDs must use camel case A naming convention for computer programming. Use camelCase for Property IDs, for example: newUser, lastName, & rdoButton. (stylized as camelCase) without spaces or punctuation. |
Notes |
Select this tab to display the component's Notes area. You can use notes to keep your teammates informed. The Notes editor offers a semi-WYSIWYG (What You See is What You Get) content editor. Built to look like a word processor, this editor lets you create, edit, and format your notes. Notes save when saving the component. |
|
Select this tab to manage your component's display settings. |
|
Select this tab to manage your component's validation settings. |
|
Select this tab to manage your component's advanced settings. |
|
Select this tab to see the RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. (role-based access control) settings of the component. |
|
Assign components one-word labels to help organize, identify, and group the components in your application. Consider an example from the API Specification Snippet: Field Tags are applied to Hidden components in the panelRequest and panelResponse Panels. The Field Tags identify the data type of parameters included in the API APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services. request and response. The API Docs Dashboard tool populates with information about each parameter’s data type, identified by the Field Tag. Field Tags act as a type of Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. group and let you group components for configuration purposes. Field Tags let you target two or more components using a simple logic component. For example, add the Field Tag tagForDecision to multiple components in your module. Open the Inputs table of a Decisions component and reference the tagForDecision Field Tag as the input of the Decisions component. The output of the Decisions component then affects all components with the tagForDecision Field Tag. Save your Field Tags by pressing Enter (Return) or adding a comma after each entry. |
|
Select this tab to open the list of supported keyboard shortcuts you can use in the component settings modal. Keyboard shortcuts include:
Additional keyboard shortcuts:
|
|
Select this tab to access the component documentation in Unqork's In-Product Help. |
Cancel |
Click this button to undo any unsaved configuration changes and return to the canvas. |
Save & Close |
Click this button to save all settings as configured and return to the canvas. |
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 |
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 |
Enable Scrollspy |
Scrollspy is a jQuery plugin that allows end-users to return to a specified component in Express View. When set to 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 |
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 |
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 |
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
NOTE Dynamic Refresh is currently in Beta while Unqork collects Creator feedback and measures stability across application configurations. If you would like to provide feedback, please contact your Unqork representative.
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 Editor 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.
TIP 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. NOTE When Dynamic Refreshing, use this setting instead of a Plug-In'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 |
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:
By default, this setting is 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 NOTE Use this setting for debug purposes only, it is not recommended to display these error messages to end-users. |
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 |
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. Use custom CSS to maintain a consistent look and feel if the field or element is part of a template or more than one module. Updated CSS styling applies to all components that reference this custom class name. |
Adding a Panel Component
In this use case, you'll use Panels to create a pop-up modal. This is a basic configuration but a great jumping-off point for 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 module saved with a title.
What You Need
For this configuration, you'll need the following components:
-
1 Panel component
-
2 Button components
-
1 Decisions component
-
1 HTML Element component
Configure Panel Component
This Panel serves as your modal. The openMyModal value is a custom value that the Decisions component uses to trigger this Panel to open. This value can be whatever if you keep it consistent throughout your module.
1. | Drag and drop a ![]() |
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. | From the Interaction Type, select 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. This component 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's open modal event). This is what actually opens the modal.
1. | Drag and drop a ![]() ![]() |
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. |
3. | In the Canvas Label Text field, enter ruleButton. |
4. | Set the Trigger Type to Watch. |
5. | In the Inputs table, enter the following: |
Property ID | Alias | Type | Required | Silent | |
---|---|---|---|---|---|
1 |
buttonClick |
exact |
☐ (unchecked) |
☐ (unchecked) |
6. | In the Outputs table, enter the following: |
Property ID | Type | |
---|---|---|
1 |
panelModal |
trigger |
7. | In the Micro Decisions table, enter the following: |
Input Values | Output Values | |
---|---|---|
buttonClick | panelModal_trigger | |
1 |
openModal |
openMyModal |
2 |
closeModal |
closeMyModal |
8. | Click Save & Close. |
Configure the Open Button Component
This Button component triggers your pop-up Panel modal.
1. | Drag and drop a ![]() ![]() |
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. | Select ![]() |
5. | From the Action Type, select Event. |
6. | In the Click Event field, enter openModal. |
NOTE The Event ID openModal isn't 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 ![]() ![]() |
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 ![]() ![]() ![]() |
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. | Select ![]() |
5. | From the Action Type, select 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. After configuring a module, click Preview in the Module Editor to interact with the module in Express View. You'll see the following functionality:
Resources
-
How Do I Focus on Different Panels on the Same Page Using Navigation Links?
-
Install the Pop Modal Panel Snippet using the Unqork Marketplace.