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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
8 | |
8 | |
7 | |
6 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |