How to add completeness bar into custom section

Case description:

Add record completeness into custom section.

How to do it:

1. Add Completeness field into your section object. This one should be an integer.

2. Add record about your section into Completeness table. You can do it with following SQL script:

   INSERT INTO Completeness (Name, EntitySchemaName, ResultColumnName, Scale)
       VALUES ('Quotes', 'VistQuotes', 'VistCompleteness', '{"sectorsBounds":{"min":0,"middleFrom":50,"middleTo":80,"max":100}}')
   

   You should specify Name, EntitySchemaName, ResultColumnName and Scale columns.

3. Create replacing client module for your page (for example VistQuotes1Page in my case).
4. Add dependencies on following schemas: "CompletenessIndicator", "CompletenessMixin", "css!CompletenessCSSV2", "TooltipUtilities".

5. Add two attributes into "attributes" area:

   CompletenessValue: {
       dataValueType: Terrasoft.DataValueType.INTEGER,
       value: 0
   },
   MissingParametersCollection: {
       dataValueType: Terrasoft.DataValueType.COLLECTION
   }
   

    

6. Add two mixins (CompletenessMixin, TooltipUtilitiesMixin) into your schema.

   mixins: {
       CompletenessMixin: "Terrasoft.CompletenessMixin",
       TooltipUtilitiesMixin: "Terrasoft.TooltipUtilities"
   },
   

    

7. Add the following methods:

   methods: {
       init: function() {
           this.set("MissingParametersCollection", this.Ext.create("Terrasoft.BaseViewModelCollection"));
           this.callParent(arguments);
       },
       onDetailChanged: function() {
           this.callParent(arguments);
           this.calculateCompleteness();
       },
       onEntityInitialized: function() {
           this.callParent(arguments);
           if (this.isEditMode()) {
               var collection = this.get("MissingParametersCollection");
               collection.clear();
               this.set("CompletenessValue", 0);
               this.calculateCompleteness();
           }
       },
       onSaved: function() {
           var callParentOnSaved = this.get("CallParentOnSaved");
           this.callParent(arguments);
           if (!callParentOnSaved && !this.isNewMode() && !this.get("IsProcessMode")) {
               this.calculateCompleteness();
           }
       },
       calculateCompleteness: function() {
           var config = {
               recordId: this.get("Id"),
               schemaName: this.entitySchemaName
           };
           this.mixins.CompletenessMixin.getCompleteness.call(this, config, this.calculateCompletenessResponce, this);
       },
       calculateCompletenessResponce: function(completenessResponce) {
           if (this.Ext.isEmpty(completenessResponce)) {
               return;
           }
           var missingParametersCollection = completenessResponce.missingParametersCollection;
           var completeness = completenessResponce.completenessValue;
           var scale = completenessResponce.scale;
           if (!this.Ext.isEmpty(missingParametersCollection)) {
               var collection = this.get("MissingParametersCollection");
               collection.clear();
               collection.loadAll(missingParametersCollection);
           }
           if (this.Ext.isObject(scale) && this.Ext.isArray(scale.sectorsBounds)) {
               this.set("CompletenessSectorsBounds", scale.sectorsBounds);
           }
           if (this.Ext.isNumber(completeness)) {
               this.set("CompletenessValue", completeness);
           }
       }
   },
   

    

8. Insert completeness bar into your page with code like following:

   diff: /**SCHEMA_DIFF*/[
       {
           "operation": "insert",
           "parentName": "MetricsContainer",
           "propertyName": "items",
           "name": "CompletenessContainer",
           "values": {
               "itemType": Terrasoft.ViewItemType.CONTAINER,
               "items": []
           }
       },
       {
           "operation": "insert",
           "parentName": "CompletenessContainer",
           "propertyName": "items",
           "name": "CompletenessValue",
           "values": {
               "generator": "ConfigurationRectProgressBarGenerator.generateProgressBar",
               "controlConfig": {
                   "value": {
                       "bindTo": "CompletenessValue"
                   },
                   "menu": {
                       "items": {
                           "bindTo": "MissingParametersCollection"
                       }
                   },
                   "sectorsBounds": {
                       "bindTo": "CompletenessSectorsBounds"
                   }
               },
               "tips": [],
               "layout": {
                   "column": 0,
                   "row": 0,
                   "rowSpan": 1,
                   "colSpan": 1
               }
           }
       },
       {
           "operation": "insert",
           "parentName": "CompletenessValue",
           "propertyName": "tips",
           "name": "CompletenessTip",
           "values": {
               "content": {"bindTo": "Resources.Strings.CompletenessHint"}
           }
       }
   ]/**SCHEMA_DIFF*/
   

   Full example code you can find below:

