How can I add a button in the Communication Panel?

Question

How can I add a button in the Communication Panel?

Answer

1. Replace the "CommunicationPanel" module, where the new button will be described.

define("CommunicationPanel", ["terrasoft", "CommunicationPanelHelper"],
	function(Terrasoft, CommunicationPanelHelper) {
		return {
			messages: {
				"SelectCommunicationPanelItem": {
					"mode": Terrasoft.MessageMode.PTP,
					"direction": Terrasoft.MessageDirectionType.SUBSCRIBE
				}
			},
			attributes: {
				"UsrMyMenuActive": {
					"dataValueType": Terrasoft.DataValueType.BOOLEAN,
					"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
					"value": false
				},
				"UsrMyMenuCounter": {
					"dataValueType": Terrasoft.DataValueType.TEXT,
					"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
					"value": ""
				},
				"UsrMyMenuVisible": {
					"dataValueType": Terrasoft.DataValueType.BOOLEAN,
					"type": Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
					"value": true
				}
			},
			methods: {
				getPanelItemConfig: function(moduleName) {
					var config = this.callParent(arguments);
					if (moduleName !== "UsrMyMenuModule") {
						return config;
					}
					return Ext.apply(config, {
						keepAlive: false
					});
				},
				selectItem: function(config) {
					this.set("SelectedMenuItem", config.selectedItem);
				},
				getUsrMyMenuImageConfig: function(itemTag) {
					return this.get("Resources.Images.VisaMenuIcon");
				},
				getUsrMyMenuCaption: function(itemTag) {
					return "test";
				}
			},
			diff: [
				{
					"operation": "insert",
					"index": 0,
					"parentName": "communicationPanelContent",
					"propertyName": "items",
					"name": "usrMyMenu",
					"values": {
						"tag": "UsrMyMenu",
						"visible": {"bindTo": "UsrMyMenuVisible"},
						"imageConfig": {"bindTo": "getUsrMyMenuImageConfig"},
						"caption": {"bindTo": "getUsrMyMenuCaption"},
						"generator": "CommunicationPanelHelper.generateMenuItem"
					}
				}
			]
		};
	});

2. Create the panel module. The module should contain required messages, as in ESNFeedModule:

RerenderModule – subscription, address.

InitModuleViewModel – subscription, address.

	Ext.define("Terrasoft.configuration.UsrMyMenuModule", {
 
		extend: "Terrasoft.BaseSchemaModule",
		alternateClassName: "Terrasoft.UsrMyMenuModule",
 
		generateViewContainerId: false,
 
		initSchemaName: function() {
			this.schemaName = "UsrMyMenu";
		},
 
		initHistoryState: Terrasoft.emptyFn,
 
		init: function() {
			this.callParent(arguments);
			this.initMessages();
		},
 
		initMessages: function() {
			this.sandbox.subscribe("RerenderModule", function(config) {
				if (this.viewModel) {
					this.render(this.Ext.get(config.renderTo));
					return true;
				}
			}, this, [this.sandbox.id]);
		},
 
		createViewModel: function() {
			var viewModel = this.callParent(arguments);
			return viewModel;
		}
 
	});
	return Terrasoft.UsrMyMenuModule;
});

3. Create the page view schema

define("UsrMyMenu", [], function() {
		return {
			mixins: {
			},
			messages: {
			},
			attributes: {
			},
			methods: {
				init: function(callback, scope) {
					this.callParent([function() {
						callback.call(scope);
					}, this]);
				},
				onTestClick: function() {
					alert(1);
				}
			},
			diff: [
				//MyMenu
				{
					"operation": "insert",
					"name": "MyMenu",
					"propertyName": "items",
					"values": {
						"generateId": false,
						"itemType": Terrasoft.ViewItemType.CONTAINER,
						"items": []
					}
				},
				//ShowNewMessagesButton
				{
					"operation": "insert",
					"name": "ShowNewMessagesButton",
					"parentName": "MyMenu",
					"propertyName": "items",
					"values": {
						"generateId": false,
						"itemType": Terrasoft.ViewItemType.BUTTON,
						"caption": "Test!",
						"click": {bindTo: "onTestClick"}
					}
				}
			]
		};
	});