Pop-up Menu

Pop-up Menu allows you to add a pop-up menu to other controls.

Configuration properties

Set or modify the appearance and behavior configuration properties for the Pop-up Menu control in the Configuration properties tab.
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. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.
Theme definitions
Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.
The appearance configuration properties for the Pop-up Menu control 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 control. When Show label is selected, the pop-up menu displays the label of the contained control. By default, the label of the contained control is hidden. Boolean
Label placement The Screen Sizes icon Specifies the label position:
  • Top
  • Left
 String
IBM BPM version 8.6.0 cumulative fix 2017.12Label 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 control.
  • Left
  • Right
 String
Vertical alignment The Screen Sizes icon Specifies the vertical position of the pop-up menu relative to the contained control.
  • 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 control. String
The behavior configuration properties for the Pop-up Menu control 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 control 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 control is placed inside a Pop-up Menu control. Set the configuration properties for the Input Group control 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 control.
Set the following configuration properties for the Pop-up Menu control:
  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 control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events. The Pop-up Menu control 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, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.

Parent topic: Coach views in the BPM UI toolkit