Membuat rincian galeri pesanan di aplikasi kanvas

2025-05-21

Ikuti petunjuk langkah demi langkah untuk membuat rincian galeri pesanan di aplikasi kanvas untuk mengelola data fiktif di database Northwind Traders. Topik ini adalah bagian dari rangkaian yang menjelaskan cara membuat aplikasi bisnis pada data relasional di Microsoft Dataverse. Untuk hasil terbaik, jelajahi topik berikut ini dalam urutan ini:

Buat galeri pesanan.
Membuat formulir ringkasan.
Buat galeri detail (topik ini).

Definisi area layar.

Prasyarat

Sebelum Anda memulai topik ini, anda harus menginstal database sebagaimana dijelaskan sebelumnya di topik ini. Anda kemudian harus membuat galeri pesanan dan formulir ringkasan atau membuka aplikasi Northwind Orders (Canvas) - Begin Part 3 , yang sudah berisi galeri dan formulir tersebut.

Buat bilah judul lain

Di bagian atas layar, pilih kontrol Label yang berfungsi sebagai bilah judul, salin dengan menekan Ctrl-C, lalu tempel dengan menekan Ctrl-V:
Ubah ukuran dan pindahkan salinannya sehingga muncul tepat di bawah formulir ringkasan.
Hapus teks dari salinan dengan salah satu cara berikut:
- Klik dua kali pada teks untuk memilihnya, lalu tekan Delete.
- Tetapkan properti Teks label ke string kosong ("").

Menambahkan galeri

Masukkan kontrol Galeri dengan tata letak vertikal Kosong:

Galeri baru, yang akan menampilkan rincian pesanan, muncul di sudut kiri atas.
Tutup dialog sumber data, lalu ubah ukuran dan pindahkan galeri rincian ke sudut kanan bawah, di bawah bilah judul baru:
Tetapkan properti Item dari galeri detail ke rumus ini:
```
Gallery1.Selected.'Order Details'
```
Jika kesalahan muncul, konfirmasikan bahwa galeri pesanan diberi nama Galeri1 (di panel Tampilan Pohon di dekat tepi kiri). Jika galeri tersebut memiliki nama yang berbeda, gantilah namanya menjadi Galeri1.

Anda baru saja menghubungkan dua galeri. Saat pengguna memilih pesanan di galeri pesanan, pilihan tersebut mengidentifikasi rekaman di tabel Pesanan . Jika pesanan tersebut berisi satu atau beberapa item baris, rekaman dalam tabel Pesanan ditautkan ke satu atau beberapa rekaman dalam tabel Rincian pesanan , dan data dari rekaman tersebut muncul di galeri detail. Perilaku ini mencerminkan hubungan satu ke banyak yang dibuat untuk Anda antara tabel Pesanan dan Rincian Pesanan . Rumus yang Anda tentukan "menjalankan" relasi tersebut dengan menggunakan notasi titik:

Tampilkan nama produk

Di galeri detail, pilih Tambahkan item dari tab Sisipkan untuk memilih templat galeri:

Pastikan Anda telah memilih templat galeri dan bukan galeri itu sendiri. Kotak pembatas harus berada sedikit di dalam batas galeri dan mungkin lebih pendek dari tinggi galeri. Saat Anda memasukkan kontrol ke templat ini, mereka diulang untuk setiap item di galeri.
Pada tab Sisipkan , masukkan label ke galeri detail.

Label akan muncul di dalam galeri; jika tidak, coba lagi, namun pastikan untuk memilih templat galeri sebelum memasukkan label.
Tetapkan properti Teks label baru ke rumus ini:
```
ThisItem.Product.'Product Name'
```
Jika tidak ada teks yang muncul, pilih tanda panah untuk Pesanan 0901 di dekat bagian bawah galeri pesanan.
Ubah ukuran label sehingga teks lengkap ditampilkan:

Ekspresi ini berjalan dari rekaman dalam tabel Rincian Pesanan . Catatan disimpan dalam ThisItem ke tabel Order Products melalui hubungan banyak ke satu:

