مقدمة و خلاصة
في منشور المدونة السابق ، تعلمنا كيفية نقل تطبيقنا الحالي إلى تطبيق Master-Detail يعرض الشريك التجاري كقائمة (رئيسية) ومعلوماته التفصيلية مع أوامر البيع داخل صفحة التفاصيل (التفاصيل).
ما سيتم تغطيتها في هذا التمرين
من خلال الجزء 4 من هذه السلسلة من منشورات المدونة ، سوف نتعلم كيفية إنشاء صفحة توضيحية ثانية تحتوي على معلومات حول تفاصيل أمر البيع وعرض جدول عناصر أمر البيع.
الجزء الأكثر أهمية في هذا التمرين هو فهم كيفية حذف (جزء من عمليات CRUD) عنصر أمر بيع لأمر بيع.
- ODataModel : لقد استخدمناها بالفعل لعرض معلومات جانب الخادم عن شريكنا في الأعمال ، بيع الطلب. سنستخدمها الآن لعرض عنصر أمر البيع وحذفها من المجموعة. لهذا الغرض ، سنستخدم طريقة الإزالة
هذه هي مهمتنا الرئيسية في هذا التمرين لكنها ليست الشيء الوحيد الذي قمنا به في الكود. فيما يلي قائمة بالأشياء التي عليك القيام بها للوصول إلى النتيجة النهائية:
- أضف مسارًا جديدًا وهدفًا في manifest.json للانتقال إلى صفحة BusinessPartnerSeleOrderItem
- استمع إلى حدث النقر فوق أمر البيع وانتقل إلى تفاصيل SaleOrder (حيث سنعرض تفاصيل أمر البيع وعناصر أمر البيع)
- أضف FilterBar لتصفية جدول عنصر أمر البيع
- إضافة ViewSettingsDialog لفرز / مجموعة عناصر ترتيب البيع
- قم بتوسيع خاصية التنقل ToProduct لكيان SaleOrderItem لعرض معلومات المنتج في صفوف الجدول
ملاحظة: لقد واجهت مشكلة كبيرة في SaleOrderItemsSet عندما كنت بحاجة إلى تصفية العناصر وفرزها وتجميعها. تحتاج دائمًا إلى معرفة الحقول التي يتم تمكينها (جانب الخادم المطبق) لتتم تصفيتها أو فرزها أو تجميعها.
التواصل عبر الفريق هو عنصر رئيسي في تطوير البرمجيات
في هذه الحالة ، لا يمكن الفرز "تاريخ التسليم" ، فئة المنتج واسمه غير قابلة للفرز والتصفية وغير ذلك. لذلك تذكر دائمًا التواصل بشكل صحيح مع فريق الواجهة الخلفية للحصول على تطبيق جانب الخادم الذي يتطلبه تطبيق الواجهة الأمامية.
دعونا كود: حذف العملية
إذن ما الذي يجب عليك فعله لحذف سجل؟
UI / UX
نحن مطور أمامي (أو مكدس كامل) و 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); } }); }
إذن ماذا فعلنا هنا؟
- نحصل على المسار (الذي يحدد عنوان url المخصص لبندنا) من سياق الربط الخاص بالقائمة التي تم النقر فوقها
- نحصل على مرجع ODataModel من الإطار (نحن نستخدم النموذج الافتراضي لذلك نحن لسنا بحاجة إلى تحديد اسم نموذج لأسلوب getModel)
- وضعنا طاولتنا على مشغول. سيعرض هذا مؤشرًا مشغولًا يشير إلى قيام المستخدم بإجراء بعض الاتصالات مع الخادم.
- نحن نسمي الأسلوب .remove الذي يحتوي على معلمتين. أول واحد هو مسار العنصر الذي نود حذفه والثاني هو كائن من المعلمات المختلفة. يمكنك التحقق من كل منهم على الوثائق الرسمية . نحتاج فقط إلى رد الاتصال إلى حدث النجاح والخطأ لإعطاء ملاحظات صحيحة للمستخدم وإزالة حالة الانشغال.
فماذا يحدث بعد طريقة .remove في UI / UX؟
حسنا ، هذا بسيط جدا. يتم حذف السجل ، يتم تحديث ODataModel تلقائيًا بواسطة الإطار وبفضل آلية الربط الخاصة بـ SAPUI5 ، يتم أيضًا تحديث الجدول تلقائيًا.
ماذا يعني ذلك؟ أن يحرص الإطار أيضًا على تحديث الجدول بالبيانات الجديدة (تمت إزالة عنصر واحد) ولا نحتاج إلى القلق بشأنه ؛)
الخلاصة وما هو التالي في الجزء 5؟
إذا كنت تريد التحقق من النتيجة النهائية ، يمكنك الانتقال مباشرةً إلى فرع step_4 في مشروع جيثب الخاص بنا .
في الجزء التالي ، سنعالج عملية التحديث لعنصر أمر البيع لاستكمال عمليات CRUD الخاصة بنا.
لسوء الحظ ، يتعذر عليّ تنفيذ عملية إنشاء لأنه يبدو أن هناك نوعًا من مشكلة التحقق من جانب الخادم مع البيانات التي أحاول إرسالها والخطأ كثير التشفير: D
ردود الفعل اللازمة
ما رأيك في هذه السلسلة؟ هل تريد المزيد من التركيز على بعض جوانب SAPUI5 المحددة؟
اكتبها في قسم التعليق! ترميز سعيد للجميع!