Membuat aplikasi kanvas yang terintegrasi dengan SharePoint dari awal untuk menampilkan, mengedit, menambahkan, dan menghapus item di daftar dengan Microsoft Lists

Dalam Artikel skenario ini, Anda akan mempelajari cara membuat aplikasi dengan fungsi formulir SharePoint dari awal. Aplikasi ini akan mendemonstrasikan cara melihat, mengedit, menambahkan, dan menghapus item daftar menggunakan aplikasi Canvas tanpa mengunjungi situs SharePoint.

Catatan

Untuk rincian lebih lanjut tentang skenario yang berbeda yang bekerja dengan formulir SharePoint dan contoh tambahan, buka Ikhtisar skenario SharePoint.

Prasyarat

• Anda harus memiliki akses ke situs SharePoint untuk membuat daftar dan item daftar.
• Anda harus berpengetahuan tentang membuat dan mengkonfigurasi Daftar.

Rincian skenario

Tujuan dari skenario ini adalah untuk menunjukkan cara membuat aplikasi Canvas dari awal untuk bekerja dengan Daftar. Di akhir contoh demo ini, Anda dapat melakukan tugas berikut dari dalam aplikasi Canvas tanpa perlu mengakses Daftar atau itemnya:

• Lihat semua item dari Daftar.
• Mencari item dalam Daftar berdasarkan nilai teks pada kolom tertentu.
• Pilih item daftar.
• Edit item daftar.
• Buat item daftar baru.
• Hapus item daftar.

Skenario ini merupakan ilustrasi dasar kemampuan aplikasi Canvas saat diintegrasikan dengan SharePoint. Untuk menyempurnakan tata letak dengan desain yang disempurnakan atau layar tambahan, buka artikel berikut:

• Menambahkan dan mengonfigurasi kontrol
• Menambahkan dan mengonfigurasikan layar
• Memahami formulir, tata letak, dan kartu

Penting

Contoh dalam skenario ini membuat aplikasi sampel untuk melihat, mengedit, menambah, dan menghapus item daftar. Anda dapat mengubah pendekatan untuk menyesuaikan aplikasi secara berbeda berdasarkan pilihan atau tujuan bisnis Anda. Bila Anda menyesuaikan aplikasi dengan nama kustom untuk kontrol, pastikan Anda menggunakan nama kontrol yang benar dalam rumus saat mengikuti langkah dalam contoh ini.

Contoh

Contoh skenario ini akan memandu Anda melewati langkah-langkah untuk membuat aplikasi dan menghubungkannya ke Daftar untuk menampilkan, mengedit, menambah, dan menghapus item daftar.

Langkah 1 – Membuat daftar menggunakan Microsoft Lists

Buat Daftar dengan kolom dan item daftar. Dalam skenario ini, kami menggunakan daftar dengan kolom berikut dan item daftar:

Catatan

Kedua kolom adalah satu baris teks.

Langkah 2 – Buat Aplikasi Kanvas Kosong

Membuat aplikasi kanvas kosong.

Langkah 3 – Sambungkan aplikasi ke SharePoint

1. Dari panel kiri, pilih Sumber data.

   

2. Pilih sumber data SharePoint. Anda juga dapat mencari nama di kotak pencarian.

   

3. pilih Tambahkan sambungan.

   

4. Pilih jenis sambungan. Anda dapat terhubung ke SharePoint Online atau situs lokal SharePoint dengan gateway data bila dikonfigurasi. Skenario ini tersambung ke situs SharePoint online.

   

5. Pilih situs SharePoint yang memiliki daftar yang Anda buat sebelumnya.

   

6. Pilih Daftar yang Anda buat. Skenario ini menggunakan daftar bernama bentuk.

   

7. Pilih Sambungkan. Sumber data ditambahkan ke aplikasi.

   

Langkah 4-tambahkan data tabel untuk melihat item daftar

1. Pilih + (Masukkan) dari panel kiri.

   

