मैंने SAPUI5 (SAP MII) में एक तालिका में विशिष्ट मूल्यों पर प्रकाश डाला

विषय विशेषज्ञों के एक बहुत ही संकीर्ण दायरे के लिए हो सकता है, लेकिन, फिर भी, मैं यह जानना चाहता था कि SAP MII प्रणाली में SAP ERP व्यावसायिक वातावरण में उद्यम व्यवसाय प्रक्रियाओं को एकीकृत करने के लिए कितने Habrovsk लोग काम कर रहे हैं, इसके अलावा, लेख उन लोगों के लिए दिलचस्प हो सकता है जो उपयोग करते हैं उनकी परियोजनाओं में, OpenUI5 ढांचे का एक खुला संस्करण।

उन्होंने एक साल पहले इस क्षेत्र में काम करना शुरू किया, उन्होंने महसूस किया कि नेटवर्क पर इतनी जानकारी नहीं है, और कार्य बहुत विविध हैं। कभी-कभी आपके सामने ऐसे कार्य आते हैं जिन्हें मानक तरीकों से हल नहीं किया जा सकता है और आपको बाहर निकलना होगा। इसलिए, मैंने अपने समाधान को गैर-मानक समस्या के लिए प्रकाशित करने का निर्णय लिया - SAPUI5 ( OpenUI5 ) के लिए एक मानक TableU ऑब्जेक्ट में विभिन्न कॉलम में असमान मूल्यों को उजागर करना। मुझे आशा है कि आप समझेंगे कि क्या चर्चा की जाएगी।
कार्य के उद्देश्य और उसके परिणाम का वर्णन करने के लिए, मैं उस परिणाम का एक उदाहरण स्क्रीनशॉट दूंगा जो मुझे मिला:
(कोशिकाओं में संयुक्त नीले और लाल ब्लॉक, उनमें मान समान होना चाहिए)



इसलिए, मैं समस्या के विस्तृत विवरण के साथ शुरुआत करूंगा और फिर इसका हल खोजने के लिए आगे बढ़ूंगा।

यह कार्य निम्नानुसार था: कॉलम (भेजे गए और पुष्टि किए गए) में मूल्यों की तुलना करने के लिए डेटाबेस से जानकारी का चयन करना आवश्यक था। मामला जब मान एक दूसरे से अलग थे - यह अंत उपयोगकर्ता के लिए सरल बनाने और समस्या रिकॉर्ड को नोट करने के लिए आवश्यक था।

सबसे पहले, एक नियंत्रक बनाया जाता है और एक मॉडल परिभाषित किया जाता है (messagesSearchResult), भविष्य में यह अनुरोध के परिणाम को संग्रहीत करेगा। हम सर्चमैसेजेज वेरिएबल में क्वेरी के लिए URL को भी परिभाषित करते हैं।

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

फिर हम एक इनिशियलाइज़ेशन फंक्शन बनाते हैं, जहाँ हम एक XML ऑब्जेक्ट (नया 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); }, 

अगला चरण, हम मुख्य फ़ंक्शन बनाते हैं, जहां हम टेबल ऑब्जेक्ट के साथ क्वेरी डेटा को "बाइंड" करते हैं और क्वेरी डेटा में हेरफेर करने के लिए फ़ंक्शन को कनेक्ट करते हैं।

  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 पर
सभी कोड में विस्तार से टिप्पणी की गई है।

मुझे उम्मीद है कि हब पर मेरा पहला लेख किसी के लिए दिलचस्प और उपयोगी होगा। स्टॉक में गैर-मानक समस्याओं के कई समाधान हैं, यदि आप इस लेख को पसंद करते हैं, तो मुझे आपके साथ दूसरों को साझा करने में खुशी होगी!

PS मैं इस लेख को पसंद करने वाले व्यक्ति के लिए विशेष आभार व्यक्त करना चाहता हूं, जिसके लिए मुझे निमंत्रण दिया गया था!

UPD: मैं बनियान उपयोगकर्ता की टिप्पणी को सही करता हूं और फ्रेमवर्क के खुले संस्करण के लिए लिंक पोस्ट करता हूं : OpenUI5

UPD: वेस्ट के अनुरोध पर , मैं संसाधित किए जा रहे XML दस्तावेज़ की संरचना का एक उदाहरण जोड़ता हूं ।

 <?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>