Skip to main content

NavMenu Component

Zuora

NavMenu Component

  1. Last updated
  2. Save as PDF

The NavMenu is a lightweight global UI component that includes the following features:

  • The component renders a navigation menu based on a Picklist-type attribute
  • When a menu item selection changes, the component refreshes the associated list.
  • When a menu item selection changes, the component creates a new Breadcrumb entry.
  • When the breadcrumb entry associated is removed, the component refreshes the associated list.

The NavMenu component is available in the Versions 6.2 and later of Zuora Quotes.

The NavMenu component consists of:

  • NavMenu.component: The global component to be embedded on Visualforce pages
  • NavMenuOptions.class: The global Apex class that stores the configuration options for the NavMenu component

NavMenu Component Attributes

The NavMenu component accepts the following attribute.

Attribute
Type
Required?
Description
options NavMenuOptions Required Configuration options for the NavMenu component

NavMenuOptions Class

The component has an option class that provides the following property options.

Property Type Descriptiom
breadcrumbComponentName String

The Breadcrumb component name. 

If not provided, Breadcrumb is not be generated when the NavMenu items are changed.
defaultSelection String

The default selection value when the NavMenu is initially rendered. 

If this value is not provided, the default Picklist value is used.
objectName String

The object name with which this NavMenu is associated.

The object field identified by fieldName must be part of this object.  
fieldName String The field name of the Picklist type with which this NavMenu is associated
filterFieldName String

The API name of the filed that is used in the list filter.  
For example, if NavMenu is to filter on zqu__ProductRatePlan__c.zqu__<wbr/>ZProduct__c.zqu__Category__c, 
you would configure the following options for the NavMenu component: 
objectName = zqu__ZProduct__c
fieldName = zqu__Category__c
filterFieldName = zqu__ZProduct__r.Category__c

If this field is null, the value in fieldName is used as default.
header String The navigation menu header text 
navMenuItems LIST The list to store menu item information from the Picklist options. It is also used to render menu items on the Visualforce page.
quickListComponentName String The QuickList component name that this component instance is associated with

Sample Code

The following example code shows how to use the NavMenu component on a Visualforce page:

<apex:page controller="NavMenuSampleController" sidebar="false">
   <zqu:Breadcrumb name="{!options.breadcrumbComponentName}"/>
   <zqu:NavMenu options="{!options}"/>
   <zqu:QuickList listName="{!options.quickListComponentName}" contextIds=""/>
</apex:page>

The following is a code for the NavMenuSampleController class:

public class NavMenuSampleController {
   public zqu.NavMenuOptions options {get;set;}
   public NavMenuSampleController ()
   { 
      options = new zqu.NavMenuOptions(); 
      options.objectName = 'zqu__QuoteCharge__c'; 
      options.fieldName = 'Custom_Picklist_Field__c'; 
      options.header = 'Test Nav Menu Component'; 
      options.breadcrumbComponentName = 'myBreadcrumb';
      options.quickListComponentName = 'myQuickList'; 
      options.defaultSelection = 'Menu Option 2'; 
   }
}

To run the sample NavMenu code:

  1. Create the custom field, Custom_Picklist_Field__c, on the QuoteCharge__c object. Select Picklist as the field type, and enter the following as Picklist options: 
    • Menu Option 1
    • Menu Option 2
    • Menu Option 3
  2. Create a Breadcrumb component instance named, myBreadcrumb.
  3. Create a Quicklist named, myQuickList.
  4. Run the Visualforce page you created above.