MenuButton Component

Last updated
Save as PDF

The MenuButton component can be integrated with the ButtonBar component and supports the following:

Integrated with the existing ButtonBar component
Configure menu title, height, button text, menu item options, click event.

The MenuButton component consists of:

MenuButton.component: The Visualforce UI component.
MenuButtonOptions.class: The Apex class that stores the configuration options specified by the developer and used by the controller to render the component.
MenuButtonOptions.MenuItem.class: The Apex class that constructs the menu item options for the component.

MenuButton Component Attributes

The MenuButton component accepts the following attributes.

Attribute	Type	Required?	Description
id	String	Required	An identifier that allows the component to be referenced by other components in the page.
options	zqu.MenuButtonOptions	Required	The configuration options for the MenuButton component.

MenuButtonOptions Class

The MenuButton component has the MenuButtonOptions class that provides the following property options.

Property	Type	Required?	Description
buttonLabel	String	Optional	The displayed label of the button in the component.
menuHeight	String	Optional	The height of the menu button.
menuId	String	Required	The Id of the menu button.
menuItemLayoutBlock	Boolean	Optional	If set this to true, the menu item options won't be collapsible.
menuItemOnClickAction	String	Optional	The JavaScript method which will be triggered when click each of the menu items.
menuItems	List <zqu.MenuButtonOptions.MenuItem>	Required	The menu item options displayed in the menu button component.
menuItemSectionTitle	String	Optional	The title of all the menu item options.
menuLabel	String	Optional	The displayed label of the menu button.
menuName	String	Optional	The API name of the menu button.

Integration Sample Code

To use the MenuButton component:

Put the ButtonBar component on your Visualforce page inside an <apex:form> tag as shown in the Visualforce Page Example below.
Set up the component options in your controller as shown in the Apex Controller Example below.

Visualforce Page Example:

<apex:page controller="SampleController">
   <zqu:ButtonBar options="{!options}" dir="h" />
</apex:page>

Apex Controller Example:

public class SampleController {
   public zqu.ButtonBarOptions options {get;set;}
   public SampleController ()
   {
      options = new zqu.ButtonBarOptions();
      zqu.MenuButtonOptions menuButtonOption1 = new zqu.MenuButtonOptions();
      menuButtonOption1.menuId = '1';
      menuButtonOption1.menuName = 'add_product';
      menuButtonOption1.menuLabel = 'Add Product';
      menuButtonOption1.buttonLabel = 'Select';
      menuButtonOption1.menuItemSectionTitle = 'Select a step to begin';
 
      menuButtonOption1.menuItems = new List<zqu.MenuButtonOptions.MenuItem>();
      zqu.MenuButtonOptions.MenuItem item1 = new zqu.MenuButtonOptions.MenuItem();
      item1.id = 'id1';
      item1.name = 'name1';
      item1.label = 'Add Base Products';
      item1.bullet = 'Step 1';
      menuButtonOption1.menuItems.add(item1);
       
      zqu.MenuButtonOptions.MenuItem item2 = new zqu.MenuButtonOptions.MenuItem();
      item2.id = 'id2';
      item2.name = 'name2';
      item2.label = 'Add Addon Products';
      item2.bullet = 'Step 2';
      menuButtonOption1.menuItems.add(item2);
 
      options.buttonItems = new List<zqu.ButtonBarOptions.ButtonBarItem>();
      zqu.ButtonBarOptions.ButtonBarItem buttonBarItem1 = new zqu.ButtonBarOptions.ButtonBarItem('but1id', menuButtonOption1);
      options.buttonItems.add(buttonBarItem1);
   }
}