Landing Page

Landing page is the first page or screen that opens up once you log on to the application. Landing page can have an image or any workspaces. By default, Canvas Technology provides sample-landing-page as the default page that contains the icons of the workspaces.

The following is a sample code snippet for the landing page configuration:

landingPage : {
enabled : false,
component : 'sample-landing-page'
},

The following table lists the properties of the landingPage configuration:

#	Attribute	Description	Sample Value
1	enabled	True: Renders the landing page for the layout. False: Renders the default sample-landing-page, which loads workspace at the first position on the landing page.	true
2	component	Component is a .JS file that holds the content of the landingPage. New 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 that contains references to images or any workspace etc.	CARDMASTER

Example:
In the following screenshot, the page which contain group of workspaces is the Landing Page.

Component code:

landingPage : {
enabled : true,
component : 'utkarsh-sample-landing-page'
},

Landing Page code:

canvas.ns('canvas.applnlayout.utkarsh.landingpage');
/**
*@namespace"canvas.applnlayout.card"
*@descriptionThiscomponentiscurrentlyresponsibleJqueryFrameworkto
*renderedcardlayoutheader.
*/
canvas.applnlayout.utkarsh.landingpage = Class({
/**
*@class"canvas.applnlayout.utkarsh.landingpage"
*@descriptionTheconstructorgetsthemetadataandparentelement(#HEADER).
*/
parentElem: null,
constructor: function(config) {
this.parentElem = config.parentElem;
this.itemList = wsArr = canvas.workspace.metadata.getWorkspaces();
/**
*Thisloopistosupportmultilingual.ItgetsthevalueoftheString
*correspondingtothevalueofWORKSPACE_DISPLAY_NMinthepropertyfile
*givenintheBUNDLE_KEY.
*/
for (var index = 0; index <this.itemList.length; index++) {
this.itemList[index].ITEM_LABEL = !canvas.isEmpty(CRB.getBundleValue(this.itemList[index].BUNDLE_KEY, this.itemList[index].WORKSPACE_DISPLAY_NM)) ? CRB.getBundleValue(this.itemList[index].BUNDLE_KEY, this.itemList[index].WORKSPACE_DISPLAY_NM) : this.itemList[index].WORKSPACE_DISPLAY_NM;
}
},
/**
*@methodgetHeaderDOM
*@memberof"canvas.applnlayout.utkarsh.landingpage"
*@descriptionThismethodisresponsibleforloadingtheuserpicture,user
*info,lastlogintimewiththetemplate(cardheader.cttpl).
*/
getLandingDOM: function() {
var componentJSON = {};
var tmpLayer = canvas.templateManager.createTemplate(
'al-landing-page.cttpl', this.itemList,canvas.util.getTemplatePath());
tmpLayer.getTemplate(this.applyTemplate, this);
},
/**
*@methodapplyTemplate
*@memberof"canvas.applnlayout.utkarsh.landingpage"
*@descriptionThismethodgetsthetemplate,appendsittotheparent
*elementandaddsclicklistenerforuserpreferencesand
*logout.
*/
applyTemplate: function(template, tmpClass) {
if (!canvas.core.isEmpty(this.parentElem)) {
$(this.parentElem).append(template); 
} 
$(this.parentElem).find('.workspaceIconBlock').on('click', function(e) {
var workspaceID = $(this).attr('data-itemid');
canvas.workspace.metadata.getWorkspaceManager().getContainer().switchWorkspace(workspaceID);
});
doIScroll('CONTENT_DIV', 'refresh');
} 
}); 
CLCR.registerCmp({
"COMPONENT": "utkarsh-sample-landing-page",
"APPLICATION_FW": "JQM"
}, canvas.applnlayout.utkarsh.landingpage);

#	Class/Method	Purpose
1	canvas.applnlayout.utkarsh.landingpage	Constructor class fetches the metadata and parent element using the API canvas.workspace.metadata.getWorkspaces() in a array this.itemList.
2	getLandingDOM	This method is responsible for loading the user profile photo, userinfo, 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.