Kongsi melalui

Tunjuk, isih dan tapis data dalam galeri aplikasi kanvas

Cipta galeri untuk menunjukkan imej dan teks mengenai beberapa produk dan jenis dan menapis maklumat tersebut.

Dalam Power Apps, anda boleh menggunakan galeri untuk menunjukkan beberapa item berkaitan, sama seperti yang anda lihat dalam katalog. Galeri yang hebat untuk menunjukkan maklumat mengenai produk, seperti nama dan harga. Dalam topik ini, kami mencipta galeri dan mengisih dan menapis maklumat menggunakan fungsi seperti Excel. Juga, apabila item dipilih, sempadan diletakkan di sekeliling item.

Nota

Topik ini menggunakan aplikasi tablet. Anda boleh menggunakan aplikasi telefon, tetapi anda akan perlu mengubah saiz sesetengah kawalan.

Prasyarat

  • Daftar untuk Power Apps, dan kemudian log masuk menggunakan kelayakan yang sama yang anda gunakan untuk mendaftar.
  • Cipta apl tablet daripada templat, daripada data atau daripada awal.
  • Ketahui cara mengkonfigurasi kawalan.
  • Langkah-langkah ini menggunakan CreateFirstApp sebagai data input sampel, yang termasuk imej .jpg. Fail zip termasuk fail XML yang boleh ditukar ke Excel. Jika tidak, Power Apps secara automatik membaca fail dalam fail .zip dan mengimportnya dengan jayanya. Anda boleh memuat turun dan menggunakan data sampel ini, atau mengimport sendiri.

  1. Cipta koleksi bernama Inventori menggunakan data sampel. Langkah-langkah termasuk:

    1. Pada tab Selitkan , pilih Kawalan, dan kemudian pilih Import:

      Sisipkan kawalan

    2. Setkan sifat OnSelect kawalan import kepada formula berikut:
      Kumpulkan (Inventori, Import1.Data)

      Sifat OnSelect

    3. Pilih butang Import Data untuk membuka Windows Explorer. Pilih CreateFirstApp.zip dan pilih Buka.

    4. Dalam menu Fail , pilih Koleksi. Koleksi Inventori yang akan disenaraikan dengan data carta yang anda import:

      Koleksi - fail

      Anda baru sahaja mencipta koleksi Inventori, yang mengandungi maklumat mengenai lima produk, termasuk imej reka bentuk, nama produk, dan bilangan unit dalam stok.

      Nota

      Kawalan Import digunakan untuk mengimport data seperti Excel dan mencipta koleksi. Kawalan import data mengimport apabila anda mencipta aplikasi anda dan pratonton aplikasi anda. Pada masa ini, kawalan import tidak mengimport data apabila anda menerbitkan aplikasi anda.

  2. Pilih anak panah kembali untuk kembali ke senarai pereka.

  3. Pada tab Selitkan , klik atau ketik Galeri dan kemudian klik atau ketik galeri mendatar .

    Melintang - galeri

  4. Dalam anak tetingkap sebelah kanan, klik atau ketik pilihan yang tajuk dan sari kata grafik:

    Tataletak

  5. Tetapkan sifat Item galeri kepada Inventori:

    Tataletak galeri

  6. Namakan semula galeri kepada ProductGallery dan alihkan galeri supaya ia tidak menyekat kawalan lain. Ubah saiz galeri supaya ia menunjukkan tiga produk:

    Namakan semula galeri

  7. Dalam item pertama galeri, pilih label bawah:

    Aplikasi dengan galeri

    Nota

    Apabila anda mengubah item pertama dalam sebarang galeri, anda akan mengubah semua item lain secara automatik dalam galeri itu.

  8. Tetapkan sifat Teks label kepada ungkapan berikut:
    ItemIni.UnitDalamStok

    Apabila anda melakukan ini, label menunjukkan unit dalam stok untuk setiap produk:

Stok untuk setiap produk

Nota

Secara lalai, sifat Teks label atas ditetapkan kepada ThisItem.ProductName. Anda boleh mengubahnya kepada item lain dalam koleksi anda. Contohnya, jika koleksi anda mempunyai medan ProductDescription atau Price , anda boleh mengesetkan label kepada ThisItem.ProductDescription atau ThisItem.Price.

Menggunakan langkah ini, anda mengimport data yang termasuk imej .jpg ke dalam koleksi. Anda kemudian menambahkan galeri yang memaparkan data dan mengkonfigurasi label untuk menunjukkan unit dalam stok untuk setiap produk.

  1. Pilih mana-mana item dalam galeri kecuali yang pertama. Papar ikon edit (penjuru kiri atas). Pilih ikon edit:
    Sunting

  2. Pada tab Selitkan , pilih Bentuk, dan kemudian pilih segi empat tepat. Satu segi empat berwarna biru kelihatan dalam setiap item galeri.

  3. Pada tab Laman Utama , pilih Isi, dan kemudian pilih Tiada Pengisian.

  4. Pilih Sempadan, pilih Gaya Sempadan, dan kemudian pilih garis pepejal.

  5. Pilih Sempadan sekali lagi, dan tetapkan ketebalan kepada 3. Saiz segi empat tepat supaya ia mengelilingi item galeri. Item dalam galeri anda kini mempunyai sempadan biru dan kelihatan serupa dengan yang berikut:
    Pilih sempadan

  6. Pada tab Bentuk , pilih Boleh Dilihat, dan kemudian masukkan formula berikut dalam Bar Formula:

    If(ThisItem.IsSelected, true)

    Segi empat tepat biru mengelilingi pilihan semasa di galeri. Pilih beberapa item galeri untuk mengesahkan bahawa segi empat tepat kelihatan pada setiap item yang anda pilih. Ingat, anda juga boleh membuka PratontonButang pratonton untuk melihat dan menguji perkara yang anda cipta.

