Panel Layout Properties
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.
The Id for the Panel Layout control. The Id must be unique across all controls in the UX Component.
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.
(Optional) Specify an optional display name to be used instead of the id when the panel name is displayed in header or footer text.
Set the class name for the Panel.
Set the class name for the Panel body section.
Set the in-line style for the Panel body section.
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.
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.
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.
Optional, specifies a class name for the overlay that appears over locked Panels when a Dock Panel is shown.
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.
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 LayoutIf the Panel Card is not in the Panel Layout use the blue up and down arrows in the toolbar to move it into place.
Open the Data Controls menu and click on [List] to add a list control to Panel Card.
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.
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.
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.
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
Panel is shown using a slide animation.
No animation is used.
Specify the duration of the animated transition (in milliseconds).