Menampilkan, mengurutkan, dan memfilter data dalam galeri aplikasi kanvas

Membuat galeri untuk menampilkan gambar dan teks tentang beberapa produk, dan mengurutkan serta memfilter informasi tersebut.

Di Power Apps, Anda dapat menggunakan galeri untuk menampilkan beberapa item terkait, sama seperti yang Anda lihat dalam katalog. Galeri sangat bagus untuk menampilkan informasi tentang produk, seperti nama dan harga. Dalam topik ini, kami membuat galeri dan mengurutkan serta memfilter informasi menggunakan fungsi seperti Excel. Selain itu, bila item dipilih, batas ditempatkan di sekitar item.

Catatan

Topik ini menggunakan aplikasi tablet. Anda dapat menggunakan aplikasi seluler, namun Anda harus mengubah ukuran sebagian kontrol.

Prasyarat

• Daftar untuk Power Apps, lalu masuk menggunakan kredensial yang sama dengan yang Anda gunakan untuk mendaftar.
• Membuat aplikasi tablet dari templat, dari data, atau dari awal.
• Pelajari cara konfigurasi kontrol.
• Langkah-langkah ini menggunakan CreateFirstApp sebagai data input sampel, yang mencakup gambar .jpg. File zip mencakup file XML yang dapat dikonversi ke Excel. Jika tidak, Power Apps secara otomatis membaca file di file .zip dan mengimpor file dengan berhasil. Anda dapat mengunduh dan menggunakan data sampel ini, atau mengimpor data Anda sendiri.

Menampilkan data di galeri

1. Buat koleksi bernama Inventaris menggunakan data sampelnya. Langkah-langkah ini mencakup:

   1. Pada tab Sisipkan, pilih Kontrol, lalu pilih Impor.

      

   2. Atur properti OnSelect dari kontrol impor ke formula berikut:
      Kumpulkan(Inventaris, Import1.Data)

      

   3. Pilih tombol Impor Data untuk membuka Windows Explorer. Pilih CreateFirstApp.zip, lalu pilih Buka.

   4. Di menu File , pilih Koleksi. Kumpulan Inventaris terdaftar dengan data yang Anda impor:

      

      Anda baru saja membuat kumpulan Inventaris, yang berisi informasi tentang lima produk, termasuk gambar desain, nama produk, dan jumlah unit dalam stok.

      Catatan

      Kontrol impor digunakan untuk mengimpor data seperti Excel dan membuat koleksi. Kontrol impor mengimpor data saat Anda membuat aplikasi Anda, dan mempratinjau aplikasi Anda. Saat ini, kontrol impor tidak mengimpor data saat Anda memublikasikan aplikasi.

2. Pilih panah kembali untuk kembali ke desainer.

3. Di tab Sisipkan, klik atau ketuk Galeri, lalu klik atau ketuk galeri Horisontal.

   

4. Di panel kanan, klik atau ketuk pilihan di mana judul dan subjudul overlay grafis:

   

5. Atur properti Item dari galeri ke Inventaris.

   

6. Ubah nama galeri menjadi ProductGallery, dan pindahkan galeri sehingga tidak memblokir kontrol lainnya. Ubah ukuran galeri sehingga menampilkan tiga produk:

   

7. Di item pertama galeri, pilih label bawah:

   

   Catatan

   Bila Anda mengubah item pertama di galeri, Anda akan secara otomatis mengubah semua item lainnya di galeri.

8. Atur properti Teks dari label ke ekspresi berikut:
   ThisItem.UnitsInStock
   

   Bila Anda melakukannya, label menampilkan unit dalam stok untuk setiap produk:

Catatan

Secara default, properti Teks dari label atas diatur ke ThisItem.ProductName. Anda dapat mengubahnya ke item lain dalam koleksi Anda. Misalnya, jika koleksi Anda memiliki bidang ProductDescription atau Harga, Anda dapat mengatur label ke ThisItem.ProductDescription atau ThisItem.Price.

Dengan menggunakan langkah-langkah berikut, Anda mengimpor data yang mencakup gambar .jpg ke dalam koleksi. Anda lalu menambahkan galeri yang menampilkan data dan mengonfigurasikan label untuk menampilkan unit dalam stok untuk setiap produk.

Sorot item galeri yang Anda pilih

1. Pilih item apapun di galeri kecuali yang pertama. Tampilan ikon edit (pojok kiri atas). Pilih ikon edit:
   

2. Pada tab Sisipkan, pilih Bentuk, lalu pilih persegi panjang. Persegi panjang biru solid muncul di setiap item galeri.

3. Di tab Beranda, pilih Isi, lalu Tidak Isi.

4. Pilih Batas, pilih Gaya Batas, lalu pilih garis solid.

5. Pilih Batas lagi, dan atur ketebalan menjadi 3. Ubah ukuran persegi panjang sehingga mengelilingi galeri item. Item dalam galeri Anda sekarang memiliki batas biru dan akan terlihat seperti berikut:
   

