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"
*@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().

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.