Panel Layout Properties

IN THIS PAGE

Id
Sub-theme
Display name
Panel classname
Panel body classname
Panel body inline-style
Layout flow direction
Docked panel display method
Dock lock flow
Dock lock class name
Docked Panel controller buttons
- How to create a docked panel
- Adding buttons to show/hide docked Panels
Animation
Animation duration

Description

Panel Layouts are containers that can contain Panels, Panel Navigators, and even other Panel Layout containers. The Panel Layout Properties section allows you to define how the sub-containers inside a panel layout will act. For example, the direction that the containers will flow in, what method of animation will be used to display panels, what buttons reveal hidden panels, and more.

Id

The Id for the Panel Layout control. The Id must be unique across all controls in the UX Component.

Sub-theme

Sets the sub-theme for a Panel Layout control.

Sub-themes allow you to tweak the styling on control types within a component without having to change the main theme of the component. This approach is often preferable to manually changing the styling on individual controls by changing individual style settings. If you leave this property blank the default ('base') sub-theme is used.

A sub-theme is a variation on the main theme or 'style' of a component. This main style is defined using the Style name property in the UX Properties section. Once a style for the component is selected, this will determine the available sub-themes for a given control type. You can create your own sub-themes. For information on how to do this visit the 'Local sub-theme definitions - Javascript' property page in the UX Properties section.

Display name

(Optional) Specify an optional display name to be used instead of the id when the panel name is displayed in header or footer text.

Panel classname

Set the class name for the Panel.

Panel body classname

Set the class name for the Panel body section.

Panel body inline-style

Set the in-line style for the Panel body section.

Layout flow direction

Specify the flow direction. Options are LTR (left-to-right), TTB (top-to-bottom), RTL (right-to-left), and BTT (bottom-to-top).

Below is a very simple Panel Layout container containing two Panel Cards, each containing a Static Text control. The background styling of each Panel Card has also been altered to make them more visible.

Left to right

Top to bottom

Right to left

Bottom to top

The Panel Layout can itself contain additional Panel Layout containers that might have different Layout flow directions from their parent. Panel Navigators contained in a Panel Layout should follow the same Layout flow direction that Panel Cards do, in terms of the Panel Navigators placement.

The 'Layout flow direction' also determines the way in which a docked, or 'hidden', panels will appear on screen when revealed.

For example, if the 'Layout flow direction' is Left to Right, the docked panel will appear to enter from the left side of the screen moving toward to right side.

Docked panel display method

Specify how docked panels should be displayed when they are invoked. 'Over' displays the Panel on top of the existing Panel Layout. 'Slide' will shift the existing Panels to the right so that there is room to show the Panel being shown. 'Push' will push the existing Panels to the left, right, top or bottom, depending on the flow direction.

To demonstrated take the following panel configuration designed based the guide on the Docked Panel controller buttons section. This panel has a button on it that when clicked will open a 150px wide docked/hidden panel.

Selecting the 'Over' option for the 'Docked panel display method' will cause the docked panel to move over the existing main panel. In this scenario part of the main panel's text and button will be obscured by the docked panel.

Over

Selecting the 'Slide' method will make the 'main' panel appear to slide toward whatever direction the 'Layout flow direction' property is set to. As it does so it will reveal the docked panel underneath it. The docked panel will not appear to be moving.

Slide

The end result of 'Push' option is similar to 'Slide'. However, when 'Push' is selected the docked panel appears to actively push the main panel off the screen, at least on a mobile device. In this case the dividing line between the two panels is visible for the entire animation.

Push

Dock lock flow

If checked, when a currently hidden (i.e. docked) Panel is shown, the existing Panels are 'locked' so that the user cannot interact with them. It makes the Panel that it shows modal. Clicking on a locked area will dismiss the Panel that was shown.

Dock lock class name

Optional, specifies a class name for the overlay that appears over locked Panels when a Dock Panel is shown.

Docked Panel controller buttons

Optional. You can specify the ids of buttons that will show/hide any of the Panels in this Panel Layout that have been docked (i.e. hidden). To be useful this property requires a docked panel and another panel card with a button inside it.

Clicking a button to reveal a hidden panel

Clicking the button next to the Docked Panel controller buttons property opens a genie that lets you assign a specific button to a specific docked panel.

When 'x' button is clicked 'x' panel appears

How to create a docked panel

You can defined a 'docked' Panel Card by changing that Panel Card's 'Dock' property in the 'Panel Size and Dock Options' section. For a complete explanation of docking watch this video or follow the guide below

In the UX Builder, on the Controls page, check the 'Mobile' option in the page toolbar..
Open the Panels menu. Click the [Panel Layout] option to add a Panel Layout to the control
Highlight the Panel Layout that was added. Click on [Panel Card] option in the Panels menu, then click 'Insert After' to place the Panel Card inside the Panel Layout
If the Panel Card is not in the Panel Layout use the blue up and down arrows in the toolbar to move it into place.
Give the Panel Card the name 'Docked Panel Card'. To do this highlight the Panel Card and then click the button next to the Id property in the Panel Card Properties section of the Properties list.
Open the Data Controls menu and click on [List] to add a list control to Panel Card.
Highlight the List control. In the Properties menu click the button next to the List properties property.
On the List Builder's Data Source pane select 'Static' as the Data Source Type, then click the button next to the Static data property.

Define a simple list of Choices like this:

Choices
Choice 1
Choice 2
Choice 3
Choice 4
Choice 5

Open the List Layout pane. Use the blue > arrow to move the Choices field from the Available Fields list into the 'Columns in List' area. Click OK to Close the List Builder
Highlight the DOCKED_PANEL_CARD. In the Card's Properties list go to the Panel Size and Dock Options section. Set the Layout size property to 200px
Click the dropdown next to the 'Dock' property and select the collapse-before option.
The Docked Panel has been created but is still in its hidden state. The next section will describe how to make the docked panel appear on the click of the button.

Adding buttons to show/hide docked Panels

Continuing from the section above, open the Panels menu on the UX Controls page.
Click the [Panel Card] option to add another Panel Card inside the Panel Layout. Give this Panel Card an Id MAIN_PANEL.
Highlight the 'MAIN_PANEL' Panel Card. Open the 'Other Controls' menu and click on the [Button] option to add a button inside the 'MAIN_PANEL'. Make the button text read 'Docked Panel'
To change the Button text property first highlight the button control and then write 'Docked Panel' in the 'Button text property. This is located in the Button Properties section of the properties list.
Now highlight the Panel Layout in the control list.
In the Properties click the button next to the 'Docked Panel controller buttons' property in the 'Panel Layout Properties' section.
Click the 'Add Button Controller' button
For the Button id select the 'Docked Panel' button from the dropdown. For the Panel id select the 'DOCKED_PANEL_CARD'. Click OK and OK again.
Run the Component in Live Preview. You should see the MAIN_PANEL with a 'Docked Layout' button on it
When you click on the 'Docked Layout' button you should see the DOCKED_PANEL_CARD appear with the list control that was defined inside it.

Animation

Specify the animation method for Card transitions. For example, when a docked Panel is either shown or hidden.