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