Footeris a combination of text, image, icon, etc. that can be made to appear at the bottom of each page when displayed. Footer Configuration enables you to include customized footer in the layout.
The following is a sample code snippet for the footer configuration:
| Code Block | ||
|---|---|---|
| ||
footerConfig : { |
...
enabled : true, |
...
heightInPx : 80, |
...
position : 'fixed', |
...
headerTransisition : false, |
...
component : 'appfooter' |
...
} |
Following are the properties, which are used to customize the footerConfig:
# | Attribute | Description | Sample Value |
|---|---|---|---|
enabled | True: Enables the footer section in the layout. | true | |
heightInPx | Fixes in the height of the footer section in pixels. | 100 | |
position | Fixed: Footer is in a fixed position when the page is scrolled. | fixed | |
headerTransisition | True: Locks the position of the footer and does not allow to auto-hide. | true | |
component | Component is a .JS file which holds the content of the footerConfig. Component must be registered in the CLCR registry in the component.js file. | appfooter |
Example:
Component code:
| Code Block | ||
|---|---|---|
| ||
footerConfig : { |
...
enabled : true, |
...
heightInPx : 80, |
...
position : 'fixed', |
...
headerTransisition : false, |
...
component : 'menufooter' |
...
Footer Configuration code: |
...
canvas.ns('canvas.applnlayout.utkarsh.menu'); |
...
/** |
...
*@namespace"canvas.applnlayout.utkarsh.menu" |
...
*@descriptionThiscomponentiscurrentlyresponsibleJqueryFrameworkto *renderedmenulayoutfooter. |
...
*/ |
...
canvas.applnlayout.utkarsh.menu.footer = Class({ |
...
/** |
...
*@class"canvas.applnlayout.utkarsh.menu.footer" |
...
* |
...
@descriptionTheconstructorgetsthemetadataandparentelement(#FOOTER). |
...
*/ |
...
headerData: null, |
...
parentElem: null, |
...
constructor: function(config) { |
...
this.customJSON = config.config; |
...
this.footerData = config.md || {}; |
...
this.parentElem = config.parentElem; |
...
/** |
...
*AppdockconstructionhomeButton-trueonlyforthoselayoutsthathave |
...
*masterscreentonavigate(e.g., cardlayout). |
...
*/ |
...
/*if (canvas.workspace.metadata.isWidgetCatalogRequired()) { |
...
var appContainerConfig = { |
...
parent: config.parentElem, |
...
homeButton: false |
...
}; |
...
var appLayoutComp = CLCR.getCmp({ |
...
"COMP_TYPE": "APPDOCK", |
...
}); |
...
var appObj = new appLayoutComp(appContainerConfig); |
...
canvas.workspace.metadata.setAppDock(appObj); |
...
}*/ |
...
}, |
...
/** |
...
*@methodgetFooterDOM *@memberof"canvas.applnlayout.utkarsh.menu.footer" |
...
*@descriptionThismethodgetsthelistofworkspacesandpassesittothe *template(menufooter.cttpl)andmakesacallbacktoapplyTemplate. |
...
*/ |
...
getFooterDOM: function() { |
...
this.FOOTER_REQ = this.customJSON.isFooterEnabled(); |
...
this.footerCopyrights = CRB.getFWBundleValue('LBL_COPYRIGHTS') || ''; |
...
var tmpLayer = canvas.templateManager.createTemplate( |
...
'footer_template.cttpl', this,canvas.util.getFWTemplatePath()); |
...
tmpLayer.getTemplate(this.applyTemplate, this); |
...
}, |
...
/** |
...
*@methodapplyTemplate *@memberof"canvas.applnlayout.utkarsh.menu.footer" |
...
* |
...
@descriptionThismethodgetsthetemplate,appendsittotheparent |
...
*elementandaddsclicklistenertoswitchworkspaces. |
...
*/ |
...
applyTemplate: function(template, tmpClass) { |
...
if (!canvas.core.isEmpty(this.parentElem)) { |
...
$(this.parentElem).append(template); |
...
} |
...
} |
...
}); |
...
CLCR.registerCmp({ |
...
"COMPONENT": "menufooter", |
...
"APPLICATION_FW": "JQM" |
...
}, canvas.applnlayout.utkarsh.menu.footer); |
# | Class/Method | Purpose |
|---|---|---|
| 1 | canvas.applnlayout.utkarsh.menu.footer | Constructor class fetches the metadata and parent element using the API. |
| 2 | getFooterDOM | This method is responsible for loading the user profile photo, user info, etc. in the new template using canvas.util.getTemplatePath(). |
| 3 | applyTemplate | This method gets the template, appends it to the parent element and binds the events to switch between the workspaces. |
| 4 | CLCR.registerCmp | Registers the component in the CLCR registry. |