Dummies भाग 4 के लिए SAPUI5: एक संपूर्ण चरण-दर-चरण व्यायाम

परिचय और पुनर्कथन

पिछले ब्लॉग पोस्ट में , हमने सीखा कि कैसे अपने मौजूदा एप्लिकेशन को मास्टर-डिटेल ऐप में बिजनेस पार्टनर को एक सूची (मास्टर) के रूप में प्रदर्शित किया जाए और इसकी विस्तार से जानकारी पेज (डिटेल) के अंदर बिक्री आदेश के साथ दी जाए।

इस कवायद में क्या शामिल होगा

ब्लॉग पोस्टों की इस श्रृंखला के भाग 4 के साथ, हम सीखेंगे कि सेल ऑर्डर विवरण के बारे में जानकारी के साथ एक दूसरा ड्रिल-डाउन पेज कैसे बनाया जाए और सेल ऑर्डर आइटमों की तालिका प्रदर्शित करें।

इस अभ्यास का सबसे महत्वपूर्ण हिस्सा यह समझना है कि बिक्री आदेश का बिक्री आदेश (डिलीट सीआरयूडी ऑपरेशन का हिस्सा) कैसे किया जाए।

• ODataModel : हमने पहले ही इसका उपयोग अपने बिजनेस पार्टनर, ऑर्डर सेल के बारे में सर्वर-साइड जानकारी प्रदर्शित करने के लिए किया है। अब हम इसका उपयोग बिक्री आदेश आइटम प्रदर्शित करने और उन्हें सेट से हटाने के लिए करने जा रहे हैं। इस उद्देश्य के लिए, हम हटाने की विधि का उपयोग करने जा रहे हैं

इस अभ्यास में यह हमारा मुख्य कार्य है लेकिन यह केवल एक चीज नहीं है जो हमने कोड में की है। यहां उन चीजों की एक सूची दी गई है जिन्हें आपको अंतिम परिणाम प्राप्त करने के लिए करना है:

• BusinessPartnerSeleOrderItem पेज पर नेविगेट करने के लिए एक नया मार्ग जोड़ें और मैनिफ़ेस्ट में लक्ष्य करें
• बिक्री आदेश पर क्लिक करें घटना को सुनें और SaleOrder विवरण पर नेविगेट करें (जहां हम बिक्री आदेश विवरण और बिक्री आदेश आइटम प्रदर्शित करेंगे)
• विक्रय आदेश आइटम तालिका को फ़िल्टर करने के लिए FilterBar जोड़ें
• सेल ऑर्डर ऑर्डर आइटम को सॉर्ट करने के लिए एक ViewSettingsDialog जोड़ें
• तालिका की पंक्तियों में उत्पाद जानकारी प्रदर्शित करने के लिए एक SaleOrderItem इकाई के उत्पाद नेविगेशन संपत्ति का विस्तार करें

NB: जब मुझे फ़िल्टर, सॉर्ट और समूह आइटम की आवश्यकता होती है, तो मुझे SaleOrderItemsSet पर बहुत समस्या का सामना करना पड़ता है। आपको हमेशा यह जानना होगा कि कौन से फ़ील्ड सक्षम (कार्यान्वित किए गए सर्वर साइड) फ़िल्टर किए जाने, सॉर्ट किए जाने या समूह के लिए हैं।

सॉफ्टवेयर विकास में क्रॉस-टीम कॉम्यूनिकेशन एक प्रमुख तत्व है

इस मामले में, DeliveryDate सॉर्टेबल नहीं है, उत्पाद की श्रेणी और नाम सॉर्टेबल और फ़िल्टर करने योग्य और इतने पर नहीं हैं। इसलिए अपने फ्रंट-एंड एप्लिकेशन द्वारा आवश्यक सर्वर-साइड कार्यान्वयन प्राप्त करने के लिए अपनी बैकएंड टीम के साथ ठीक से संवाद करने के लिए हमेशा याद रखें।

कोड दें: ऑपरेशन हटाएं

तो एक रिकॉर्ड को हटाने के लिए आपको क्या करने की आवश्यकता है?

यूआई / यूएक्स

हम फ्रंट-एंड डेवलपर हैं (या पूर्ण-स्टैक) और UI / UX हमारी नौकरी का एक महत्वपूर्ण हिस्सा है। हमें एक इंटरफ़ेस और एक उपयोगकर्ता अनुभव बनाने की आवश्यकता है जो हमारे उपयोगकर्ताओं को कम समय में कम से कम संभव कदमों के साथ काम करने की अनुमति दें और दिन के अंत में उपयोग किए जाने वाले एप्लिकेशन से नफरत न करें। हमारे काम का नतीजा एक खुशहाल उपयोगकर्ता है जो कम समय और त्रुटि के साथ अपना काम करता है और अधिक पैसा कमाने वाली कंपनी है।