2. Perluas tata letak.

3. Memilih tabel data.

   

4. Pilih sumber data sebagai sambungan SharePoint.

   

5. Pindahkan tabel data ke kanan bawah di dalam layar untuk membuat ruang untuk komponen tambahan.

   

Langkah 5-menambahkan kemampuan untuk mencari dan memilih item

1. Masukkan kontrol input teks ke kanvas, dan Pindahkan di bawah daftar drop-down.

   

2. Perbarui properti default kotak pencarian ke nilai Cari berdasarkan bentuk.

   

3. Masukkan kontrol kotak daftar ke kanvas, dan Pindahkan di bawah kontrol input teks yang ditambahkan di langkah sebelumnya.

   

4. Dari sisi kanan layar studio, atur properti item dari kontrol kotak Daftar ke Daftar bentuk untuk contoh ini.

   

5. Tetapkan properti nilai untuk kontrol kotak Daftar ke bentuk dan bukan warna untuk contoh ini.

   

6. Perbarui properti item kotak daftar yang ditambahkan pada langkah sebelumnya ke rumus berikut:

   Filter([@Shapes], StartsWith(Shape, TextInput1.Text))
   

   

   Rumus berisi fungsi berikut:

   • Filter () -digunakan dalam rumus ini untuk memfilter item di kotak daftar berdasarkan parameter yang ditentukan. [@Shapes] di fungsi ini menentukan sumber data filter.
   • StartsWith() -digunakan dalam rumus ini untuk memfilter item daftar berdasarkan kolom bentuk yang diawali dengan karakter yang dimasukkan dalam kontrol TextInput1 yang ditambahkan sebelumnya.

Langkah 6-Tambahkan kemampuan mengedit item

1. Masukkan kontrol Edit formulir.

   

2. Dari sisi kanan layar Studio, atur properti sumber data untuk kontrol edit formulir ke bentuk.

   

3. Pilih Edit bidang untuk Edit kontrol formulir dan Hapus bidang lainnya seperti lampiran, jika ada.

   

4. Pastikan bidang bentuk dan warna ditampilkan. Jika tidak, tambahkan menggunakan Tambah bidang.

   

5. Atur ulang tata letak layar untuk memastikan kontrol Edit formulir terlihat dan tidak menimpa kontrol lainnya.

   

6. Atur properti onselect dari kontrol kotak Daftar ke fungsi berikut:

   Set(TextSelected,1)
   

   

   Fungsi set() mengatur variabel baru bernama textselected ke nilai 1 bila nilai dalam kotak Daftar dipilih. Variabel textselected digunakan dalam skenario ini sebagai bendera untuk mengontrol tindakan dan perilaku kemampuan tambah, Edit, dan Hapus seperti yang akan Anda lihat di bagian berikut.

7. Atur properti Item dari kontrol edit formulir ke rumus berikut:

   If(TextSelected=1,ListBox1.Selected,DataTable1.Selected)
   

   

   Fungsi if() memeriksa lebih dulu apakah nilai variabel textselected adalah 1 atau tidak. Jika ya, formulir Edit menampilkan item yang dipilih dari kotak daftar. Jika tidak, formulir Edit menampilkan item yang dipilih dari tabel data.

8. Masukkan tombol.

   

9. Dari sisi kanan layar studio, atur properti text pada tombol yang ditambahkan pada langkah sebelumnya untuk menyimpan.

   

10. Atur properti onselect dari tombol Simpan ke rumus berikut:

    SubmitForm(Form1);
    Set(TextSelected,0)
    

    

    Rumus berisi fungsi berikut:

    • SubmitForm() -digunakan dalam rumus ini untuk mengirimkan formulir Edit dan menyimpan nilai ke Daftar.
    • Set () -me-reset variabel textselected kembali ke o sehingga item baru dapat dipilih dari kotak daftar.

11. Masukkan kontrol label teks.

    

12. Perbarui properti text untuk kontrol label teks yang ditambahkan di langkah sebelumnya untuk mengedit nilai untuk item, pilih dari tabel, atau Cari.

    

13. Atur ulang kontrol di layar untuk mengurutkan kontrol Edit.

    

Langkah 7-Tambahkan kemampuan menambahkan item

1. Masukkan tombol.

2. Atur ulang kontrol di layar untuk memastikan tombol terlihat.

3. Perbarui properti text pada tombol yang ditambahkan pada langkah sebelumnya untuk menambahkan.

4. Atur properti onselect dari tombol Tambah ke fungsi berikut:

   NewForm(Form1)
   

   

   Fungsi Newform() membersihkan kontrol formulir Edit yang ditambahkan pada formulir bernama Form1 sehingga Anda dapat menambahkan item daftar baru.

Langkah 8-Tambahkan kemampuan menghapus item

1. Masukkan tombol.

2. Pindahkan tombol yang ditambahkan di langkah sebelumnya di bawah tombol Simpan.

3. Perbarui properti text pada tombol yang ditambahkan pada langkah sebelumnya untuk Menghapus.

4. Atur properti onselect dari tombol Hapus ke rumus berikut:

   Remove([@Shapes], If(TextSelected=1,ListBox1.Selected,DataTable1.Selected));
   Set(TextSelected,0)
   

   

   Rumus berisi fungsi berikut:

   • Remove() – digunakan dalam rumus ini untuk menghapus item daftar yang dipilih.
   • If() – memeriksa lebih dulu apakah nilai variabel textselected adalah 1 atau tidak. Jika ya, tombol Hapus menghapus item yang dipilih dari kotak daftar. Jika tidak, tombol Hapus menghapus item yang dipilih dari kontrol tabel data.
   • Set () -me-reset variabel textselected kembali ke o sehingga item baru dapat dipilih dari kotak daftar.

Sekarang Anda memiliki semua komponen aplikasi yang dikonfigurasi, pastikan layar terlihat seperti contoh berikut:

Langkah 9-Simpan aplikasi

Sekarang aplikasi memiliki kemampuan melihat, mengedit, menambah, dan menghapus ditambahkan, simpan aplikasi.

1. Pilih menu file.

2. Pilih Simpan.

3. Saat menyimpan untuk pertama kalinya, pilihan Simpan akan membuat Anda menyimpan sebagai. Pilih Simpan untuk menyimpan aplikasi ke awan.

   

4. Tutup Power Apps Studio.

Langkah 10-Uji aplikasi

1. Tuju Power Apps.

2. Pilih Aplikasi.

3. Pilih aplikasi yang dibuat.

   

4. Uji komponen aplikasi.

   

   Tip

   Anda dapat dengan cepat melihat pratinjau perilaku komponen menggunakan tombol Alt dan mouse klik kiri saat mengedit aplikasi di dalam Power Apps Studio.

   Contohnya, alih-alih memilih pratinjau aplikasi dari kanan atas, atau F5 dari papan ketik yang menjalankan aplikasi di pratinjau, tetap tombol Alt pada keyboard ditekan, lalu pilih baris dari tabel data untuk mengubah kontrol Edit formulir ke baris yang dipilih seolah-olah aplikasi berjalan dalam pratinjau.

   

   Selain itu, tetap tekan tombol Alt di keyboard dan Anda dapat melanjutkan untuk menjalankan pratinjau di dalam Power Apps Studio. Misalnya, memilih beberapa komponen untuk tindakan atau pemeriksaan yang berbeda.

Langkah berikutnya

Jika mengedit aplikasi, Anda harus memublikasikan perubahan agar dapat dilihat orang lain.

Setelah aplikasi siap digunakan, bagikan aplikasi.

Lihat juga

• Menambahkan dan mengonfigurasi kontrol
• Menambahkan dan mengonfigurasikan layar
• Memahami formulir, tata letak, dan kartu
• Referensi rumus
• Mengontrol referensi

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).