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)
The command that runs when this menu item is selected.
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 an item is clicked. Applicable only for labels, not applicable for section headers. For example:
    ${Text1}.setLabelPosition(command) //sets the label position of the Text1 control to the value of command
    //the value of command is set in the menu item command property

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.