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.
- 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) {} }