Skip to content

Platform: Process flow V1.0 Component Technical Design

Jump to bottom
sKudum edited this page Jan 29, 2020 · 7 revisions

Menu/Menu Trigger

Summary

A Menu is a set of action items or Menu Items, which appear/disappear on click of a trigger element. Menu Items are clickable items which invoke some action within an application. Examples of trigger elements of a Menu include a Menu Button or a Menu Item.

Example

<fdp-menu-button [triggerFor]="rootList" [isSplit]="true">Menu</fdp-button>

<fdp-menu #rootList>
    <fdp-menu-item [triggerFor]="sublistA">Item A</fdp-menu-item>
    <fdp-menu-item [triggerFor]="sublistB">Item B</fdp-menu-item>
    <fdp-menu-item (click)="invokeC()">Item C</fdp-menu-item>
    <fdp-menu-item (click)="invokeD()">Item D</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListA>
    <fdp-menu-item (click)="invokeA1()">Item A1</fdp-menu-item>
    <fdp-menu-item (click)="invokeA2()" disabled>Item A2</fdp-menu-item>
    <fdp-menu-item (click)="invokeA3()">Item A3</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListB>
    <fdp-menu-item [triggerFor]="subListB1">Item B1</fdp-menu-item>
    <fdp-menu-item (click)="invokeB2()">Item B2</fdp-menu-item>
    <fdp-menu-item (click)="invokeB3()">Item B3</fdp-menu-item>
</fdp-menu>

<fdp-menu #subListB1>
    <fdp-menu-item [iconClass]="'sap-icon--cart'" (click)="invokeB1x()">Item B1x</fdp-menu-item>
    <fdp-menu-item [iconClass]="'sap-icon--settings'" (click)="invokeB1y()">Item B1y</fdp-menu-item>
    <fdp-menu-item [iconClass]="'custom-icon--happy-face'" (click)="invokeB1z()">Item B1z</fdp-menu-item>
</fdp-menu>

<!-- Shellbar menu button -->
<fdp-shellbar-menu-button [triggerFor]="shellbarMenu"></fd-shellbar-menu-button>

<fdp-menu #shellbarMenu>
    <fd-menu-item>First</fd-menu-item>
    <fd-menu-item>Second</fd-menu-item>
</fdp-menu>

<!-- Menu with multiple triggers -->
<fdp-menu #commonMenu>
    <fdp-menu-item>Edit</fdp-menu-item>
    <fdp-menu-item>Delete</fdp-menu-item>
    <fdp-menu-item>New</fdp-menu-item>
</fdp-menu>

<fdp-menu-button [triggerFor]="commonMenu">First Button</fdp-menu-button>
<fdp-menu-button [triggerFor]="commonMenu">Second Button</fdp-menu-button>
<fdp-menu-button [triggerFor]="commonMenu">Third Button</fdp-menu-button>

<!-- Menu component for constructing a menu from a list of menu item data -->
<fdp-dynamic-menu-button [list]="menuList"></fdp-dynamic-menu-button>

Design

Features

The menu architecture should be patterned after the Angular Material Menu. The Menu should include the following features:

  • Menus have a designated trigger element (i.e. MenuButton, MenuItem) identified by "triggerFor" attribute.
  • Menu should allow for keyboard navigation through all menu items and subitems.
  • Menu should be constructed declaratively.
  • Menus can have multiple trigger elements

Base Class

We should create a MenuTriggerBase class which will serve as the common class from which all "trigger" elements are extended. It will encapsulate all the functionality needed to establish menu association, show/hide the associated menu, and handle keyboard inputs.

This base component should be able to be extended several of the requested components like:

  • Menu Button
  • Split Menu Button
  • Contextual Menu Button (?)
  • Overflow Menu Button (?)
  • Toolbar Menu Button
  • Shellbar Menu Button
  • Menu Item

Notes

Menus constructed in this manner allow for more sensible internationalization, as all the translatable text are exposed in the template. The i18n directive can be applied to the MenuItems directly.

This Menu design is modular and more easily extensible - we can use the same base class for all variations of menus with minimal code variation.

The cascading menu feature as defined by MegaMenu can be applied to any trigger element - thus we don't need to create a separate MegaMenu component.

Consider incorporating "lazy rendering" of menus.

References

Questions

From Kavya: We need to consider using the following existing features in Menu based on the new Fiori3 guidelines:

  • Group headers need to be removed and separator lines should be used instead to show grouping
  • Add-on icon that allows to be selected/de-selected needs to be removed
  • The proposed design needs to also handle icons, both primary and secondary. The secondary icon should be shown only when the item triggers a submenu, therefore it should be handled in the library itself, right? Should options to change the secondary icon be given to end-user?
  • Scrolling and scrollLimit should be defined as in the existing platform Menu design. With the new design, we can possibly also separate out scrolling functionality for submenus independent of menu.
<fdp-menu-button [triggerFor]="rootList" [isSplit]="true" [isScrolling]="true" [scrollLimit]="3">Menu</fdp-button>
<fdp-menu #rootList>
    <fdp-menu-item [triggerFor]="sublistA" [primaryIcon]="sap-icon--grid">Item A</fdp-menu-item>
    <fdp-menu-item [triggerFor]="sublistB">Item B</fdp-menu-item>
    <fdp-menu-item (click)="invokeC()">Item C</fdp-menu-item>
    <fdp-menu-item (click)="invokeD()">Item D</fdp-menu-item>
</fdp-menu>
  • Currently when we use a menu with a trigger, it is usually as part of a popover, where fdp-menu-button is part of fd-popover-control and fdp-menu is part of fd-popover-body. Does this new design also take into account that menu and its trigger will be ultimately part of the fd-popover component?
Clone this wiki locally