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 bodyDemonstration how it works (blue and red blocks combined cells, wich must be identical).
Full controller script: at JSFiddle