Membuat kartu daftar belanja

Dalam tutorial ini, Anda akan membuat kartu yang menampilkan daftar belanja dan memungkinkan Anda menambahkan item. Anda akan menggunakan perancang kartu, variabel, dan Power Fx.

Di akhir tutorial, kartu daftar belanja Anda akan terlihat seperti contoh berikut:

Cuplikan layar kartu daftar belanja yang sudah selesai.

Prasyarat

Membuat kartu

  1. Masukkan Power Apps dan pilih lingkungan Anda.

  2. Di panel kiri, pilih Kartu. Jika item tidak ada di panel pada panel sisi, pilih …Lainnya, lalu pilih item yang diinginkan.

  3. Pilih + Buat kartu.

  4. Di bawah Nama kartu, ketik SimpleShoppingCard, lalu pilih Buat.

  5. Pilih teks Judul kartu Anda ada di sini. Di panel properti label teks, atur Teks ke Daftar Belanja.

  6. Pilih teks Tambahkan dan hapus elemen untuk menyesuaikan kartu baru Anda. Di panel properti label teks, atur Teks untuk Menggunakan kotak di bawah ini untuk menambahkan item ke daftar.

Menambahkan variabel

Daftar belanja akan menyimpan item individual dalam baris teks terpisah. Ini terlihat seperti tabel dengan satu kolom, dengan satu item belanjaan di setiap baris. Itu menunjukkan Anda harus membuat variabel tabel untuk menyimpan daftar Anda.

  1. Di panel kiri, pilih Variabel.

  2. Pilih + Variabel baru.

  3. Di jendela Variabel baru, masukkan MyGroceryList di bawah Nama . Atur Tipe ke Tabel.

  4. Pilih kurung kurawal di sebelah kanan nilai Default dan masukkan "" di antara tanda kurung. Ini menunjukkan bahwa tabel kita menyimpan nilai teks dalam kolom yang secara implisit disebut Nilai

  5. Pilih Simpan.

    Cuplikan layar panel properti variabel MyGroceryList.

Menambahkan daftar ke kartu

  1. Di panel kiri, pilih Sisipkan.

  2. Di panel alat, pilih Tampilan untuk memperluas kategori, lalu pilih Label teks.

  3. Di panel properti label teks, pilih tab Tingkat Lanjut .

  4. Atur Ulangi untuk setiap ke MyGroceryList.

    Cuplikan layar panel properti tingkat lanjut label teks, dengan MyGroceryList di Ulangi untuk setiap properti.

    Mengatur Pengulangan label teks untuk setiap properti mengulangi label teks untuk setiap item dalam tabel yang ditentukan. Dalam contoh ini, tabel, MyGroceryList, adalah variabel yang Anda buat. Dengan kata lain, label teks terpisah dibuat di kartu untuk setiap item dalam daftar belanjaan.

  5. Pilih tab Properti . Atur Teks ke ThisItem.Value.

    Menetapkan variabel ThisItem.Value yang ditentukan sistem ke label teks menampilkan nilai item saat ini dalam MyGroceryList array sebagai teks label. Array adalah istilah lain untuk variabel tabel. Anda dapat memasukkan nama variabel di bilah rumus atau panel properti.

    Cuplikan layar nama variabel yang dimasukkan dalam properti Teks label teks.

Menambahkan kotak input

Daftar yang Anda buat kosong, jadi pada langkah terakhir, Anda akan memberi pengguna kemampuan untuk menambahkan item.

  1. Di panel kiri, pilih Sisipkan.

  2. Di panel alat, pilih Input untuk memperluas kategori, lalu pilih Input teks.

  3. Di panel properti input teks, atur Name ke NewItem dan atur Label ke New Item: . ·

    Cuplikan layar nama variabel yang dimasukkan dalam properti Nama dan Label dari kotak teks input.

    Properti Name memungkinkan Anda merujuk ke kontrol dalam Power Fx ekspresi. Itu harus satu kata, tanpa spasi atau karakter khusus. Properti Label ditampilkan di kartu. Nama dan label kontrol tidak harus serupa, seperti di sini, tetapi menggunakan nama yang mirip membuatnya lebih mudah untuk melacak kontrol.

Menambahkan tombol Power Fx

  1. Di panel kiri, pilih Sisipkan.

  2. Di panel alat, pilih Input untuk memperluas kategori, lalu pilih Tombol.

  3. Di panel properti tombol, atur Judul ke Tambahkan Item.

  4. Di panel properti, pilih PowerFx untuk menempatkan kursor Anda di bilah rumus.

  5. Ketikkan ekspresi berikut Power Fx di bilah rumus: Collect(MyGroceryList,Value {: NewItem})

    Ekspresi ini menggunakan Power Fx fungsi Kumpulkan untuk menambahkan nilai input pengguna, NewItem, ke MyGroceryList variabel tabel di kolom Nilai implisit . Karena ekspresi terikat ke properti OnSelect tombol, ekspresi berjalan saat pengguna memilih tombol.

    Cuplikan Power Fx layar ekspresi di bilah rumus, ditetapkan ke properti OnSelect tombol.

Uji kartu

Anda harus selalu menyimpan perubahan Anda sebelum Anda memainkan kartu. Pilih Simpan, lalu pilih Putar ·.

Uji kartu Anda dengan menambahkan beberapa item ke daftar belanjaan.

Langkah berikutnya

Pelajari cara membuat kartu yang lebih kompleks dengan Microsoft Dataverse konektor.