FooterBar component
This article describes the FooterBar Component and its attributes, class, page, and sample code.
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) {}
}