6.3Pop-up menus

The framework provides a standard mechanism for displaying pop-up menus. This has three advantages over a widget implementing its own menu HTML:

Standard look and feel with MyTrader's built-in widgets

On small screens such as mobile phones, the framework automatically converts menus into a full-screen dialog (the MenuListDialog).

The framework's menus can extend outside the boundary of a widget's frame. If your widget is in a small frame, such as a small segment of a multi-widget layout in the MyTrader page container, any menu which the widget displays itself will be confined to its small frame.

A widget can display a pop-up menu using Framework.CreatePopupMenu(). This takes three parameters:

Parameter	Description
menu	Definition of the menu (which can contain items with sub-menus)
eventOrNode	Either a node in the DOM, or a Javascript event object from which the framework uses the event.target. The menu is positioned relative to this node.
callback	Asynchronous callback function which receives the user's selection from the menu

For example:

// Add a click handler on someButton which displays a menu next to it

someButton.addEventListener("click", function(event) {

var menuDef = { … some menu definition … };

Framework.CreatePopupMenu(menuDef, event, function(Msg) {

// Receives the asynchronous result of the menu

});

});

The definition of a menu is the same as for Framework.MenuListDialog(), and described in detail in that section. The menu should have a title (only used on small screens when converted into a MenuListDialog), and an array of items[]. Each item can have an icon, custom colours, an array of sub-items etc.

The asynchronous callback function receives the user's selection from the menu, or cancellation. If there was a selection, then the Msg will contain an itemData which is simply the selected entry from the items[] array. For example:

Framework.CreatePopupMenu(menuDef, event, function(Msg) {

if (Msg.itemData) {

// User made a selection, and the original object from items[]

// is in Msg.itemData

} else {

// User dismissed the menu without making a selection

}

});