Create a Docked Panel with a Working Menu

IN THIS PAGE

Create a Panel Layout with a Panel Navigator
Add a Docked Menu That Opens From a Button
Use Javascript to Open Panels from a List Control.

Description

This guide shows how to create a docked Panel that can be opened by clicking on a button. The docked menu will then contain a list of items that can link back to different Panels in a Panel Layout.

To see the video version of this guide watch the following video on 'Building a Menuing System in a UX Component using Docked Panels in a Panel Layout':

Watch Video

Create a Panel Layout with a Panel Navigator

In the UX Builder open the UX Controls page. Check the 'Mobile' checkbox in the toolbar menu.
Open the Panels menu and click on [Panel Layout] to add a Panel Layout to the component.
Highlight the Panel Layout. In the Panels menu select the [Panel Navigator] option and click 'Insert After' to add the Panel Navigator inside the Panel Layout.
Highlight the Panel Navigator. In the Panels menu click on the [Panel Card] option and click 'Insert After' to add a Panel Card inside the Panel Navigator.
Highlight [Panel Card End: PANELCARD_1]. In the Panels menu click on [Panel Card] again to add a second panel card underneath the first one.
Add a third Panel Card to the Panel Navigator using the same approach.
Highlight PANELCARD_1. Open the Other Controls menu and click on the [Static Text] option to add a static text control to the first panel card.
Highlight the [Static Text] Control.
In the Properties list on the right, set the Static text property to read 'Panel 1'. This property should be in the Static Text Properties section.
Highlight PANELCARD_2. Open the Other Controls panel again and add a [Static Text] control to PANELCARD_2. Set this control's "Static text" property to read Panel 2.
Add a [Static Text] control to PANELCARD_3 with a 'Static text' property that reads 'Panel 3.'
Run the component in Live Preview. You should be able to move between panels by dragging the mouse across the simulated mobile device's screen.

Add a Docked Menu That Opens From a Button

On the UX Controls page highlight the Panel Layout that you defined above. Open the Panels menu and then click on [Panel Card] to add a Panel Card inside the Panel Layout and before the Panel Navigator.
Highlight the new Panel Card.
In the Panel Card's properties list click the button next to the Id property. Give the Panel an Id of 'MENULEFT' and click OK.
In the list's Panel Size and Dock Options section set the 'Layout size' property to 200.
In the same section, select 'collapse-before' from the 'Dock' property's dropdown list.
With MENULEFT highlighted, open the 'Data Controls' menu and click on the [List] option to add a list control to the MENULEFT panel.
Highlight the List control. In the properties menu, in the List Properties section, set the 'Width' property of the List control to 160px.
Click on the 'List properties' to open the grid builder.
On the List Builder's Data Source pane select 'Static'.
Click the button next to the 'Static text' property.
Add the following Static Choices to the Static Choices dialog. Click OK
```
Choices
Panel1
Panel2
Panel3
```
Open the List Layout Pane. Use the blue > arrow to move the Choices field from the Available Fields list into the Columns in List section. Click OK to close the List Builder.
On the UX Controls page highlight the Panel Navigator.
Open the 'Containers' menu and click on the [Container] option.
From the Container Type list select the 'PanelHeader' option and click 'Insert After'.
Highlight the newly created Panel Header.
Open the 'Other Controls' menu and click on [Button] to add a button to the Panel Header.
Highlight the Button control. In the properties list's Button Properties section change the Button text property to be 'Menu'.
Click the button next to the Id property. Change the buttons Id property to be BUTTON_MENU_LEFT and click OK.
Highlight PANELLAYOUT_1.
In the Properties list click on the button next to the 'Docked Panel controller buttons' property.
Click the 'Add Button Controller' in the dialog that opens.
From the Button Id dropdown select 'BUTTON_MENU_LEFT'.
From the Panel Id dropdown select the 'MENULEFT' panel that you previously defined. Click OK and OK again.
Run the Component in Live Preview. You should see a button that appears in a header above the Panel Navigator. Click it and the menu panel should open. You should be able to click off to the side of the menu in order to close it. However, the rows in the list do not have any functionality. This is added in the next section.
- The Menu Button
- The Menu Panel

Use Javascript to Open Panels from a List Control.

Highlight the List control and click on the 'List properties' property again to open the List Builder.
At the bottom of the List Builder click on 'List Events'
From the list of possible events highlight the onClick event.
Insert the following code for the onClick event. Click OK and OK again to close the List Builder.
```
selectMenuItemLeft(this.selectionData[0].Choices);
```
selectMenuItemLeft() is a Javascript function that will be defined in the next step. Here 'Choices' is name of the Field that you defined in the Static data property on the List Builder's Data Source pane. The 'this.selection' is an array containing all of the rows that you defined in the Choices field.
From the Overview menu, Open the Javascript functions page.
Add the following Javascript
```
function selectMenuItemLeft(item) {

var pObj = {dialog.object}.panelGet('PANELLAYOUT_1');
pObj.hideDock();
if(item == 'Panel1') {dialog.object}.panelSetActive('PANELCARD_1');
if(item == 'Panel2') {dialog.object}.panelSetActive('PANELCARD_2');
if(item == 'Panel3') {dialog.object}.panelSetActive('PANELCARD_3');

}
```
This is where the selectMenuItemLeft() function that was called in the List Builder is defined. The function takes an 'item' argument, which is an element in the array created as Static data in the list control. Because it is tied to an onClick event, this data is only sent when a row is clicked on. 'pObj' is a pointer to the top level object, in this case PANELLAYOUT_1. The hideDock() causes the docked menu to go away. Finally, the 'if' statments determine what Panel will replace the docked panel based on the element of the array that was passed into the function.
Run the Component in Live Preview. Click on the 'Menu' button to open the menu. CLick on one of the menu options. You should see the docked panel disappear and the Panel that was chosen in the menu will fill the screen.

Report an issue with this page