इस UI / UX को प्राप्त करने के लिए आप ListBase के कुछ गुणों का लाभ उठा सकते हैं जो हमारी तालिका द्वारा विस्तारित है। डिलीट बटन (बड़ा X) जोड़ने के लिए आपको बस डिलीट करने के लिए टेबल मोड प्रॉपर्टी को सेट करना होगा और फिर यूजर द्वारा बटन पर क्लिक करने पर डिलीट की गई ईवेंट ट्रिगर हो जाएगी।

जावास्क्रिप्ट कार्यान्वयन

onDeleteItem: function(oEvent) { var controller = this; var oModel = this.getView().getModel(); var sPath = oEvent.getParameter("listItem").getBindingContextPath(); var oResourceBundle = this.getView().getModel("i18n").getResourceBundle(); var bCompact = !!this.getView().$().closest(".sapUiSizeCompact").length; controller.byId("tableSalesOrderItem").setBusy(true); oModel.remove(sPath, { success: function(oData, response) { MessageBox.success( oResourceBundle.getText("deleteSaleItemSuccess"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); }, error: function(oError) { MessageBox.error( oResourceBundle.getText("deleteSaleItemError"), { styleClass: bCompact ? "sapUiSizeCompact" : "" }); controller.byId("tableSalesOrderItem").setBusy(false); } }); } 

तो हमने यहाँ क्या किया है?

1. हमें सूची के बाइंडिंग प्रसंग से पथ मिलता है (जो हमारे आइटम के REST url को पहचानता है)
2. हमें ODataModel संदर्भ फ्रेमवर्क से मिलता है (हम डिफ़ॉल्ट मॉडल का उपयोग कर रहे हैं ताकि हमें getModel विधि के लिए एक मॉडल नाम निर्दिष्ट करने की आवश्यकता न हो)
3. हमने अपनी टेबल को व्यस्त कर दिया। यह एक व्यस्त संकेतक प्रदर्शित करेगा जिसमें उपयोगकर्ता हम सर्वर के साथ कुछ संचार कर रहे हैं।
4. हम .remove विधि को 2 पैरामीटर कहते हैं। पहला आइटम उस आइटम का पथ है जिसे हम हटाना चाहते हैं और दूसरा आइटम विभिन्न मापदंडों की एक वस्तु है। आप आधिकारिक दस्तावेज पर उन सभी की जांच कर सकते हैं। हमें बस उपयोगकर्ता को सही प्रतिक्रिया देने और व्यस्त स्थिति को दूर करने के लिए सफलता और त्रुटि घटना के लिए कॉलबैक की आवश्यकता है।

तो UI / UX में .remove विधि के बाद क्या होता है?

खैर, यह बहुत आसान है। रिकॉर्ड हटा दिया जाता है, ODataModel स्वचालित रूप से फ्रेमवर्क द्वारा अद्यतन किया जाता है और SAPUI5 के बाइंडिंग तंत्र के लिए धन्यवाद तालिका भी स्वचालित रूप से अपडेट की जाती है।

इसका क्या मतलब है? यह ध्यान रखें कि नए डेटा के साथ तालिका को ताज़ा करने के लिए भी (एक आइटम हटा दिया गया है) और हमें इसके बारे में परेशान होने की आवश्यकता नहीं है;)

निष्कर्ष और भाग 5 में आगे क्या है?

यदि आप अंतिम परिणाम देखना चाहते हैं तो आप सीधे हमारे GitHub प्रोजेक्ट की चरण_4 शाखा में जा सकते हैं।

अगले भाग में, हम अपने CRUD ऑपरेशन को पूरा करते हुए एक सेल ऑर्डर आइटम के अपडेट ऑपरेशन को संभालेंगे।

दुर्भाग्य से, मैं क्रिएट ऑपरेशन को कार्यान्वित करने में असमर्थ हूं क्योंकि ऐसा लगता है कि मैं जिस डेटा को सबमिट करने की कोशिश कर रहा हूं उसके साथ किसी प्रकार का सर्वर-साइड सत्यापन समस्या है और त्रुटि बहुत अधिक गूढ़ हैं: डी

प्रतिक्रिया की जरूरत है

आप इस श्रृंखला के बारे में क्या सोचते हैं? क्या आप कुछ विशिष्ट SAPUI5 पहलू पर अधिक ध्यान केंद्रित करना चाहते हैं?

इसे नीचे टिप्पणी अनुभाग पर लिखें! सभी को हैप्पी कोडिंग!