...
| 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
*givenintheBUNDLEThis 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;
}
},
/**
*@methodgetHeaderDOM@method getHeaderDOM
*@memberof "canvas.applnlayout.landingpage"
*@descriptionThismethodisresponsibleforloadingtheuserpicture,@description This method is responsible for loading the user picture, user
*info,lastlogintimewiththetemplate last login time with the template(cardheader.cttpl).
*/
getLandingDOM: function() {
/**
*Thelistofworkspacesispassedtothetemplatefile *The list of workspaces is passed to the template file(cardmaster.cttpl)
*andmakesacallbacktoapplyTemplate *and makes a call back to applyTemplate.
*/
var tmpLayer = canvas.templateManager.createTemplate('menumaster.cttpl', this.itemList,canvas.util.getTemplatePath());
tmpLayer.getTemplate(this.applyTemplate, this);
},
/**
*@methodapplyTemplate@method applyTemplate
*@paramtemplate@param template
*@paramtmpClass@param tmpClass
*@descriptionThismethodgetsthetemplate,appendsittotheparent
*elementandaddsclicklistenertoswitchworkspaces@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); |
...