Pendahuluan & Rekap
Di posting blog sebelumnya , kami mulai merancang aplikasi kami membuat tabel dengan beberapa Mitra Bisnis. Kami mempelajari apa itu protokol OData, cara membaca manifes OData XML, cara mengikat data ke Tabel dan bagaimana menyesuaikan tata letak kolom berdasarkan resolusi layar yang berbeda.
Apa yang akan dibahas pada latihan ini
Dengan Bagian 2 dari rangkaian posting blog ini, kita akan belajar cara berinteraksi dengan data di Tabel dan Daftar kami. Kami akan belajar cara memfilter dan mengurutkan data dengan cara yang cerdas.
- Buat JSONModel untuk menangani data lokal
- Tetapkan sizeLimit default ke JSONModel kami
- FilterBar : Kontrol UI yang menampilkan filter dengan cara yang ramah pengguna untuk mengisi nilai untuk kueri
- Gunakan Fragmen XML untuk membuat Dialog Pengaturan Tampilan untuk menangani mengurutkan dan mengelompokkan data
- Saring dan Sortir data
- Tambahkan Bilah Alat Info ke tabel kami untuk menampilkan informasi yang berguna
Mari kode
Filterbar
Hal pertama yang ingin kami lakukan adalah mengizinkan pengguna untuk memfilter daftar Mitra Bisnis yang ditampilkan di tabel kami. Sebagian besar waktu kami memiliki data yang sangat besar (kumpulan Mitra Bisnis kami terdiri dari 13880 catatan) yang diatur untuk ditampilkan dan pengguna hanya ingin memfilter semua catatan tersebut berdasarkan beberapa informasi yang berguna.
Aturan praktis: jangan tampilkan input filter untuk informasi yang tidak ditampilkan di tabel / daftar Anda
Untuk melakukannya, Anda perlu menambahkan FilterBar di atas tabel Anda. Kontrol UI ini hanya tersedia di SAPUI5 dan tidak di OpenUI5.
FilterBar memungkinkan Anda untuk mengelompokkan filter secara teratur. Kontrol UI ini selalu digunakan dengan Variant Manager yang tidak akan saya bahas kali ini.
Tambahkan empat filter berbeda:
- ID: Input yang akan memfilter atribut BusinessPartnerID
- Nama: Input yang akan memfilter atribut CompanyName
- Jalan: Masukan itu akan
- Negara: Pilih ( daftar kode negara JSON ) untuk memfilter atribut Alamat / Negara
Setelah Anda menambahkan input tersebut ke FilterBar, apa yang perlu Anda lakukan adalah mengikat ke acara "cari" dan "hapus". Yang pertama akan dipicu ketika pengguna memulai pencarian, yang kedua ketika Anda harus menghapus semua filter dan memulai pencarian kosong.
Filter harus eksklusif satu sama lain. Jika pengguna telah menambahkan "SAP" dalam nama perusahaan dan "IT" dalam kode negara tabel Anda harus memfilter seperti permintaan
Beri saya semua Mitra Bisnis dengan Nama yang mengandung "SAP" dan dengan kode negara sama dengan "DE"
JSONModel
Kami sudah mengatakan bahwa di SAPUI5 Anda harus memiliki berbagai model:
- ODataModel v2: implementasi model berdasarkan protokol OData (versi 2). Ini digunakan ketika Anda perlu berinteraksi dengan layanan OData.
- JSONModel : implementasi model untuk data JSON. Ini sebagian besar digunakan untuk menangani data lokal / sementara
Untuk latihan kami, saya sarankan Anda membuat satu JSONModel untuk menyimpan data filter dan satu lagi untuk menyimpan kode negara. Ketika Anda telah membuat file JSON lokal di dalam folder model Anda, Anda dapat dengan mudah mengimpornya dari _manifest.json_that yang akan menangani semua logika untuk memuat informasi saat aplikasi Anda akan mulai.
Saring
sap.ui.model.Filter baru (vFilterInfo, vOperator?, vValue1?, vValue2?)
Filter adalah alat yang ampuh, memungkinkan Anda untuk menggabungkan berbagai filter untuk membuat kueri OData kompleks yang kemudian akan diterjemahkan dalam SQL di sisi backend.
- Parameter pertama adalah nama kolom yang ingin Anda filter. Anda juga dapat menentukan kolom dari properti yang diperluas seperti "Alamat / Jalan"
- Parameter kedua adalah operasi yang ingin Anda terapkan ke filter Anda. Anda dapat menemukan semua operasi yang mungkin pada dokumentasi FilterOperator .
- Parameter ketiga dan keempat adalah nilai kueri yang dimasukkan oleh pengguna dan Anda ingin memfilter.
Konstruktor kedua dari Filter memungkinkan Anda untuk mencampur filter untuk membuat grup filter AND dan OR.
sap.ui.model.Filter baru (aFilters, bAnd)
Setelah Anda membuat Filter akhir, Anda bisa menerapkannya pada Tabel binding.
Sortir dan kelompokkan
Seorang pengguna selalu ingin juga mengurutkan / mengelompokkan catatan berdasarkan kolom tertentu dan mereka bekerja kurang lebih seperti Filter.
sap.ui.model.Sorter baru (sPath, bDescending?, vGroup?, fnComparator?)
- Parameter pertama (seperti untuk Filter) adalah atribut OData yang ingin Anda urutkan
- Parameter kedua (boolean) akan mengurutkan data dengan cara Descending atau Ascending
- Parameter ketiga dapat berupa boolean (jika Anda ingin mengelompokkan kembali data) atau fungsi (saya akan menjelaskan ini sebentar lagi).
- Parameter terakhir adalah opsional dan memungkinkan Anda untuk melakukan pengurutan khusus lokal (bukan pada OData) berdasarkan hasil fungsi
Parameter vGroup penting karena memungkinkan Anda menentukan cara kustom untuk mengelompokkan kembali item. Anda hanya perlu mengimplementasikan fungsi kustom yang mengembalikan objek JavaScript dengan kunci dan nilai teks di dalamnya.
- Kunci akan digunakan oleh SAPUI5 untuk memahami jika catatan sudah terkandung dalam grup dengan nilai kunci yang sama
- Teks digunakan oleh SAPUI5 untuk membuat UI untuk menampilkan nama grup
Fungsi ini sangat penting ketika Anda ingin menyusun kembali item untuk nilai khusus seperti tanggal. Setiap tanggal JavaScript berbeda karena menangani data ke milidetik. Dalam hal ini, Anda dapat memformat tanggal untuk hanya menampilkan tahun-bulan-hari dan barang-barang akan dikelompokkan dengan benar untuk tanggal tersebut.
Cobalah untuk hanya mengelompokkan atribut "CreatedAt" tanpa fungsi khusus dan lihat apa yang terjadi;)
Penyortiran dan Pengelompokan: UI / UX
Cara terbaik untuk memungkinkan pengguna mengurutkan dan mengelompokkan data dalam tabel / daftar Anda adalah dengan menggunakan ViewSettingsDialog .
Sangat mudah untuk mendefinisikan dan mengkonfigurasi dan memberi Anda banyak kontrol. ViewSettingsDialog disematkan di dalam Fragmen dan ditampilkan sebagai Dialog / Popover.
Biasanya, ketika Anda ingin menampilkan dialog seperti ini, Anda hanya perlu membuat definisi fragmen Anda dalam file (seperti ViewSettingDialog.fragment.xml) dan dimuat ketika pengguna mengklik tombol di atas tabel.
Ketika kita berbicara tentang Fragmen, kita perlu memperhatikan dua hal:
- Penggunaan kembali sumber daya
- Ketergantungan siklus hidup
Keduanya memungkinkan Anda untuk tidak membuang-buang sumber daya dan untuk tidak membuat kebocoran memori (dan Anda benar-benar tidak ingin berurusan dengan mereka!)
Jadi:
- Buat sap.ui.xmlfragment baru hanya jika diperlukan (ketika variabel yang menyimpan referensi tidak null atau hancur) jika tidak, gunakan kembali dan buka dialog
- Ingatlah untuk memusnahkan dialog ketika dibutuhkan seperti ketika dialog ditutup jika Anda menggunakan variabel yang sama untuk fragmen yang berbeda atau pada acara keluar dari pengontrol
InfoToolbar adalah Bilah Alat yang ditangani oleh ListBase (kelas yang diperpanjang oleh Tabel) dan biasanya ditampilkan di bawah header (itu di dalam agregasi infoToolbar). Ini sangat berguna ketika Anda ingin menunjukkan beberapa informasi yang perlu disorot.
Dalam kasus kami, ketika pengguna melakukan pencarian, kami akan menampilkan stempel waktu terbaru dari pencarian dan berapa banyak catatan yang telah difilter secara total.
Kesimpulan dan apa yang selanjutnya di Bagian 3?
Jika Anda ingin memeriksa hasil akhir, Anda dapat langsung pergi ke cabang step_2 dari Proyek GitHub kami .
Di bagian latihan selanjutnya, kami akan memperkenalkan konsep SplitApp dan tata letak Master-Detail sehingga Anda lebih baik mulai membaca beberapa dokumentasi baru;)