How I made highlight of specific values in Table

[former_member188297]

The challenge was as follows: it was necessary to select from the database information to compare the values ​​in the columns (sent and confirmed) in the case where the values ​​were different from each other - it was necessary to simplify to highlight search problematic records.

For a start create controller and define model (messagesSearchResult) to save result of query. Also define url to query (searchMessages).

sap.ui.controller("controller_name.page", {

    models: {

        messagesSearchResult: null

    },

    urls: {

        searchMessages: "/XMII/Illuminator?QueryTemplate=PATH/TO/query&Content-Type=text/xml"

    },

Then create init-function, where create XML-object (new sap.ui.model.xml.XMLModel()) and connect functions for started, completed and failed 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);

    },

Next step, create main function where binding request data with Table control and connect function to manipulation with request 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, function to manipulate data and highlight 'problem" cells.

    _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 define functions for started, completed and failed 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

Demonstration how it works (blue and red blocks combined cells, wich must be identical).

Full controller script: at JSFiddle