Pop-up menu

Adds a pop-up menu to other views. You can pin it to a menu item when the menu item is clicked or when the view loses the focus.

Configuration properties

Under Configuration, set or modify the appearance and behavior properties for the view.

Screen size
A configuration property that has the Screen Sizes icon The Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value.
Theme definitions
Theme definitions specify the colors and styles for a view and determine its appearance. You can preview the look and feel of views in the theme editor. See Themes.
The appearance configuration properties for the Pop-up menu view are shown in the following table:
Table 1. Appearance configuration properties for Pop-up menu
Appearance configuration property Description Data type
Show label Provides the label of the pop-up view. When Show label is selected, the pop-up menu displays the label of the contained view. By default, the label of the contained view is hidden. Boolean
Label placement The Screen Sizes icon Specifies the label position:
  • Top
  • Left
 String
Label width Large screen icon The width of the label. You can specify the width in px (pixels), % (percent), or em units. For example, 50px, 20%, or 0.4em. If a unit type is not specified, px is assumed. String
Horizontal alignment The Screen Sizes icon Specifies the horizontal position of the pop-up menu relative to the contained view.
  • Left
  • Right
 String
Vertical alignment The Screen Sizes icon Specifies the vertical position of the pop-up menu relative to the contained view.
  • Top
  • Bottom
 String
Shadow Adds a shadow to the pop-up menu frame. Boolean
Width The Screen Sizes icon Specifies the width of the envelope that wraps the view. String
The behavior configuration properties for the Pop-up menu view are listed in the following table:
Table 2. Behavior configuration properties for Pop-up menu
Behavior configuration property Description Data type
Pin menu Prevents the pop-up menu from closing automatically when a menu item is clicked or when the view loses the focus. Boolean
Menu items Specifies the items in the menu:
Command (String)
Specifies the identifier for the menu item. When the item is selected, its command value is passed to the On item click event as the command context variable. Use this value to determine which menu item was selected and to perform actions such as switching views, showing or hiding components, or triggering application logic. See also the On item click event.
Item type (String)
Specifies the menu item type:
  • Label
  • Separator
  • Section Header
Icon (String)
The icon that you want to add to the specified menu item. Leave blank for no icon.
Item text (String)
The text to display for the specified menu item (not applicable to separators).
Badge shape (String)
The badge shape you want to use.
  • None
  • Square
  • Rounded
Badge color (String)
The color style to use for the badge. The colors correspond to variables in the specified theme.
Badge text (String)
The text that is added to the badge.
 MenuItemSpec[]

Example

In this example, an Input Group view is placed inside a Pop-up menu view. Set the configuration properties for the Input Group view as follows:
  1. Under Appearance, set Label placement to Top, Color style to Warning, Button location to Left, Button type to Menu, and Button info to Click to see Menu Items.
  2. Under Events, in On button click, enter the following line of code:
    ${Popup_Menu1}.setMenuVisible(!${Popup_Menu1}.isMenuVisible{})
where 'Popup_Menu1' is the control ID of the Pop-up menu view.
Set the following configuration properties for the Pop-up menu view:
  1. Under Appearance, set Label placement to Top, Horizontal alignment to Left, Vertical alignment to Bottom, select Shadow, and set Width to 25%.
  2. Under Behavior, select Pin menu.
  3. For Menu items, click plus (+) to add three rows to the table, each with the following values:
    • Row 1: For Command, enter 1, set Item type to Label, for Item text, enter Item 1, set Badge shape to Rounded, Badge color to Primary, and for Badge text enter 1.
    • Row 2: For Command, enter 2, set Item type to Label, for Item text, enter Item 2, set Badge shape to Rounded, Badge color to Info, and for Badge text enter 2.
    • Row 3: For Command, enter 3, set Item type to Label, for Item text, enter Item 3, set Badge shape to Rounded, Badge color to Success, and for Badge text enter 3.
At run time, the result is a pop-up menu that looks similar to the following image.
The image shows an expanded pop-up menu that reads "Click to see Menu Items", and has three menu items displayed vertically: Item 1 has a dark blue, rounded badge symbol next to it, which reads "1", Item 2 has a light blue, rounded badge symbol next to it, which reads "2", and Item 3 has a green, rounded badge symbol next to it, which reads "3". The drop-down menu has a shadow.

Events

Set or modify the event handlers for the view in the Events properties. You can set events to be triggered programmatically or when a user interacts with the view. For information about how to define and code events, see User-defined events. The Pop-up menu view has the following types of event handlers:
  • On load: Activated when the page loads. For example:
    me.setMenuVisible(true)
  • On item click: Activated when a menu item is selected. The value configured in the Command field for the selected item is exposed as the command context variable, which the event logic can use to determine which item was selected. Applicable only for labels; not applicable for section headers.
    Here's an example that shows how to control the visibility of two views when menu items are configured with command values such as view1 and view2:
    if (command === "view1") {
     ${View1}.setVisible(true);
     ${View2}.setVisible(false);
} else if (command === "view2") {
     ${View1}.setVisible(false);
     ${View2}.setVisible(true);
}
    The following example extends this logic to control the visibility of three views based on command values 1, 2, and 3:
    if (command === "1") {
    ${View1}.setVisible(true);
    ${View2}.setVisible(false);
    ${View3}.setVisible(false);
} else if (command === "2") {
    ${View1}.setVisible(false);
    ${View2}.setVisible(true);
    ${View3}.setVisible(false);
} else if (command === "3") {
    ${View1}.setVisible(false);
    ${View2}.setVisible(false);
    ${View3}.setVisible(true);
} else {
    console.warn("Unknown command:", command);
}

Methods

For detailed information on the available methods for Pop-up menu, see the Pop-up menu JavaScript API.

Additional resources

For information about how to create a coach or page, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see View properties.