Knowledge Center

Knowledge Center > Zuora CPQ > Zuora CPQ Development Resources > Zuora CPQ Component Library > Zuora CPQ Global Components > FooterBar Component

FooterBar Component

The FooterBar component is a docked footer bar that can be embedded on a VisualForce page. The component allows you to customize the navigation buttons displayed on the page, including button style and button click events. The out-of-the-box component is styled according to the Salesforce Lightning Design System Docked Form Footer component.

The FooterBar component consists of:

  • FooterBar.component : The VisualForce UI component
  • FooterBarOptions.class : The Apex class that stores the configuration options specified by the developer and used by the controller to render the component
  • FooterBarItem.class : The Apex class that stores the configuration options for each button on the FooterBar component 

FooterBar Component Attributes

The FooterBar component has the following attribute.

Attribute Name

Type

Required?

Description

footerOptions zqu.FooterBarOptions Yes The configuration options to render the component

FooterBarOptions Class

The FooterBar component has the FooterBarOptions class that provides the following property options.

Property

Type

Required?

Description

styleClass String No The CSS style class that will be added to the HTML element of the footer bar
footerItems List<zqu.FooterBarItem> No A List of configuration options for the buttons to be displayed on the footer bar
isRendered Boolean No A flag to determine whether the component should be displayed

FooterBarItem Class

The FooterBar component has the FooterBarItem class that provides the following property options.

Property

Type

Required?

Description

itemLabel String No The label for the button
onClickAction String No The JavaScript executed when the user clicks the button
isDisabled Boolean No If true, the button will be disabled
isRendered Boolean No If true, the button will not be displayed
styleClass String No The CSS style class that will be added to the button
isCustomRenderedButton Boolean No If true, the user is responsible for providing the button's HTML markup inside the body of the component. See example below.

Integration Sample Code

To use the FooterBar component:

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

Visualforce Page Example:

<apex:page id="FooterBarExample" sideBar="false" tabStyle="zqu__Quote__c" standardController="zqu__Quote__c" extensions="FooterBarExampleController">   
    <apex:composition template="zqu__QuoteWizardTemplateNoForm">
        <apex:define name="PageBody">
                <apex:form>
                    <zqu:FooterBar footerOptions="{!footerOptions}">
                        <apex:outputPanel rendered="{!footerItem.isCustomRendered}">
                                <button type="button">Custom Button</button>
                        </apex:outputPanel>
                    </zqu:FooterBar>
                </apex:form>
        </apex:define>
    </apex:composition>
</apex:page>

Apex Controller Example:

 public with sharing class FooterBarExampleController {
    public zqu.FooterBarOptions footerOptions {
        get {
                if (footerOptions == null) {
                    footerOptions = new zqu.FooterBarOptions();
                    List<zqu.FooterBarItem> buttons = new List<zqu.FooterBarItem>();
                         
                    //Standard Button
                    zqu.FooterBarItem button = new zqu.FooterBarItem();
                    button.itemLabel = 'Test Button';
                    button.onClickAction = 'doSomething();';
                    button.styleClass = 'myCustomButton';
 
                    //Custom Rendered Button
                    zqu.FooterBarItem button = new zqu.FooterBarItem();
                    button.itemLabel = 'Test Custom Rendered Button';
                    button.onClickAction = 'doSomething();';
                    button.isCustomRendered = true;
                }
                return footerOptions;
        }
        set;
    }
 
    public FooterBarExampleController(ApexPages.StandardController controller) {}
}
Last modified

Tags

This page has no custom tags.

Classifications

(not set)