Message menus are not realized as a particular widget, but rather implemented using the more general purpose Mega Menu widgets.

Message menus are usually included in a One UI Header.

These examples use declarative HTML because it is more compact and easier to read. However, they could equally well have been coded in JavaScript using the APIs for the various widgets.

Creating a message menu in a Header

Create an idx.oneui.MenuBar to provide the navigation in the Header

This will normally contain regular menus for the application as well as the message menu. It should have an id that can be passed to the Header when it is created.

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    ...
  </div>
    ...
</body>

Add a popupMenuBarItem for the message menu

This is a regular dijit popupMenuBarItem, as is used for normal menu bar items.

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages ... </span>
        ...
    </div>
      ...
  </div>
    ...
</body>

Add an idx.oneui.MenuDialog as the drop-down menu

The idx.oneui.MenuDialog provides a drop-down menu that can also include rich dialog content (like the "View all" link) as well as menu items.

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages ... </span>
      <div data-dojo-type="idx.oneui.MenuDialog">
        ...
      </div>
    </div>
      ...
  </div>
    ...
</body>

Add an idx.oneui.Menu to the MenuDialog

The idx.oneui.Menu will contain the message menu items within the message menu. It automatically works in concert with the enclosing idx.oneui.MenuDialog so that the whole assembly behaves like a single drop-down menu. Be sure to apply the oneuiMessageMenu class to it so that the appropriate One UI message styling is applied to it and any menu items in it.

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages ... </span>
      <div data-dojo-type="idx.oneui.MenuDialog">
        <div data-dojo-type="idx.oneui.Menu" id="message_menu_1" class="oneuiMessageMenu">
          ...
        </div>
      </div>
    </div>
      ...
  </div>
    ...
</body>

Create a header

Once the structure of the whole menu bar and its menus has been defined then create an idx.oneui.Header and pass the menu bar to it that is to be used as the main navigation for the page. The menu bar and its drop-downs should be fully defined before creating the header, but individual menu items can be added and removed from the drop-downs after header creation if so desired (which will almost certainly be the case for message menus).

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages ... </span>
      <div data-dojo-type="idx.oneui.MenuDialog">
        <div data-dojo-type="idx.oneui.Menu" id="message_menu_1" class="oneuiMessageMenu">
          ...
        </div>
      </div>
    </div>
      ...
  </div>
  <div data-dojo-type="idx.oneui.Header" data-dojo-props="primaryTitle: 'Mega-menu examples', primaryBannerType: 'thick', navigation: 'menus', help: 'help'">
  </div>
    ...
</body>

Putting a "badge" on the Header menu item

A badge can be added to the popupMenuBarItem for a message menu like so:

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages<span class="idxBadgeWarning">5</span></span>
      <div data-dojo-type="idx.oneui.MenuDialog">
        ...
      </div>
    </div>
      ...
  </div>
    ...
</body>

Classes that can be used are: "idxBadgeError", "idxBadgeWarning", "idxBadgeInformation" and "idxBadgeSuccess".

Adding messages to the menu

Creating menu items with createMessageMenuItem()

Whilst items in a message menu are regular dijit.MenuItem's, very specific content and formatting are prescribed by the One UI standard. A convenience method called idx.oneui.Menu.createMessageMenuItem() is provided that can be used to create conforming menu items:

var menuItem = Menu.createMessageMenuItem({
    type: "error",    // or "warning", "information" or "success"
    content: "Hello, world!\u200e",
    timestamp: locale.format(new Date(), { formatLength: "medium", locale: this.lang }),
    messageId: "CAT123456"
});
Will produce a menu item that looks like this:

Alternatively, creating message menu items from scratch

Message menu items can also be created in the conventional way, should there be a need for alternative formatting or content. The menu item above could be created manually like this:

var menuItem = new MenuItem({ 
  label: '<span class="messageMenuTimestamp messagesContrast">Mar 14, 2012 2:23:46 PM</span>
          <span class="messageTitles">Hello, world!</span>
          <span class="messagesContrast">(CAT123456)</span>', 
  iconClass: "oneuiErrorMenuItemIcon"
});

Inserting items into the menu

Message menu items are added to message menus by calling addChild() on the appropriate idx.oneui.Menu.

var menuItem = Menu.createMessageMenuItem({
    type: "error",    // or "warning", "information" or "success"
    content: "Hello, world!",
    timestamp: locale.format(new Date(), { formatLength: "medium", locale: this.lang }),
    messageId: "CAT123456"
});
dijit.byId("message_menu_1").addChild(menuItem);

Removing messages from the menu

Message menu items can be removed from a message menu simply by calling removeChild() on the appropriate idx.oneui.Menu.

var menuItem = ...;
  ...
dijit.byId("message_menu_1").removeChild(menuItem);
menuItem.destroy();

Including additional filter, navigation and search options

Additional UI elements can be included in a message menu simply by making them peers of the idx.oneui.Menu within the idx.oneui.MenuDialog. So, for example, a "View all" link could be added below the menu items like this:

<body class="oneui">
  <div data-dojo-type="idx.oneui.MenuBar" id="menus">
    <div data-dojo-type="dijit.PopupMenuBarItem">
      <span>Messages ... </span>
      <div data-dojo-type="idx.oneui.MenuDialog">
        <div data-dojo-type="idx.oneui.Menu" id="message_menu_1" class="oneuiMessageMenu">
          ...
        </div>
        <div style="padding: 10px 1em 10px 1em; background-color: #fafafa;"><a href="javascript:">View all (10)</a></div>
      </div>
    </div>
      ...
  </div>
    ...
</body>

Active UI content within the message menu that results in the menu being closed will need additional code to support it, as is the case for mega menus in general. Details of how to do this can be found in the Mega Menu documentation.