Pendahuluan & Rekap
Di posting blog sebelumnya , kami belajar cara memindahkan aplikasi kami saat ini ke aplikasi Master-Detail yang menampilkan Mitra Bisnis sebagai daftar (master) dan informasi detailnya dengan Pesanan Penjualan di dalam halaman detail (detail).
Apa yang akan dibahas pada latihan ini
Dengan Bagian 4 dari seri posting blog ini, kita akan belajar cara membuat halaman pencarian kedua dengan informasi tentang detail Pesanan Penjualan dan menampilkan tabel item Pesanan Penjualan.
Bagian terpenting dari latihan ini adalah untuk memahami cara Menghapus (bagian dari operasi CRUD) Item Pemesanan Penjualan dari Pesanan Penjualan.
- ODataModel : kami telah menggunakannya untuk menampilkan informasi sisi server tentang Mitra Bisnis kami, Penjualan Pesanan. Sekarang kita akan menggunakannya untuk menampilkan Item Pesanan Penjualan dan menghapusnya dari set. Untuk tujuan ini, kita akan menggunakan metode hapus
Ini adalah tugas utama kami dalam latihan ini, tetapi itu bukan satu-satunya hal yang kami lakukan dalam kode. Inilah daftar hal-hal yang harus Anda lakukan untuk mencapai hasil akhir:
- Tambahkan rute dan target baru di manifes.json untuk menavigasi ke halaman BusinessPartnerSeleOrderItem
- Dengarkan acara klik Pesanan Penjualan dan navigasikan ke detail SaleOrder (tempat kami akan menampilkan detail pesanan penjualan dan item pesanan penjualan)
- Tambahkan FilterBar untuk memfilter tabel Item Pesanan Penjualan
- Tambahkan ViewSettingsDialog untuk mengurutkan / mengelompokkan Item Pesanan Penjualan
- Perluas properti navigasi ToProduct dari entitas SaleOrderItem untuk menampilkan informasi Produk ke dalam baris tabel
NB: Saya mengalami banyak masalah pada SaleOrderItemsSet ketika saya perlu memfilter, mengurutkan, dan mengelompokkan item. Anda selalu perlu tahu bidang mana yang diaktifkan (sisi server yang diterapkan) untuk difilter, disortir, atau grup.
Komunikasi Lintas-tim adalah elemen kunci dalam pengembangan perangkat lunak
Dalam hal ini, DeliveryDate tidak dapat disortir, Kategori dan Nama Produk tidak dapat disortir dan difilter, dan sebagainya. Jadi ingat selalu untuk berkomunikasi dengan baik dengan tim backend Anda untuk mendapatkan implementasi sisi server yang dibutuhkan oleh aplikasi front-end Anda.
Mari kode: Hapus Operasi
Jadi apa yang perlu Anda lakukan untuk menghapus catatan?
UI / UX
Kami adalah pengembang front-end (atau tumpukan penuh) dan UI / UX adalah bagian penting dari pekerjaan kami. Kita perlu membuat antarmuka dan pengalaman pengguna yang memungkinkan pengguna menyelesaikan pekerjaan dalam waktu yang sesingkat mungkin, dengan langkah yang lebih sedikit dan tidak membenci aplikasi yang mereka gunakan di akhir hari. Hasil dari pekerjaan kami adalah pengguna yang bahagia yang melakukan pekerjaan mereka dengan lebih sedikit waktu dan kesalahan dan perusahaan yang menghasilkan lebih banyak uang.
Untuk mencapai UI / UX ini, Anda dapat memanfaatkan beberapa properti dari ListBase yang diperluas oleh Tabel kami. Untuk menambahkan tombol hapus (X besar) Anda hanya perlu mengatur properti mode Tabel ke Hapus dan kemudian menangani peristiwa hapus yang dipicu ketika pengguna mengklik tombol.
Implementasi JavaScript
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); } }); }
Jadi apa yang sudah kita lakukan di sini?
- Kami mendapatkan jalur (yang mengidentifikasi url REST dari item kami) dari Konteks Binding dari listItem yang diklik
- Kami mendapatkan referensi ODataModel dari kerangka kerja (kami menggunakan model default sehingga kami tidak perlu menentukan nama model untuk metode getModel)
- Kami mengatur meja kami untuk sibuk. Ini akan menampilkan indikator sibuk yang menyarankan pengguna kami melakukan komunikasi dengan server.
- Kami memanggil metode .remove yang memiliki 2 parameter. Yang pertama adalah path dari item yang ingin kita hapus dan yang kedua adalah Object dengan parameter berbeda. Anda dapat memeriksa semuanya di dokumentasi resmi . Kami hanya perlu panggilan balik ke acara sukses dan kesalahan untuk memberikan umpan balik yang benar kepada pengguna dan menghapus status sibuk.
Jadi apa yang terjadi setelah metode .remove di UI / UX?
Yah, ini sangat sederhana. Catatan dihapus, ODataModel diperbarui secara otomatis oleh kerangka kerja dan berkat mekanisme pengikatan SAPUI5, Tabel juga diperbarui secara otomatis.
Apa artinya Bahwa kerangka kerja juga berhati-hati untuk menyegarkan Tabel dengan data baru (satu item telah dihapus) dan kita tidak perlu repot tentang hal itu;)
Kesimpulan dan apa yang selanjutnya di Bagian 5?
Jika Anda ingin melihat hasil akhirnya, Anda dapat langsung pergi ke cabang step_4 dari Proyek GitHub kami .
Pada bagian selanjutnya, kami akan menangani operasi Pembaruan dari Item Pesanan Penjualan yang menyelesaikan operasi CRUD kami.
Sayangnya, saya tidak dapat mengimplementasikan operasi Buat karena sepertinya ada semacam masalah validasi sisi server dengan data yang saya coba kirim dan kesalahannya banyak samar: D
Umpan balik dibutuhkan
Apa pendapat Anda tentang seri ini? Apakah Anda ingin lebih fokus pada beberapa aspek SAPUI5 tertentu?
Tuliskan di bagian komentar! Selamat coding untuk semua orang!