Floating action button MODL reference

Floating action buttons appear (float) in the bottom right corner of Workspaces. This is accomplished by adding a Menu element to the Navigator or Banner portlets of the workspace and setting the action property of the Menu Item to “true”.

Language elements

Portlet Menu element

XML

        ...
   </Layout>
   <Menu name="Tools">
      <MenuRef ref="mda:Contacts"/>
      <Menu name="Extra">
         <Item action="true" caption="ids.newHousehold" event="addHousehold" icon="icon:&#xE88A;" name="mitAddHousehold"/>
      </Menu>
   </Menu>

The Menu element comes after the end of the Layout and may contain MenuRef elements or Menu elements with Items in them. MenuRef elements allow you to centralize the definition of menus that are re-used throughout the application in .menu files. The local Menu entries allow you to define FAB menu items right in the portlet, or to extend the options available in global menus - those defined in .menu files - with local Items.

The important thing in these menus is that their Items must be marked with action=”true” if they are to show up in the FAB menu.

The current renderer (as of June 2018) renders a single button for a menu with one item; two buttons for a menu with two items; and a single “fly-out” button for a menu with more than two entries.

Menu file specification

XML

        ...
   </Layout>
   <Menu name="Tools">
      <MenuRef ref="mda:Contacts"/>
      <Menu name="Extra">
         <Item action="true" caption="ids.newHousehold" event="addHousehold" icon="icon:&#xE88A;" name="mitAddHousehold"/>
      </Menu>
   </Menu>

name: The identifier of the item
caption: The display name of the item. This should be a stringId for internationalization
event: The UIEvent raised when the menu item is activated, that is, when the button icon is clicked
action: Boolean. Set to “true” to be part of the top level menu (that is, the FAB menu).