FooterBar Component

Last updated
Save as PDF

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:

Put the FooterBar 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 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) {}
}