How did I highlight specific values in a table in SAPUI5 (SAP MII)
The topic is probably for a very narrow circle of specialists, but, nevertheless, I wanted to find out how many habrovchan people are working on integrating the business processes of enterprises into the SAP ERP business environment in the SAP MII system, in addition, the article may be interesting for those who use in their projects, an open version of the framework OpenUI5 .
He started working in this area a year ago, he realized that there is not so much information on the network, and the tasks are very diverse. Sometimes you encounter tasks that cannot be solved by standard approaches and you have to get out. Here, I decided to publish my solution to a non-standard task - highlighting non-equal values in different columns in the standard Table object for SAPUI5 ( OpenUI5 ). I hope you understand what will be discussed.
To illustrate the purpose of the task and its result, I will give for example a screenshot of the result that I got:
(blue and red blocks are combined into cells, the values in them must be identical)
So, I’ll start with an extended description of the problem and then proceed to find its solution.
')
The task was as follows: it was necessary to select information from the database to compare the values in the columns (sent and confirmed). The case when the values were different from each other - it was necessary to simplify for the end user and mark problem records.
To begin with, a controller is created and a model (messagesSearchResult) is defined, in the future it will store the result of the request. We also define the URL for the query in the searchMessages variable.
Then we create an initialization function, where we create an XML object (new sap.ui.model.xml.XMLModel ()) and enable the functions to process the start, end, and query error.
The next step is to create the main function, where we “bind” the request data with the Table object and enable the function to manipulate the request data.
Finally, a function for working with data, as well as highlighting cells with “problem” data.
At the end, we define the functions for processing the start, end, and error of the request.
Ready script controller: on JSFiddle
All code is commented in detail.
I hope that my first article on Habré will be interesting and useful to someone. There are many solutions to non-standard problems in stock, if you like this article, I will be happy to share with you others!
PS I want to express a special thanks to the person who liked this article, for which I was issued an invitation!
UPD: I correct the remark of the user Vest and post a link to the open version of the framework: OpenUI5
UPD: At the request of Vest, I add an example of the structure of the XML document that is being processed.
He started working in this area a year ago, he realized that there is not so much information on the network, and the tasks are very diverse. Sometimes you encounter tasks that cannot be solved by standard approaches and you have to get out. Here, I decided to publish my solution to a non-standard task - highlighting non-equal values in different columns in the standard Table object for SAPUI5 ( OpenUI5 ). I hope you understand what will be discussed.
To illustrate the purpose of the task and its result, I will give for example a screenshot of the result that I got:
(blue and red blocks are combined into cells, the values in them must be identical)
So, I’ll start with an extended description of the problem and then proceed to find its solution.
')
The task was as follows: it was necessary to select information from the database to compare the values in the columns (sent and confirmed). The case when the values were different from each other - it was necessary to simplify for the end user and mark problem records.
To begin with, a controller is created and a model (messagesSearchResult) is defined, in the future it will store the result of the request. We also define the URL for the query in the searchMessages variable.
sap.ui.controller("controller_name.page", { models: { messagesSearchResult: null }, urls: { searchMessages: "/XMII/Illuminator?QueryTemplate=PATH/TO/query&Content-Type=text/xml" }, Then we create an initialization function, where we create an XML object (new sap.ui.model.xml.XMLModel ()) and enable the functions to process the start, end, and query error.
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); },
The next step is to create the main function, where we “bind” the request data with the Table object and enable the function to manipulate the 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, a function for working with data, as well as highlighting cells with “problem” data.
_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, we define the functions for processing the start, end, and error of the 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
Ready script controller: on JSFiddle
All code is commented in detail.
I hope that my first article on Habré will be interesting and useful to someone. There are many solutions to non-standard problems in stock, if you like this article, I will be happy to share with you others!
PS I want to express a special thanks to the person who liked this article, for which I was issued an invitation!
UPD: I correct the remark of the user Vest and post a link to the open version of the framework: OpenUI5
UPD: At the request of Vest, I add an example of the structure of the XML document that is being processed.
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <Rowsets> <Rowset> <Row> <NPP>1</NPP> <SYS_ID>1</SYS_ID> <DATE_OF_POST>14-03-2014</DATE_OF_POST> <SMENA>1</SMENA> <KOD>10000000001</KOD> <DESCR></DESCR> <SOURCE_ID>200</SOURCE_ID> <TARGET_ID>300</TARGET_ID> <PROC_ID>8</PROC_ID> <CONF_Q>1131.12</CONF_Q> <CONF_REC>22</CONF_REC> <SENT_Q>1131.12</SENT_Q> <SENT_REC>22</SENT_REC> </Row> </Rowset> </Rowsets> Source: https://habr.com/ru/post/216383/
All Articles