Panel Page
- Vaishnavi Sridhar (Unlicensed)
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. | true |
| 2 | swipeEnabled | True: Enables 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. | 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();
/**
*This loop is to support multilingual. It gets the value of the String
*corresponding to the value of WORKSPACE_DISPLAY_NM in the property file
*given in the BUNDLE_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;
}
},
/**
*@method getHeaderDOM
*@memberof "canvas.applnlayout.landingpage"
*@description This method is responsible for loading the user picture, user
*info, last login time with the template(cardheader.cttpl).
*/
getLandingDOM: function() {
/**
*The list of workspaces is passed to the template file(cardmaster.cttpl)
*and makes a call back to applyTemplate.
*/
var tmpLayer = canvas.templateManager.createTemplate('menumaster.cttpl', this.itemList,canvas.util.getTemplatePath());
tmpLayer.getTemplate(this.applyTemplate, this);
},
/**
*@method applyTemplate
*@param template
*@param tmpClass
*@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);
}
//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(). |
| 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. |