6. Pada tab Bentuk, pilih Terlihat, lalu masukkan rumus berikut di Bilah Rumus:

   Jika(ThisItem.IsSelected, benar)

   Persegi panjang biru mengelilingi pilihan saat ini di galeri. Pilih beberapa item galeri untuk mengonfirmasi bahwa persegi panjang tersebut muncul di sekitar setiap item yang Anda pilih. Ingatlah, Anda juga dapat membuka Pratinjau untuk melihat dan menguji apa yang Anda buat.

Tip

Pilih persegi panjangnya, pilih Susun Ulang pada tab Beranda, lalu pilih Kirim ke Belakang. Menggunakan fitur ini, Anda dapat memilih item galeri tanpa batas pemblokiran apa pun.

Menggunakan langkah-langkah ini, Anda menambahkan batas di sekitar pilihan saat ini di galeri.

Urutkan dan filter gambar di galeri

Dalam langkah ini, kita akan mengurutkan item galeri dalam urutan naik dan turun. Juga, kami akan menambahkan kontrol penggeser ke 'filter' item galeri dengan unit dalam stok yang Anda pilih.

Urutkan dalam urutan naik atau turun

1. Pilih item apapun di galeri kecuali yang pertama.

2. Properti Item saat ini diatur ke Inventaris (nama koleksi Anda). Ubah ke berikut:

   Urutkan(Inventaris, ProductName)

   Saat Anda melakukannya, item di galeri diurutkan berdasarkan nama produk dalam urutan menaik:

   Coba urutan menurun. Atur properti Item dari galeri ke salah satu rumus berikut:

   Urutkan(Inventaris, ProductName, Menurun)

Menambahkan kontrol penggeser dan memfilter item di galeri

1. Tambahkan kontrol Penggeser (tab Sisipkan > Kontrol), ubah nama menjadi StockFilter, dan pindahkan ke bawah galeri.

2. Konfigurasikan penggeser agar pengguna tidak dapat menetapkannya ke nilai di luar rentang unit dalam stok:

   1. Pada tab Konten, pilih Min, lalu masukkan ekspresi berikut:
      Min(Inventory, UnitsInStock)
   2. Pada tab Konten, pilih Maks, lalu masukkan ekspresi berikut:
      Max(Inventory, UnitsInStock)

3. Pilih item apapun di galeri kecuali yang pertama. Atur properti Item dari galeri ke salah satu ekspresi berikut:
   Filter(Inventory, UnitsInStock<=StockFilter.Value)

4. Di Pratinjau, atur penggeser ke nilai yang berada di antara kuantitas tertinggi dan terendah di galeri. Selagi Anda menyesuaikan penggeser, galeri hanya menampilkan produk yang kurang dari nilai yang Anda pilih:
   

Sekarang, mari tambahkan ke filter kami:

1. Kembali ke desainer.
2. Pada tab Sisipkan, pilih Teks, pilih Teks Input, dan ganti nama kontrol baru ke NameFilter. Pindahkan kontrol teks ke bawah penggeser.
3. Atur properti Item dari galeri ke salah satu ekspresi berikut:
   Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
4. Di Pratinjau, atur penggeser ke 30, dan ketik huruf g di kontrol input teks. Galeri menunjukkan satu-satunya produk dengan kurang dari 30 unit dalam stok dan memiliki nama dengan huruf "g":
   

Tips dan Trik

• Bila memungkinkan, Anda dapat memilih tombol pratinjau () untuk melihat apa yang Anda buat dan mengujinya.
• Saat mendesain aplikasi Anda, Anda dapat mengembalikan ukuran kontrol dan memindahkannya di sekitar menggunakan klik-dan-tarik.
• Tekan ESC atau pilih X untuk menutup jendela pratinjau.
• Bila menggunakan galeri, pilih item pertama di galeri untuk mengubah semua item di galeri. Misalnya, pilih item pertama untuk menambahkan batas ke semua item di galeri.
• Untuk memperbarui properti dari galeri, pilih item di galeri kecuali yang pertama. Misalnya, pilih item kedua untuk memperbarui Item, ShowScrollbar, dan properti lainnya yang berlaku untuk galeri (bukan item di galeri).

Apa yang telah Anda Pelajari

Dalam topik ini, Anda:

• Membuat koleksi data impor yang mencakup gambar .jpg ke dalam koleksi tersebut, dan menampilkan data di galeri.
• Di dalam setiap gambar di Galeri, konfigurasikan label yang mencantumkan unit dalam stok untuk item tersebut.
• Menambahkan batas di sekitar item yang Anda pilih.
• Mengurutkan item berdasarkan nama produk dalam urutan naik dan turun.
• Menambahkan penggeser dan kontrol teks input untuk memfilter produk berdasarkan unit dalam stok dan nama produk.

Catatan

Apa bahasa dokumentasi yang Anda inginkan? Lakukan survei singkat. (perlu diketahui bahwa survei ini dalam bahasa Inggris)

Survei akan berlangsung kurang lebih selama tujuh menit. Tidak ada data pribadi yang dikumpulkan (pernyataan privasi).