Как я сделал подсветку конкретных значений в таблице в 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. Хочу выразить отдельную благодарность человеку, которому понравилась эта статья, за которую мне было выдано приглашение!