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

TIP  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

A static image displaying the Panel component's Display settings.

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

A static image displaying the Panel component's Modal settings.

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

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.

TIP  To learn more about using Dynamic Refresh, view our Dynamic Refresh article.

A static image displaying the Panel Component's Dynamic Refresh settings.

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 (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 (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 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.

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 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.

NOTE  Use this setting for debugging purposes only. It is not recommended to display these error messages to end-users.

TIP  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!.

NOTE  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.

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".

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 icon 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.
3. In the Canvas Label Text 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 . field, 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

A static image showing the Inputs, Outputs and Micro Decisions tables of the Decisions component.

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 Icon Button component onto your canvas, placing it below the ruleButton Decisions Component icon 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.

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

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  Columns Component Icon 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!.

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!".

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 Icon Button component onto your canvas, placing inside the panelModal Panel Component Icon Panel component, and below the htmlModalPanel HTML Element Icon 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