Tip

Pilih segi empat tepat, pilih Susun Semula pada tab Laman Utama , dan kemudian pilih Hantar ke Kembali . Menggunakan ciri ini, anda boleh memilih item galeri tanpa sempadan menghalang apa-apa.

Menggunakan langkah ini, anda menambah sempadan dalam pemilihan semasa dalam galeri.

Dalam langkah ini, kami akan mengisih item galeri dalam urutan menaik dan menurun. Selain itu, kami akan menambahkan kawalan gelangsar kepada item galeri 'penapis' oleh unit dalam stok yang anda pilih.

Isih mengikut urutan menaik atau menurun

  1. Pilih mana-mana item dalam galeri kecuali yang pertama.

  2. Sifat Item pada masa ini ditetapkan kepada Inventori (nama koleksi anda). Menukarnya kepada perkara berikut:

    Sort(Inventory, ProductName)

    Apabila anda melakukan ini, item dalam galeri disusun mengikut nama produk dalam susunan menaik: Galeri disusun

    Cuba urutan menurun. Tetapkan sifat Item galeri kepada formula berikut:

    Sort(Inventory, ProductName, Descending)

  1. Tambah kawalan Gelangsar (Masukkan tab >Kawalan), namakan semula kepada StockFilter dan alihkannya di bawah galeri.

  2. Konfigurasikan gelangsar supaya pengguna tidak boleh menetapkannya kepada nilai di luar julat unit dalam stok:

    1. Pada tab Kandungan , pilih Min, dan kemudian masukkan ungkapan berikut:
      Min(Inventory, UnitsInStock)
    2. Pada tab Kandungan , pilih Max, dan kemudian masukkan ungkapan berikut:
      Max(Inventory, UnitsInStock)

  3. Pilih mana-mana item dalam galeri kecuali yang pertama. Tetapkan sifat Item galeri kepada ungkapan berikut:
    Filter(Inventory, UnitsInStock<=StockFilter.Value)

  4. Dalam Pratonton, laraskan gelangsar kepada nilai yang berada di antara kuantiti tertinggi dan terendah dalam galeri. Apabila anda melaraskan gelangsar, galeri menunjukkan hanya produk yang kurang daripada nilai yang anda pilih:
    Pratonton galeri dengan nilai gelangsar

Sekarang, mari kita tambah ke penapis kami:

  1. Kembali kepada pereka.
  2. Pada tab Selitkan , pilih Teks, pilih Teks Input dan namakan semula kawalan baharu kepada Penapis Nama. Gerakkan kawalan teks di bawah gelangsar.
  3. Tetapkan sifat Item galeri kepada ungkapan berikut:
    Filter(Inventory, UnitsInStock<=StockFilter.Value && NameFilter.Text in ProductName)
  4. Dalam Pratonton, tetapkan gelangsar kepada 30 dan taipkan huruf g dalam kawalan input teks. Galeri menunjukkan satu-satunya produk dengan stok kurang daripada 30 unit dan mempunyai nama dengan huruf "g":
    Pratonton gelangsar dengan 30

Petua dan Cara

  • Pada bila-bila masa, anda boleh memilih butang pratonton (Imej butang pratonton) untuk melihat perkara yang anda buat dan mengujinya.
  • Apabila mereka bentuk aplikasi anda, anda boleh saiz semula kawalan dan memindahkannya menggunakan klik dan seret.
  • Tekan ESC atau pilih X untuk menutup tetingkap pratonton.
  • Apabila menggunakan galeri, pilih item pertama dalam Galeri untuk mengubah semua item dalam galeri. Sebagai contoh, pilih item pertama untuk menambah sempadan ke semua item dalam galeri.
  • Untuk mengemas kini sifat galeri, pilih mana-mana item dalam galeri kecuali yang pertama. Contohnya, pilih item kedua untuk mengemas kini Item,ShowScrollbar dan sifat lain yang digunakan pada galeri (bukan item dalam galeri).

Perkara yang anda pelajari

Dalam topik ini, anda:

  • Mencipta koleksi, data yang diimport yang termasuk imej .jpg ke dalam koleksi tersebut dan menunjukkan data dalam galeri.
  • Di bawah setiap imej dalam galeri, mengkonfigurasi label yang menyenaraikan unit dalam stok untuk item tersebut.
  • Tambah sempadan di sekeliling item yang anda pilih.
  • Diisih item mengikut nama produk dalam urutan menaik dan menurun.
  • Tambah gelangsar dan kawalan teks input untuk menapis produk mengikut unit dalam stok dan nama produk.