Kolom Nama Produk (dan kolom lain yang akan Anda gunakan) diekstraksi:

Tampilkan gambar produk

Pada tab Sisipkan , masukkan kontrol Gambar ke dalam galeri detail:
Ubah ukuran dan pindahkan gambar dan label menjadi berdampingan.

Tip

Untuk kontrol yang halus atas ukuran dan posisi kontrol, mulai mengubah ukuran atau memindahkannya tanpa menekan tombol Alt, lalu terus mengubah ukuran atau memindahkan kontrol saat Anda menahan tombol Alt:
Tetapkan properti Gambar ke rumus ini:
```
ThisItem.Product.Picture
```
Sekali lagi, ekspresi tersebut merujuk pada produk yang dikaitkan dengan detail pesanan ini dan mengekstrak bidang Gambar untuk ditampilkan.
Kurangi tinggi templat galeri sehingga lebih dari satu catatan Detail Pesanan muncul pada satu waktu:

Tampilkan kuantitas produk dan biaya

Pada tab Sisipkan , masukkan label lain ke dalam galeri detail, lalu ubah ukuran dan pindahkan label baru ke sebelah kanan informasi produk.
Tetapkan properti Teks label baru ke ekspresi ini:
```
ThisItem.Quantity
```
Rumus ini menarik informasi langsung dari tabel Rincian Pesanan (tidak ada hubungan yang diperlukan).
Pada tab Beranda , ubah perataan kontrol ini ke Kanan:
Pada tab Sisipkan , masukkan label lain ke dalam galeri detail, lalu ubah ukuran dan pindahkan label ke sebelah kanan label kuantitas.
Tetapkan properti Teks label baru ke rumus ini:
```
Text( ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Jika Anda tidak menyertakan tag bahasa ([$-en-US]), tag tersebut akan ditambahkan untuk Anda berdasarkan bahasa dan wilayah Anda. Jika Anda menggunakan tag bahasa yang berbeda, Anda sebaiknya menghapus $ tepat setelah tanda kurung siku tutup (]), lalu tambahkan simbol mata uang Anda sendiri di posisi tersebut.
Pada tab Beranda , ubah perataan kontrol ini ke Kanan:
Pada tab Sisipkan , masukkan kontrol label lain ke dalam galeri detail, lalu ubah ukuran dan pindahkan label baru ke sebelah kanan harga satuan.
Tetapkan properti Teks label baru ke rumus ini:
```
Text( ThisItem.Quantity * ThisItem.'Unit Price', "[$-en-US]$ #,###.00" )
```
Sekali lagi, jika Anda tidak menyertakan tag bahasa ([$-en-US]), tag tersebut akan ditambahkan untuk Anda berdasarkan bahasa dan wilayah Anda. Jika tagnya berbeda, Anda sebaiknya menggunakan simbol mata uang Anda sendiri, bukan $ yang tepat setelah tanda kurung siku penutup (]).
Pada tab Beranda , ubah perataan kontrol ini ke Kanan:

Anda telah selesai menambahkan kontrol ke galeri rincian untuk saat ini.
Di panel Tampilan pohon , pilih Layar1 untuk memastikan bahwa galeri detail tidak lagi dipilih.

Tambahkan teks ke bilah judul baru

Pada tab Sisipkan , masukkan label lain ke layar:
Ubah ukuran dan pindahkan label baru di atas gambar produk di bilah judul kedua, lalu ubah warna teks menjadi putih pada tab Beranda .
Klik dua kali teks label, lalu ketik Produk:
Salin dan tempel label produk, lalu ubah ukuran dan pindahkan salinan di atas kolom kuantitas.
Klik dua kali teks label baru, lalu ketik Jumlah:
Salin dan tempel label produk, lalu ubah ukuran dan pindahkan salinan di atas kolom harga unit.
Klik dua kali teks label baru, lalu ketik Harga Satuan:
Salin dan tempel label harga satuan, lalu ubah ukuran dan pindahkan salinan di atas kolom total harga.
Klik dua kali teks label baru, lalu ketik Extended:

Tampilkan total pesanan

Kurangi tinggi galeri rincian untuk membuat ruang untuk total pesanan di bagian bawah layar:
Salin dan tempel bilah judul di tengah layar, lalu pindahkan salinan ke bagian bawah layar:
Salin dan tempel label produk dari bilah judul tengah, lalu pindahkan salinan ke bilah judul bawah, tepat di sebelah kiri kolom Kuantitas .
Klik dua kali pada teks label baru, lalu ketik teks berikut:
Jumlah Pesanan:
Salin dan tempel label total pesanan, lalu ubah ukuran dan pindahkan salinan ke kanan label total pesanan.
Tetapkan properti Teks label baru ke rumus ini:
```
Sum( Gallery1.Selected.'Order Details', Quantity )
```
Rumus ini menunjukkan peringatan delegasi, namun Anda dapat mengabaikannya karena tidak ada satu pesanan yang akan berisi lebih dari 500 produk.
Pada tab Beranda , atur perataan teks label baru ke Kanan:
Salin dan tempel kontrol label ini, lalu ubah ukuran dan pindahkan salinannya di bawah kolom Diperluas .
Tetapkan properti Teks salinan ke rumus ini:
```
Text( Sum( Gallery1.Selected.'Order Details', Quantity * 'Unit Price' ), "[$-en-US]$ #,###.00" )
```
Rumus ini menunjukkan peringatan delegasi, namun Anda dapat mengabaikannya karena tidak ada satu pesanan yang akan berisi lebih dari 500 produk.

Tambah ruang untuk rincian baru

Di galeri apa pun, Anda dapat menampilkan data, namun Anda tidak dapat memperbaruinya atau menambahkan catatan. Di bawah galeri detail, Anda akan menambahkan area tempat pengguna dapat mengonfigurasi rekaman dalam tabel Rincian Pesanan dan memasukkan rekaman tersebut ke dalam pesanan.

Kurangi tinggi rincian galeri cukup untuk ruang pengeditan satu item di bawah galeri tersebut.

Di ruang ini, Anda akan menambahkan kontrol sehingga pengguna dapat menambahkan rincian pesanan:
Pada tab Sisipkan , masukkan label, lalu ubah ukuran dan pindahkan di bawah galeri detail.
Klik dua kali pada teks label, lalu tekan Hapus:
Pada tab Beranda , atur warna Isi label baru ke BiruTerang:

Pilih Produk

Pada tab Sisipkan , pilih Kontrol>Kotak kombo:

Kontrol Kotak kombo muncul di sudut kiri atas.
Pada dialog fly out, pilih sumber data Pesan Produk .
Pada tab Properties untuk kotak kombo, pilih Edit (di samping Fields) untuk membuka panel Data . Pastikan bahwa Teks utama dan SearchField diatur ke nwind_productname.

Anda menentukan nama logis karena panel Data belum mendukung nama tampilan dalam kasus ini:
Tutup panel Data .
Pada tab Properties di dekat tepi kanan, gulir ke bawah, nonaktifkan Allow multiple choice, dan pastikan Allow searching diaktifkan:
Ubah ukuran dan pindahkan kotak kombo ke area biru muda, tepat di bawah kolom nama produk di galeri rincian:

Dalam kotak kombo ini, pengguna akan menentukan catatan dalam tabel Produk untuk catatan Rincian Pesanan yang akan dibuat oleh aplikasi.
Sambil menekan terus tombol Alt, pilih panah bawah kotak kombo.

Tip

Dengan menekan tombol Alt, Anda dapat berinteraksi dengan kontrol di Power Apps Studio tanpa membuka mode Pratinjau.
Dalam daftar produk yang muncul, pilih produk:

Tambahkan gambar produk

Pada tab Sisipkan , pilih Media>Gambar:

Kontrol Gambar muncul di sudut kiri atas:
Ubah ukuran dan pindahkan gambar ke area biru muda di bawah gambar produk lainnya dan di sebelah kotak kombo.
Tetapkan properti Gambar ke:
```
ComboBox1.Selected.Picture
```
Anda menggunakan trik yang sama seperti yang Anda gunakan untuk menampilkan gambar karyawan dalam formulir ringkasan. Properti Selected pada kotak kombo mengembalikan keseluruhan rekaman produk apa pun yang dipilih pengguna, termasuk bidang Picture .

Tambahkan kotak kuantitas

Pada tab Sisipkan , pilih Teks>Masukan teks:

Kontrol Input teks muncul di sudut kiri atas:
Ubah ukuran dan pindahkan kotak input teks ke sebelah kanan kotak kombp, tepat di bawah kolom kuantitas di galeri rincian:

Dengan menggunakan kotak masukan teks ini, pengguna akan menentukan bidang Kuantitas pada catatan Rincian Pesanan .
Tetapkan properti Default dari kontrol ini ke "":
Pada tab Beranda , atur perataan teks kontrol ini ke Kanan:

Tampilkan harga satuan dan total

Pada tab Sisipkan , masukkan kontrol Label .

Labelnya muncul di sudut kiri atas layar:
Ubah ukuran dan pindahkan label ke sebelah kanan kontrol input teks, dan atur properti Teks label ke rumus ini:
```
Text( ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Kontrol ini menampilkan Daftar Harga dari tabel Pesanan Produk . Nilai ini akan menentukan bidang Harga Satuan dalam catatan Rincian Pesanan .

Catatan

Untuk skenario ini, nilai hanya dapat dibaca, namun skenario lain mungkin dapat memanggil pengguna aplikasi untuk memodifikasinya. Dalam kasus tersebut, gunakan kontrol Input teks dan atur properti Default ke Harga Daftar.
Pada tab Beranda , atur perataan teks label harga daftar ke Kanan:
Salin dan tempel label daftarkan harga, lalu ubah ukuran dan pindahkan salinan ke kanan label daftarkan harga.
Tetapkan properti Teks label baru ke rumus ini:
```
Text( Value(TextInput1.Text) * ComboBox1.Selected.'List Price', "[$-en-US]$ #,###.00" )
```
Kontrol ini menampilkan total harga berdasarkan kuantitas yang ditentukan pengguna aplikasi dan harga daftar produk yang dipilih pengguna aplikasi. Ini murni informasi untuk pengguna aplikasi.
Klik dua kali pada kontrol input teks untuk kuantitas, lalu masukkan angka.

Label harga yang Diperpanjang dihitung ulang untuk menunjukkan nilai baru:

Tambahkan ikon Tambah

Pada tab Sisipkan , pilih Ikon>Tambahkan:

ikonnya muncul di sudut kiri atas layar.
Ubah ukuran dan pindahkan ikon ini ke tepi kanan area biru muda, lalu atur properti OnSelect ikon ke rumus ini:
```
Patch( 'Order Details',
    Defaults('Order Details'),
    {
        Order: Gallery1.Selected,
        Product: ComboBox1.Selected,
        Quantity: Value(TextInput1.Text),
        'Unit Price': ComboBox1.Selected.'List Price'
    }
);
Refresh( Orders );
Reset( ComboBox1 );
Reset( TextInput1 )
```
Secara umum, fungsi Patch memperbarui dan membuat rekaman, dan argumen spesifik dalam rumus ini menentukan perubahan tepat yang akan dibuat oleh fungsi tersebut.
- Argumen pertama menentukan sumber data (dalam hal ini, tabel Rincian Pesanan ) di mana fungsi akan memperbarui atau membuat rekaman.
- Argumen kedua menetapkan bahwa fungsi tersebut akan membuat rekaman dengan nilai default untuk tabel Rincian Pesanan kecuali dinyatakan lain dalam argumen ketiga.
- Argumen ketiga menentukan bahwa empat kolom dalam catatan baru akan berisi nilai dari pengguna.
  - Kolom Pesanan akan berisi nomor pesanan yang dipilih pengguna di galeri pesanan.
  - Kolom Produk akan berisi nama produk yang dipilih pengguna dalam kotak kombo yang menampilkan produk.
  - Kolom Kuantitas akan berisi nilai yang ditentukan pengguna dalam kotak masukan teks.
  - Kolom Harga Satuan akan berisi harga daftar produk yang dipilih pengguna untuk detail pesanan ini.
Catatan

Anda dapat membuat rumus yang menggunakan data dari kolom mana saja (dalam tabel Pesan Produk ) untuk produk apa pun yang dipilih pengguna aplikasi dalam kotak kombo yang menampilkan produk. Saat pengguna memilih catatan dalam tabel Pesan Produk , tidak hanya nama produk yang muncul dalam kotak kombo tersebut tetapi harga satuan produk juga muncul dalam label. Setiap nilai pencarian di aplikasi kanvas mereferensi seluruh catatan, bukan hanya kunci uta,a.

Fungsi Refresh memastikan bahwa tabel Pesanan mencerminkan catatan yang baru saja Anda tambahkan ke tabel Rincian Pesanan . Fungsi Reset menghapus data produk, kuantitas, dan harga satuan sehingga pengguna dapat lebih mudah membuat detail pesanan lain untuk pesanan yang sama.
Tekan F5, lalu pilih ikon Tambah .

Urutan mencerminkan informasi yang Anda tentukan:
(opsional) Tambahkan item lain ke pesanan.
Tekan Esc untuk menutup mode Pratinjau.

Hapus rincian pesanan

Di bagian tengah layar, pilih templat galeri rincian:
Pada tab Sisipkan , pilih Ikon>Sampah:

Ikon Sampah muncul di sudut kiri atas templat galeri.
Ubah ukuran dan pindahkan ikon Sampah ke sisi kanan templat galeri detail, dan atur properti OnSelect ikon ke rumus ini:
```
Remove( 'Order Details', ThisItem ); Refresh( Orders )
```
Saat tulisan ini dibuat, Anda tidak dapat menghapus rekaman secara langsung dari suatu hubungan, jadi fungsi Hapus menghapus rekaman secara langsung dari tabel terkait. ThisItem menentukan rekaman yang akan dihapus, diambil dari rekaman yang sama di galeri detail tempat ikon Sampah muncul.

Sekali lagi, operasi tersebut menggunakan data yang di-cache, sehingga fungsi Refresh memberi tahu tabel Orders bahwa aplikasi telah mengubah salah satu tabel terkaitnya.
Tekan F5 untuk membuka mode Pratinjau, lalu pilih ikon Sampah di samping setiap catatan Rincian Pesanan yang ingin Anda hapus dari pesanan.
Coba tambahkan dan hapus berbagai rincian pesanan dari pesanan Anda:

Kesimpulan

Untuk rekap, Anda menambahkan galeri lain untuk menampilkan rincian pesanan dan mengontrol penambahan dan penghapusan rincian pesanan di aplikasi. Anda menggunakan elemen berikut:

Kontrol galeri kedua, terhubung ke galeri pesanan melalui hubungan satu ke banyak: Gallery2.Items = Gallery1.Selected.'Order Details'
Hubungan banyak ke satu dari tabel Rincian Pesanan ke tabel Produk Pesanan : ThisItem.Product.'Product Name' dan ThisItem.Product.Picture
Fungsi Pilihan untuk mendapatkan daftar produk: Choices( 'Order Details'.Product' )
Properti Terpilih dari kotak kombo sebagai rekaman terkait banyak-ke-satu yang lengkap: ComboBox1.Selected.Picture dan ComboBox1.Selected.'List Price'
Fungsi Patch untuk membuat catatan Rincian Pesanan : Patch( 'Order Details', Defaults( 'Order Details' ), ... )
Fungsi Hapus untuk menghapus catatan Rincian Pesanan:Remove( 'Order Details', ThisItem )

Rangkaian topik ini telah menjadi panduan singkat penggunaan Relasi Dataverse dan pilihan dalam aplikasi kanvas untuk tujuan edukatif. Sebelum Anda merilis aplikasi apa pun ke produksi, Anda harus mempertimbangkan validasi lapangan, penanganan kesalahan, dan banyak faktor lainnya.