Creating a widget

Case

I need to create a widget

Solution

You can use widgets to display data from in-built modules. It enables displaying data in non-standard views.

Example of implementing a widget:

define('SxClientUnitTable', ['ext-base', 'terrasoft', 'sandbox', "BaseFiltersGenerateModule", 'SxClientUnitTableResources', "ChartModuleHelper", "css!SxClientUnitTableCss", "ServiceHelper"],
	function(Ext, Terrasoft, sandbox, BaseFiltersGenerateModule, resources, ChartModuleHelper, css, ServiceHelper, ConfigurationConstants) {
 
		function getViewModel() {
					return Ext.create('Terrasoft.BaseViewModel', {
				//todo SysModuleAnalyticsChart deleted
						entitySchema: 'Order',
						methods: {
							getChart: function(key) {
							debugger
								sandbox.publish('GenerateChart', key);
								var filters = this.getReportFilters();
							},
							load: function() {
 
							}
						}
					});
				};
		var result = "";
		function generateMainView(renderTo) {
 
			var resultConfig = Ext.create('Terrasoft.Container', {
				id: 'tableOtchetMetkiParamContainer',
				selectors: {
					wrapEl: '#tableOtchetMetkiParamContainer'
				},
				renderTo: renderTo
			});
			return resultConfig;
		}
		function getInfoMetki(parameters) {
 
			var serviceData = {
				site: parameters[0].toString(),
				ownerId: parameters[1].toString(),
				startDate: parameters[2].toString(),
				dueDate: parameters[3].toString(),
				countryId: parameters[4].toString()
			};
 
			ServiceHelper.callService("UsrOtchetMetkiGetCollectionConfigurationService", "GetCollectionOtchetMetki",
				function (response) {
				debugger
					if (response.status == 404) {
						this.showInformationDialog("\t Error: \n" + response.message);
					}
					else if(response.GetCollectionOtchetMetkiResult.length > 0){
						result = response.GetCollectionOtchetMetkiResult;
						var arrR = result.split(":");
						var htmlAdded = "<table><tr><th>Mark</th><th>Number of orders</th><th>Being specified</th><th>% Specified.</th><th>Confirmed</th><th>% Conf.</th><th>Completed</th><th>% Compl.</th><th>Canceled</th><th>% Canc.</th></tr>";
						for(var i = 0; i < arrR.length - 1; i++){
							//get items
							var strArr = arrR[i].split(" ");
							var metkaOne = strArr[0].replace("{","");
							var metka = metkaOne.replace("}","");
 
							htmlAdded += "<tr><td>" + metka + "</td><td>" + strArr[1].toString() + "</td><td>"  + strArr[2].toString() + "</td><td>" + strArr[3].toString() + "</td><td>" + strArr[4].toString() + "</td><td>" + strArr[5].toString() + "</td><td>" + strArr[6].toString() + "</td><td>" + strArr[7].toString() + "</td><td>"  + strArr[8].toString() + "</td><td>" + strArr[9].toString() + "</td></tr>";
						}
						//end table
						htmlAdded += "</table>";
						var el = Ext.get('tableOtchetMetkiParamContainer').setHTML(htmlAdded);
						var elemV = Ext.get('Module1');
						elemV.toggleCls('my-table');
					}
					else
						result = null;
				}, serviceData, this);
		}
		function getReplaceString(str, separator){
		debugger
		var arSt = str.split(separator);
			var res = arSt[2] + separator + arSt[1] + separator + arSt[0];
			while(res.indexOf(separator) > 0){
				res = res.replace(separator,"-");
			}
			return res;
		}
 
		var render = function(renderTo) {
 
 
			debugger
			var viewConfig = generateMainView(renderTo);
			var viewModel = getViewModel();
			var getStartD = Ext.get("fixedFilterDateView-wrap").dom.innerText;
			var getEndD = Ext.get("fixedFilterDateDueView-wrap").dom.innerText;
 
			var startD = getStartD.indexOf("Начало") > 0 ? "2016-05-01" : getReplaceString(getStartD, ".");
			var endD = getEndD.indexOf("Завершение") > 0 ? "2016-07-04" : getReplaceString(getEndD, ".");
			var ar = [];
			ar.push("all");
			ar.push("all");
			ar.push(startD);
			ar.push(endD);
			ar.push("a570b005-e8bb-df11-b00f-001d60e938c6");
			getInfoMetki(ar);
 
 
			viewConfig.bind(viewModel);
			//viewConfig.render(renderTo);
		};
		return {
			schema: 'Order',
			methods: {
				onLookupChange: function(newValue, columnName) {
 
                                this.callParent(arguments);
                                if (columnName === "UsrCityFilter") {
                                        this.set("UsrCityFilter", newValue);
                                        this.onUsrCityFilterChanged();
                                }
                        },
 
                        onUsrCityFilterChanged: function() {
                                this.reloadGridData();
                        },
				getOrdersForFilter: function(){
					var items = [];
					var selOrders = Ext.create("Terrasoft.EntitySchemaQuery", {
						rootSchemaName: "Order"
					});
					selOrders.addColumn("SxMark.Name");
					selOrders.addColumn("SxCountry.Name");
					var filterByUser = Terrasoft.createColumnFilterWithParameter(
					Terrasoft.ComparisonType.EQUAL, "SxCountry.Name", "Россия");
					selOrders.filters.addItem(filterByUser);
					selOrders.getEntityCollection(function (response) {
					debugger
						if (response.collection.collection.length > 0)
							items = result.collection.getItems();
						else
							items = null;
					}, this);
					return items;
				}
 
			},
			userCode: function() {
 
			},
			init: function() {
 
			},
			filterChanged: function( filter, eOpts ){
				debugger
				var c = [];
			},
			render: render
		};
	}
)
;