Panel Component

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.

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:

• Cmd + S (Mac) / Ctrl + S (PC): Save and close the component settings modal.

• Cmd + G (Mac) / Ctrl + G (PC): Opens a search window to find specific fields and settings in the component settings modal.

• Tab: Tab to the next field or setting in the component settings modal. This keyboard shortcut tabs left to right and top to bottom.

• Shift + Tab: Tab to the previous field or setting in the component settings modal. The keyboard shortcut tabs from right to left and bottom to top.

• Enter (Return): When tabbing to a  (tooltip), press Enter (Return) to display the field or setting tooltip. Press Enter (Return) again to hide the tooltip.

Additional keyboard shortcuts:

• Drop-down menus: When you Tab to a settings drop-down, use the keyboard's  (up)/  (down) arrows to make a selection. Then, press Enter (Return) to confirm the selection.

Select this tab to access the component documentation in Unqork's In-Product Help.

Click this button to undo any unsaved configuration changes and return to the canvas.

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

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

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

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.

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

Choose between referencing or copying the imported module.

Automatically or manually detects when changes are made to the imported module.

Select the module that will load into the Panel component.

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.

Imports a copy of the specified module. Changes to the imported module are not automatically or manually updated.

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.

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.

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.

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 (ON) when Dynamic Refresh is enabled.

NOTE  Animations are useful for dynamic refreshes involving lots of components, large (MB size) component definitions, or both.

Text to display in this Panel while refreshing. Once a refresh is complete, this text no longer applies.

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.