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
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:
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
![]() |
Specifies the label position:
|
String |
Label width ![]() |
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
![]() |
Specifies the horizontal position of the pop-up menu relative to the contained view.
|
String |
Vertical alignment
![]() |
Specifies the vertical position of the pop-up menu relative to the contained view.
|
String |
Shadow | Adds a shadow to the pop-up menu frame. | Boolean |
Width
![]() |
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:
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:
|
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:
- 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.
- Under Events, in On button click, enter the
following line of
code:
${Popup_Menu1}.setMenuVisible(!${Popup_Menu1}.isMenuVisible{})
'Popup_Menu1'
is the control ID of the Pop-up menu view.Set the following configuration properties for the Pop-up menu view:
- Under Appearance, set Label placement to Top, Horizontal alignment to Left, Vertical alignment to Bottom, select Shadow, and set Width to 25%.
- Under Behavior, select Pin menu.
- 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.

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.