Panel Layout Properties
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.
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.
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.
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.
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 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.
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.
The following Animation options are available:
- Animation Type
- Description
- slide
Panel is shown using a slide animation.
- none
No animation is used.
Animation duration
Specify the duration of the animated transition (in milliseconds).
Panel Layout Behavior
Controls how users navigate content contained in a Panel Layout that has multiple Panel Cards.
Scrolling
A common pattern on modern sites is a long, scrollable home page rather than multiple separate pages. You can implement this by placing multiple Panel Cards inside a Panel Layout and setting the Panel Layout Behavior property to Scrolling.
When Scrolling is enabled, users can move through the content with the mouse wheel or keyboard. You can optionally show a Scroller to let users jump quickly through the layout.
Important: When using Scrolling you must set an explicit size for all Panels contained within the Panel Layout —including Panel Cards, Panel Navigators, and nested Panel Layouts.
If any Panel Cards contain List or ViewBox controls that have Delay render till visible enabled, those controls will render only after their containing Panel Card scrolls into view.
See Scrolling panel layout for more.
Panel Layout – Scrolling
Demonstrates implementing a scrollable Panel Layout using multiple Panel Cards.
Be sure to set explicit sizes for the Panels in the layout when using Scrolling.
Template
A UX component template named ScrollingPanelLayout is available when creating a new UX. It implements a scrollable Panel Layout out of the box.
Panel Sizing and Resizing
A Panel Layout can contain child Panel Cards, Panel Layouts, and Panel Navigators. Panels and child Panels can be easily resized at runtime. When the UX is reloaded, the sizes of each resized Panel can optionally be restored.
In the below video example, the Panel Layout has been configured so the user can drag the panel borders to change the size of each Panel.
Resizing Panels in a Panel Layout
Learn how to configure a Panel Layout so that its child Panels can be resized by the user at runtime.
Date added - 2023-04-25