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:
| Code Block | ||
|---|---|---|
| ||
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:
| Code Block | ||
|---|---|---|
| ||
panelPage : { |
...
enabled : true, |
...
swipeEnabled : true, |
...
component: 'utkarsh-MENUMASTER' |
Panel Page code:
| Code Block | ||
|---|---|---|
| ||
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(). |
| 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. |
...