Panel Page

Panel page groups all the workspaces and displays it under one tab or button. Panel page can be displayed in any part of the screen.

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

panelPage : {
enabled : true,
swipeEnabled : true,
component: 'CARDMASTER'
},

Following are the details of the properties which are used to customize the panelPage configuration:

#	Attribute	Description	Sample Value
1	enabled	True: Renders the panel page content to the layout. False: Does not render any panel page.	true
2	swipeEnabled	True: Enables swipe feature for the panel page configuration. False: Disables the swipe feature for the panel page configuration.	true
3	component	Component is a .JS file that holds the content of the panelPage. 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 panel that displays the list of workspaces is the Panel Page.

Component code:

panelPage : {
enabled : true,
swipeEnabled : true,
component: 'utkarsh-MENUMASTER'

Panel Page code:

canvas.ns('canvas.applnlayout.utkarsh.menumaster');
canvas.applnlayout.utkarsh.menumaster = Class(canvas.core.Component, {
constructor: function(config) {
var that = this;
this.parentElem = config.parentElem;
this.appContainerEle = config.elem;
this.appContainer = config.appContainer;
this.uData = config.uData;
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.landingpage"
*@descriptionThismethodisresponsibleforloadingtheuserpicture,user
*info,lastlogintimewiththetemplate(cardheader.cttpl).
*/
getLandingDOM: function() {
/**
*Thelistofworkspacesispassedtothetemplatefile(cardmaster.cttpl)
*andmakesacallbacktoapplyTemplate.
*/
var tmpLayer = canvas.templateManager.createTemplate('menumaster.cttpl', this.itemList,canvas.util.getTemplatePath());
tmpLayer.getTemplate(this.applyTemplate, this);
},
/**
*@methodapplyTemplate
*@paramtemplate
*@paramtmpClass
*@descriptionThismethodgetsthetemplate,appendsittotheparent
*elementandaddsclicklistenertoswitchworkspaces.
*/
applyTemplate: function(template, tmpClass) {
if (!canvas.core.isEmpty(this.parentElem)) {
$(this.parentElem).append(template);
} 
//Menu Click
$(this.parentElem).find("[data-itemtype='workspaceid']").on('vclick', function(e) {
var workspaceID = $(this).attr('data-itemid');
//canvas.workspace.metadata.getWorkspaceManager().getContainer().switchWorkspace(workspaceID,null, true);
canvas.HashManager.setHash({
'WORKSPACE_ID': workspaceID 
});
canvas.lib.utility.closeHeaderPopup();
}); 
}
});
CLCR.registerCmp({
"COMPONENT": "utkarsh-MENUMASTER",
"APPLICATION_FW": "JQM"
}, canvas.applnlayout.utkarsh.menumaster);

#	Class/Method	Purpose
1	canvas.applnlayout.utkarsh.menumaster	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, 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.