How I highlighted specific values ​​in a table in SAPUI5 (SAP MII)

The topic may be for a very narrow circle of specialists, but, nevertheless, I wanted to know how many Habrovsk people are working on integrating enterprise business processes into the SAP ERP business environment in the SAP MII system, in addition, the article may be interesting for those who use in their projects, an open version of the OpenUI5 framework .

He started working in this field a year ago, he realized that there is not so much information on the network, and the tasks are very diverse. Sometimes you come across tasks that cannot be solved with standard approaches and you have to get out. So, I decided to publish my solution to a non-standard problem - highlighting unequal values ​​in different columns in a standard TableU object for SAPUI5 ( OpenUI5 ). I hope you understand what will be discussed.
To illustrate the purpose of the task and its result, I will give an example screenshot of the result that I got:
(blue and red blocks combined into cells, the values ​​in them must be identical)



So, I will start with an extended description of the problem and then go on to find its solution.

The task was as follows: it was necessary to select information from the database to compare the values ​​in the columns (sent and confirmed). The case when the values ​​were different from each other - it was necessary to simplify for the end user and note the problem records.
  
First, a controller is created and a model is defined (messagesSearchResult), in the future it will store the query result. We also define the URL for the query in the searchMessages variable.

sap.ui.controller("controller_name.page", {  
    models: {  
        messagesSearchResult: null  
    },  
    urls: {  
        searchMessages: "/XMII/Illuminator?QueryTemplate=PATH/TO/query&Content-Type=text/xml"  
    },  

Then we create an initialization function, where we create an XML object (new sap.ui.model.xml.XMLModel ()) and connect functions to handle the start, end, and error of the request.

    onInit: function() {  
      this.models.messagesSearchResult = new sap.ui.model.xml.XMLModel();  
      this.models.messagesSearchResult.attachRequestCompleted(this._dataLoadingFinished)  
      this.models.messagesSearchResult.attachRequestFailed(this._dataLoadingFinished)  
      this.models.messagesSearchResult.attachRequestSent(thisLoadingStarted);  
    }, 

The next step, we create the main function, where we “bind” the query data with the Table object and connect the function for manipulating the query data.

    searchMessages: function() {  
      var t = this.byId('searchResultTbl'); // get Table element from page  
      t.setModel(this.models.messagesSearchResult); // connect XML-model to Table element at page  
// aggregation binding data from XML-path (/Rowset/Row) to Table rows  
// and manipulation with data by function _addTableRows(this.models.messagesSearchResult).  
// At the end, loading data from query by url. (this.models.messagesSearchResult.loadData())  
      t.bindAggregation("rows",  
      {  
          path: "/Rowset/Row",  
          factory: $.proxy(this._addTableRows(this.models.messagesSearchResult), this)  
      });  
      this.models.messagesSearchResult.loadData(this.urls.searchMessages, {}}, false, "POST");  
    },  

Finally, a function for working with data, as well as highlighting cells with "problem" data.

    _addTableRows: function (oContext) {  
      var _this = this; // save handler _this to controller  
      var backgroundColor = '#fcdd82'; // define background-color for "problem" cells  
      var ConfRecColumn, SentRecColumn;  
      var TMP_REC;  
      // Compare this field with next.  
      // Bind property (CONF_REC) from XML-model to new TextField value and save it to temporary variable (TMP_REC).  
      // By jQuery set attribute readonly to true ($('#' +  this.getId()).attr("readonly", true)).  
      // Set this TextField not editable (this.setEditable(false)).  
      var ConfRecColor = new sap.ui.commons.TextField().bindProperty("value", "CONF_REC", function(cellValue){  
        $('#' +  this.getId()).attr("readonly", true);  
        this.setEditable(false);  
        _this.TMP_REC = cellValue;  
        return cellValue;  
      });  
      // Compare this field with previous and highlight if doesn't match.  
      // Bind property (SENT_REC) from XML-model to new TextField value and compare it with temporary variable (TMP_REC).  
      // By jQuery set background-color if doesn't match ($('#' +  this.getId()).parent().parent().css("background-color", backgroundColor)).  
      // Or remove by jQuery attribute style if previous and this values is match ($('#' +  this.getId()).parent().parent().removeAttr('style')).  
      // By jQuery set attribute readonly to true ($('#' +  this.getId()).attr("readonly", true)).  
      // Set this TextField not editable (this.setEditable(false)).  
      var SentRecColor = new sap.ui.commons.TextField().bindProperty("value", "SENT_REC", function(cellValue){  
        if(cellValue != _this.TMP_REC)  
        {  
          $('#' +  this.getId()).parent().parent().css("background-color", backgroundColor);  
        }  
        else  
        {  
          $('#' +  this.getId()).parent().parent().removeAttr('style');  
        }  
        $('#' +  this.getId()).attr("readonly", true);  
        this.setEditable(false);  
        return cellValue;  
      });  
      this.byId('searchResultTbl').getColumns()[11].setTemplate(ConfRecColor); // set template, which we prepare above ConfRecColor  
      this.byId('searchResultTbl').getColumns()[12].setTemplate(SentRecColor); // set template, which we prepare above SentRecColor  
    },  

At the end, we define functions for processing the start, end, and error of the request.

    _dataLoadingStarted: function() {  
      sap.ui.core.BusyIndicator.show();  
    },  
    _dataLoadingFinished: function(oEvent) {  
      sap.ui.core.BusyIndicator.hide();  
      if (oEvent.getId() == "requestFailed") {  
        sap.ui.commons.MessageBox.alert(oEvent.getParameter('message'));  
      }  
    }  
}); // close controller body  

Ready-made controller script: on JSFiddle.
All code is commented in detail.

I hope that my first article on the hub will be interesting and useful to someone. In stock there are many solutions to non-standard problems, if you like this article, I will be glad to share others with you!

PS I want to express special thanks to the person who liked this article, for which I was issued an invitation!

UPD: I correct the remark of the Vest user and post a link to the open version of the framework: OpenUI5

UPD: At the request of Vest, I add an example of the structure of the XML document that is being processed.

1114-03-2014110000000001Описание20030081131.12221131.1222