Pendahuluan & Rekap
Dalam posting blog sebelumnya , kami telah membuat aplikasi SAPUI5 baru di SAP SCP WebIDE Full stack kami dan kami telah mengonfigurasinya untuk menggunakan tujuan ke SAP Netweaver Gateway Demo ES5 .
Apa yang akan dibahas pada latihan ini
- Apa itu Manifestasi XML Metadata dan apa yang ada di dalamnya?
- Cara menggunakan Model OData kami dan mengikatnya ke dalam aplikasi kami
- Gunakan
sap.m.Table dengan item dan properti mengikat - Gunakan
sap.ui.model.type.DateTime untuk memformat Tanggal JavaScript - Cara membuat gaya kolom untuk bertindak berbeda di perangkat seluler / tablet / desktop
Mari kode
Sekarang saatnya untuk membuat tangan kita kotor dengan beberapa kode. Pada langkah ini, Anda akan menampilkan tabel Mitra Bisnis dengan beberapa informasi yang berguna.
Hal pertama yang harus dilakukan adalah memeriksa metadata layanan kami. Setiap layanan oData memperlihatkan file XML khusus yang disebut XML Metadata Manifest. Anda dapat melihatnya dengan menambahkan $metadata ke URL layanan. Ini adalah URL metadata GWSAMPLE_BASIC kami. Manifestasi Metatada sangat penting karena menggambarkan:
- Set Model mana yang diekspos oleh layanan
- Untuk setiap Model yang merupakan kunci utama, daftar atribut (dengan jenis dan batasan) dan jika memiliki beberapa properti navigasi (bagaimana Anda dapat menavigasi dari model ini ke yang lain sebagai relasi)
- Banyak informasi bermanfaat lainnya
Lihatlah BusinessPartner EntitySet , dan coba tebak properti mana yang telah saya gunakan untuk hasil akhir dari langkah ini. Sekarang periksa dokumentasi Table pada SAPUI5 dan cobalah untuk mereplikasi layout saya dengan urutan kolom dan item yang benar. Untuk setiap nama kolom, buat terjemahan di file i18n.property dan gunakan dalam XML sebagai pengikat. Sekarang, lampirkan BusinessPartnerSet ke tabel, tambahkan kolom yang diminta dan gaya nilai kolom sesuai dengan contoh.
Harap dicatat bahwa:
- Created At memiliki DateTime spesifik yang diformat ditampilkan
- Kolom bertindak berbeda jika aplikasi dibuka di ponsel, tablet, atau browser desktop
Setelah menyelesaikan latihan, Anda dapat memeriksa hasilnya pada kode sumber cabang langkah 1 .