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:

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);