Progress bar in dashboard list

Hi Saira,



In order to achieve this task you would need to replace couple modules:

First up, you need to create a replacing module for BootstrapModulesV2. Inside add a dependency for dashboard wrapper:

 

define("BootstrapModulesV2", ["UsrDashboardGridModuleWrapper"], function() {
	return {};
});

Wrapper will load grid module (UsrDashboardGridModule):

define("UsrDashboardGridModuleWrapper", ["BaseModule"], function() {
 
	Ext.define("Terrasoft.configuration.UsrDashboardGridModuleWrapper", {
		extend: "Terrasoft.BaseModule",
		alternateClassName: "Terrasoft.UsrDashboardGridModuleWrapper",
 
		constructor: function() {
			var parentMethod = this.getParentMethod(this, arguments);
			Terrasoft.require(["DashboardGridModule"], function() {
				Terrasoft.require(["UsrDashboardGridModule"], parentMethod, this);
			}, this);
		}
 
	});
	return Ext.create("Terrasoft.UsrDashboardGridModuleWrapper");
 
});

In grid module itself, you can configure dashboard modules to load your custom viewModel and viewConfig:

 

define("UsrDashboardGridModule", ["UsrDashboardListedGridViewModel", "UsrDashboardListedGridViewConfig"], function() {
 
	Ext.define("Terrasoft.configuration.UsrDashboardGridModule", {
		alternateClassName: "Terrasoft.UsrDashboardGridModule",
		override: "Terrasoft.DashboardGridModule",
 
		viewModelClassName: "Terrasoft.UsrDashboardListedGridViewModel",
 
		viewConfigClassName: "Terrasoft.UsrDashboardListedGridViewConfig"
 
	});
 
});

Article that describes how to add progress bar can be found here - https://community.creatio.com/questions/progress-bar



Inside viewModel you can basically add methods from previous article and inside viewConfig - add a class name for the grid (it was done in the diff section in mentioned article.



I was not able to make it work and run into a problem:

Terrasoft.ControlGrid that can add a progress bar to a column inherits from Terrasoft.Grid. And dashboard grid class is - Terrasoft.BaseViewGrid. So if you just copy an article - it will not work. You would need to create your own grid Terrasoft.UsrControlGrid which extends Terrasoft.BaseViewGrid and adds logic for adding a progress bar.



Snippets for viewConfig and viewModel:

 

define("UsrDashboardListedGridViewConfig", ["UsrControlGridModule"], function() {
	Ext.define("Terrasoft.UsrDashboardListedGridViewConfig", {
		extend: "Terrasoft.DashboardListedGridViewConfig",
 
		generate: function() {
			var config = this.callParent(arguments);
			//here you can specify className for the grid that is building.
			config.items[1].className = "Terrasoft.UsrControlGrid";
			config.items[1].controlColumnName = "QualifyStatus";
			config.items[1].applyControlConfig = { bindTo: "applyControlConfig" };
			return config;
		}
 
	});
	return {};
});

define("UsrDashboardListedGridViewModel", ["ControlGridModule"], function() {
	Ext.define("Terrasoft.UsrDashboardListedGridViewModel", {
		extend: "Terrasoft.DashboardListedGridViewModel",
 
		getGridDataColumns: function() {
			var gridDataColumns = this.callParent(arguments);
			gridDataColumns.QualifyStatus = gridDataColumns.QualifyStatus || {path: "QualifyStatus"};
			gridDataColumns.QualificationProcessId =
					gridDataColumns.QualificationProcessId || {path: "QualificationProcessId"};
			gridDataColumns["QualifyStatus.StageNumber"] =
					gridDataColumns["QualifyStatus.StageNumber"] || {path: "QualifyStatus.StageNumber"};
			return gridDataColumns;
		}
	});
	return {};
});

From what I saw inside BaseViewGrid - you would need to add a logic for building a progress bar inside InnerListedGridHtmlGenerator and specify it in the viewConfig. Inside that generator there are methods getDefaultCellHtmlConfig and getDefaultCaptionCellHtmlConfig. You can take a look into ControlGrid methods formatControlCellContent and renderCell that are building Html to help you.



Hope it helps!



Dmytro