Как я сделал подсветку конкретных значений в таблице в SAPUI5 (SAP MII)

Тема, возможно, для очень узкого круга специалистов, но, все же, хотелось узнать как много работают над интеграцией бизнес-процессов предприятий в бизнес-среду SAP ERP в системе SAP MII.

Сам начал работать в данной сфере год назад, понял, что информации в сети не так уж много, а задачи встречаются очень разнообразные. Порой сталкиваешься с задачами, которые стандартными подходами не решить и приходится выкручиваться. Вот, решил опубликовать свое решение не стандартной задачи — подсветка не равных значений в разных столбцах в стандартном для SAPUI5 объекте Table. Надеюсь вы поняли о чем пойдет речь.
Для иллюстрации цели задачи и ее результата приведу для примера скриншот результата, который у меня получился:
(синие и красные блоки объединенные в клетки, значения в них должны быть идентичными)

Итак, начну с расширенного описания проблемы и затем перейдем к поиску её решения.

Задача была следующей: надо было выбрать информацию из базы данных для сравнения значений в столбцах (отправленных и подтвержденных). Случай, когда значения были отличны друг от друга — необходимо было упростить для конечного пользователя и отметить проблемные записи.
  
Для начала создается контроллер и определяется модель (messagesSearchResult), в дальнейшем она будет хранить результат запроса. Также определяем URL для запроса в переменной searchMessages.

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

Затем создаем функцию инициализации, где создаем XML-объект (new sap.ui.model.xml.XMLModel ()) и подключаем функции для обработки начала, завершения и ошибки запроса.

    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);  
    }, 

Следующий шаг, создаем основную функцию, где «биндим» данные запроса с объектом Table и подключаем функцию для манипуляций с данными запроса.

    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");  
    },  

Наконец, функция для работы с данными, а также подсветки ячеек с «проблемными» данными.

    _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  
    },  

В конце определяем функции для обработки начала, завершения и ошибки запроса.

    _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  

Готовый скрипт контроллера: на JSFiddle
Весь код подробно прокомментирован.

Надеюсь, что моя первая статья на хабре будет интересной и полезной кому-то. В запасе есть много решений не стандартных проблем, если понравится эта статья, буду рад поделиться с вами другими!

P.S. Хочу выразить отдельную благодарность человеку, которому понравилась эта статья, за которую мне было выдано приглашение!

Автор: KirillLevitskiy

Источник