• Adding and Removing Panels Dynamically
• Constraining a UX with Panels to an Element
• Create a Docked Panel with a Working Menu
• Flow Collapse Buttons
• Preventing a Panel from Losing Focus - onBeforePanelActivate Event
• Quick Panel Genie
• Storing and Restoring Panels
• Understanding Panels - Panel Layouts, Panel Navigators and Panel Cards

Quick Panel Genie

Description

The Quick Panel Genie allows you to define a complex Panel layout quickly.

You can add multiple Panels (Panel Navigators, Panel Cards and Panel Layouts) at once using the Quick Panel Genie. Panels can have an optional header and/or footer. You can also add static text objects and buttons.

Double-click the placeholder listed in the left-hand column to insert it in the Quick Panel editor. For a Panel Card, Panel Layout, or Panel Navigator, you will be prompted to choose whether or not the panel should also be created with a header and/or footer.

Items can be placed inside Panels using tabs (not spaces) to indicate that an object belongs inside a Panel. Panels can be nested inside Panels, as well as buttons and static text objects.

Inserting a Panel Card

The {PanelCard} is used to create a Panel Card. In the following example, a Panel Card with a Static Text Object will be generated.

{PanelCard}
	{StaticTextObject}

Controls generated from Quick Panels using the {PanelCard} placeholder

The {PanelCard-H}, {PanelCard-F}, and {PanelCard-HF} can be used to create a Panel Card with a Header, Footer, or Header and Footer. For example, the following creates a Panel Card with a header and a static text object:

{PanelCard-H}
	{StaticTextObject}

Controls generated from Quick Panels using the {PanelCard-H} placeholder

This example creates a Panel Card with a header, footer and static text object:

{PanelCard-HF}
	{StaticTextObject}

Controls generated from Quick Panels using the {PanelCard-HF} placeholder

Here is a more complex example showing a Panel Navigator with 3 child Panel Cards. Note that one of the Panel Cards has a header and footer.

{PanelNavigator}
	{PanelCard}
	{PanelCard-HF}
	{PanelCard}

Controls generated for 3 Panel Cards nested inside a Panel Navigator

Here is the same layout with the addition of static text objects to help identify the current Panel Card when testing the component. The colon ':' can be used to define text to be shown in a static text object or button.

{PanelNavigator}
	{PanelCard}
		{StaticTextObject:some text1}
	{PanelCard-HF}
		{StaticTextObject:some text2}
	{PanelCard}
		{StaticTextObject:some text3}

Controls generated for 3 Panel Cards nested inside a Panel Navigator with placeholder text

Predefined Layouts

There are several pre-defined layouts available. To insert a pre-defined layout, click the Insert pre-defined layout link. The pre-defined Layouts dialog lists the layouts availalbe, including a description of the layout and the code that will be inserted into the Quick Panel editor.

Pre-defined Layouts dialog

Quick Panel Placeholders

Placeholders used to define the panel layout in the Quick Panel Genie are listed below.

Placeholder

Description

{PanelCard}

Creates a Panel Card

{PanelCard-H}

Creates a Panel Card with a Header

{PanelCard-F}

Creates a Panel Card with a Footer

{PanelCard-HF}

Creates a Panel Card with a Header and Footer

{PanelLayout}

Creates a Panel Layout

{PanelLayout-H}

Creates a Panel Layout with a Header

{PanelLayout-F}

Creates a Panel Layout with a Footer

{PanelLayout-HF}

Creates a Panel Layout with a Header and Footer

{PanelNavigator}

Creates a Panel Navigator

{PanelNavigator-H}

Creates a Panel Navigator with a Header

{PanelNavigator-F}

Creates a Panel Navigator with a Footer

{PanelNavigator-HF}

Creates a Panel Navigator with a Header and Footer

{StaticTextObject}

Creates a static text object. Use a colon ':' to define the text to be displayed in the text object. EG: {StaticTextObject:This is a static text object}

{ButtonObject}

Creates a button. Use a colon ':' to define the text in the button. EG: {ButtonObject:Click Me!}

{Predefined:Splitview}

Creates a split-view layout with a 'menu' Panel and 'master' Panel wrapped in a Panel Layout. If the window size is large enough, the 'menu' Panel is shown. Otherwise, the 'menu' Panel is docked and a button is shown in a Panel Header for displaying the menu.

{Predefined:SplitviewWithIcons}

Creates a split-view layout with a 'menu' Panel and 'master' Panel wrapped in a Panel Layout. Generates the same controls as the {Predefined:Splitview} but uses an icon to show/hide the docked 'menu' Panel.

{Predefined:SplitviewWithIconsAndPanels}

Creates a split-view layout with a 'menu' Panel and 'master' Panel wrapped in a Panel Layout. Generates the same controls as the {Predefined:Splitview} but uses an icon to show/hide the docked 'menu' Panel. Icons are included in the menu items and sample Panel Cards for each menu item are also created.