Change background color of activity

Case description:

We want to change color of activity on ActivitySection.

Algorithm of realization:

1. You should create client replacing module for "ActivitySectionV2" from NUI package.
2. Add to this module three methods:

   1.  getGridDataColumns - this method configures which fields we will get from DB for each activity;

      getGridDataColumns: function() {
          var baseGridDataColumns = this.callParent(arguments);
          var gridDataColumns = {
              "Account": {path: "Account"},
              "StartDate": {path: "StartDate"},
              "DueDate": {path: "DueDate"},
              "ShowInScheduler": {path: "ShowInScheduler"},
              "Status": {path: "Status"},
              //Added by me, because in base implementation this method doesn't get this field
              "Result": {path: "Result"},
              "Status.Finish": {path: "Status.Finish"},
              "ProcessElementId": {
                  path: "ProcessElementId",
                  dataValueType: 0
              }
          };
          return Ext.apply(baseGridDataColumns, gridDataColumns);
      },
      

       

   2. prepareResponseCollection and setColor - this methods set background color for activities;

      prepareResponseCollection: function(collection) {
          var notStartedId = ConfigurationConstants.Activity.Status.NotStarted;
          var inProgressId = ConfigurationConstants.Activity.Status.InProgress;
          var finishedId   = ConfigurationConstants.Activity.Status.Done;
          var canceledId   = ConfigurationConstants.Activity.Status.Cancel;
       
          this.callParent(arguments);
       
          collection.each(function(item) {
              var status = item.get("Status").value;
              if (status === notStartedId.toLowerCase()) {
                  this.setColor(item, "#42f4dc");
              } else if (status === inProgressId.toLowerCase()) {
                  this.setColor(item, "#4168f4");
              } else if (status === finishedId.toLowerCase()) {
                  this.setColor(item, "#88f441");
              } else if (status === canceledId.toLowerCase()) {
                  this.setColor(item, "#f441af");
              }
          }, this);
      },
      setColor: function(item, color) {
          //Items in register
          item.customStyle = {
              background: color,
          };
          //Items on calendar view
          item.set("Background", color);
      }
      

       

3. In this case we change color depend on activity status, but you can use another field. For example - Result. You can get Result id of item by call item.get("Result").value. IMPORTANT! You must add this field to getGridDataColumns method. Identificators of default activity results you can get by next query

   SELECT Name, Id FROM ActivityResult

   to your bpm'online DB.

4. This code can work for ActivityDetail too. Algorithm of realization is same.
5. If you want you can store your color settings in Lookup.
   1. Create lookup which will looks like this:
      
      Figure 0.
      
      

   2. Add method which will get them from DB

      init: function() {
          this.callParent(arguments);
          this.getColorsFromLookup();
      },
      getColorsFromLookup: function() {
          var colors = {};
          var esq = Ext.create("Terrasoft.EntitySchemaQuery", {
              rootSchemaName: "GlbActivityColor"
          });
          esq.addColumn("Name");
          esq.addColumn("GlbCode");
          esq.getEntityCollection(function (result) {
              if (!result.success) {
                  return;
              }
              result.collection.each(function (item) {
                  colors[item.get("Name")] = item.get("GlbCode");
              });
              this.set("Colors", colors);
              debugger;
          }, this);
      }
      

       

   3. Add attribute which will store colors at front-end

      attributes: {
          Colors: {
              dataValueType: this.Terrasoft.DataValueType.CUSTOM_OBJECT
          },
      },
      

       

   4. Fix prepareResponseCollection method for using colors from our attribute

      prepareResponseCollection: function(collection) {
          var notStartedId = ConfigurationConstants.Activity.Status.NotStarted;
          var inProgressId = ConfigurationConstants.Activity.Status.InProgress;
          var finishedId   = ConfigurationConstants.Activity.Status.Done;
          var canceledId   = ConfigurationConstants.Activity.Status.Cancel;
       
          this.callParent(arguments);
       
          collection.each(function(item) {
              var status = item.get("Status").value;
              if (status === notStartedId.toLowerCase()) {
                  this.setColor(item, this.get("Colors")["notStarted"]);
              } else if (status === inProgressId.toLowerCase()) {
                  this.setColor(item, this.get("Colors")["inProgress"]);
              } else if (status === finishedId.toLowerCase()) {
                  this.setColor(item, this.get("Colors")["finished"]);
              } else if (status === canceledId.toLowerCase()) {
                  this.setColor(item, this.get("Colors")["canceled"]);
              }
          }, this);
      },