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. False: Disables 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. Absolute: Footer moves along with the page when scrolled.	fixed
4	headerTransisition	True: Locks the position of the footer and does not allow to auto-hide. False: Position is not fixed and allows toauto-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. The customized new component can either contain templates with AJAX classes or DOM coding which contains references to images or any workspace etc.	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"
*@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(). canvas.util.getFWTemplatePath() must only be used, if same framework templates are used.
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.