Footer Configuration
Footer is 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:
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 |
---|---|---|---|
1 | enabled | True: Enables the footer section in the layout. | true |
2 | heightInPx | Fixes in the height of the footer section in pixels. | 100 |
3 | position | Fixed: Footer is in a fixed position when the page is scrolled. | fixed |
4 | headerTransisition | True: Locks the position of the footer and does not allow to auto-hide. | true |
5 | 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:
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" *@description This component is currently responsible Jquery Framework to *rendered menu layout footer. */ canvas.applnlayout.utkarsh.menu.footer = Class({ /** *@class"canvas.applnlayout.utkarsh.menu.footer" *@description The constructor gets the metadata and parent element(#FOOTER). */ headerData: null, parentElem: null, constructor: function(config) { this.customJSON = config.config; this.footerData = config.md || {}; this.parentElem = config.parentElem; /** *Appdock construction homeButton-true only for those layouts that have *master screen to navigate(e.g., card layout). */ /*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); }*/ }, /** *@method getFooterDOM *@memberof "canvas.applnlayout.utkarsh.menu.footer" *@description This method gets the list of workspaces and passes it to the *template(menufooter.cttpl)and makes a callback to applyTemplate. */ 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); }, /** *@method applyTemplate *@memberof "canvas.applnlayout.utkarsh.menu.footer" *@description This method gets the template,appends it to the parent *element and adds click listener to switch workspaces. */ 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. |