define("VistQuotes1Page", ["CompletenessIndicator", "CompletenessMixin", "css!CompletenessCSSV2", "TooltipUtilities"],
    function() {
    return {
        entitySchemaName: "VistQuotes",
        attributes: {
            CompletenessValue: {
                dataValueType: Terrasoft.DataValueType.INTEGER,
                value: 0
            },
            MissingParametersCollection: {
                dataValueType: Terrasoft.DataValueType.COLLECTION
            }
        },
        modules: /**SCHEMA_MODULES*/{}/**SCHEMA_MODULES*/,
        details: /**SCHEMA_DETAILS*/{}/**SCHEMA_DETAILS*/,
        businessRules: /**SCHEMA_BUSINESS_RULES*/{}/**SCHEMA_BUSINESS_RULES*/,
        methods: {
            init: function() {
                this.set("MissingParametersCollection", this.Ext.create("Terrasoft.BaseViewModelCollection"));
                this.callParent(arguments);
            },
            onDetailChanged: function() {
                this.callParent(arguments);
                this.calculateCompleteness();
            },
            onEntityInitialized: function() {
                this.callParent(arguments);
                if (this.isEditMode()) {
                    var collection = this.get("MissingParametersCollection");
                    collection.clear();
                    this.set("CompletenessValue", 0);
                    this.calculateCompleteness();
                }
            },
            onSaved: function() {
                var callParentOnSaved = this.get("CallParentOnSaved");
                this.callParent(arguments);
                if (!callParentOnSaved && !this.isNewMode() && !this.get("IsProcessMode")) {
                    this.calculateCompleteness();
                }
            },
            calculateCompleteness: function() {
                var config = {
                    recordId: this.get("Id"),
                    schemaName: this.entitySchemaName
                };
                this.mixins.CompletenessMixin.getCompleteness.call(this, config, this.calculateCompletenessResponce, this);
            },
            calculateCompletenessResponce: function(completenessResponce) {
                if (this.Ext.isEmpty(completenessResponce)) {
                    return;
                }
                var missingParametersCollection = completenessResponce.missingParametersCollection;
                var completeness = completenessResponce.completenessValue;
                var scale = completenessResponce.scale;
                if (!this.Ext.isEmpty(missingParametersCollection)) {
                    var collection = this.get("MissingParametersCollection");
                    collection.clear();
                    collection.loadAll(missingParametersCollection);
                }
                if (this.Ext.isObject(scale) && this.Ext.isArray(scale.sectorsBounds)) {
                    this.set("CompletenessSectorsBounds", scale.sectorsBounds);
                }
                if (this.Ext.isNumber(completeness)) {
                    this.set("CompletenessValue", completeness);
                }
            }
        },
        mixins: {
            CompletenessMixin: "Terrasoft.CompletenessMixin",
            TooltipUtilitiesMixin: "Terrasoft.TooltipUtilities"
        },
        dataModels: /**SCHEMA_DATA_MODELS*/{}/**SCHEMA_DATA_MODELS*/,
        diff: /**SCHEMA_DIFF*/[
            {
                "operation": "insert",
                "parentName": "MetricsContainer",
                "propertyName": "items",
                "name": "CompletenessContainer",
                "values": {
                    "itemType": Terrasoft.ViewItemType.CONTAINER,
                    "items": []
                }
            },
            {
                "operation": "insert",
                "parentName": "CompletenessContainer",
                "propertyName": "items",
                "name": "CompletenessValue",
                "values": {
                    "generator": "ConfigurationRectProgressBarGenerator.generateProgressBar",
                    "controlConfig": {
                        "value": {
                            "bindTo": "CompletenessValue"
                        },
                        "menu": {
                            "items": {
                                "bindTo": "MissingParametersCollection"
                            }
                        },
                        "sectorsBounds": {
                            "bindTo": "CompletenessSectorsBounds"
                        }
                    },
                    "tips": [],
                    "layout": {
                        "column": 0,
                        "row": 0,
                        "rowSpan": 1,
                        "colSpan": 1
                    }
                }
            },
            {
                "operation": "insert",
                "parentName": "CompletenessValue",
                "propertyName": "tips",
                "name": "CompletenessTip",
                "values": {
                    "content": {"bindTo": "Resources.Strings.CompletenessHint"}
                }
            },
            {
                "operation": "insert",
                "name": "VistStatusa33f682a-dd58-4739-919d-cb84b9d2fc70",
                "values": {
                    "layout": {
                        "colSpan": 12,
                        "rowSpan": 1,
                        "column": 12,
                        "row": 10,
                        "layoutName": "Header"
                    },
                    "bindTo": "VistStatus",
                    "enabled": true
                },
                "parentName": "Header",
                "propertyName": "items",
                "index": 46
            }
        ]/**SCHEMA_DIFF*/
    };
});