Ikhtisar komponen kanvas

Catatan

• Bagian ini menjelaskan komponen kanvas yang mencakup kemampuan ekstensibilitas UI kode rendah. Pengembang professional juga dapat menggunakan Power Apps component framework untuk membuat komponen kode.
• Komponen kanvas juga dapat digunakan di aplikasi berdasarkan model dengan menggunakan halaman kustom dan pustaka komponen. Informasi selengkapnya: Tambahkan komponen kanvas ke halaman kustom untuk aplikasi berdasarkan model

Komponen adalah blok bangunan yang dapat digunakan kembali untuk aplikasi kanvas sehingga pembuat aplikasi dapat membuat kontrol kustom untuk digunakan di dalam aplikasi, atau di seluruh aplikasi menggunakan pustaka komponen. Komponen dapat menggunakan fitur lanjutan seperti properti kustom dan mengaktifkan kemampuan yang kompleks. Artikel ini memperkenalkan konsep komponen dan beberapa contoh.

Komponen berguna dalam membangun aplikasi yang lebih besar yang memiliki pola kontrol yang sama. Jika Anda memperbarui definisi komponen di dalam aplikasi, semua instans di aplikasi ini mencerminkan perubahan Anda. Komponen juga mengurangi duplikasi dari upaya dengan meniadakan perlunya kontrol salin/tempel dan meningkatkan performa. Komponen juga membantu membuat pengembangan kolaboratif dan menstandardisasi tampilan-dan-rasa dalam suatu organisasi saat Anda menggunakan pustaka komponen.

Tonton video ini untuk mempelajari cara menggunakan komponen di aplikasi kanvas:

Komponen di aplikasi kanvas

Anda dapat membuat komponen dari dalam aplikasi seperti yang dijelaskan dalam artikel ini, atau dengan membuat komponen baru di dalam pustaka komponen. Pustaka komponen harus digunakan untuk persyaratan penggunaan komponen di beberapa layar aplikasi. Anda juga dapat menyalin komponen yang ada ke pustaka komponen yang ada atau yang baru.

Untuk membuat komponen dalam aplikasi, buka Tampilan Hierarki, pilih tab Komponen, lalu pilih Komponen baru:

Memilih Komponen baru membuka kanvas kosong. Anda dapat menambahkan kontrol sebagai bagian dari definisi komponen pada kanvas. Jika Anda mengedit komponen di kanvas, Anda akan memperbarui instans komponen yang sama di layar aplikasi lainnya. Aplikasi yang menggunakan kembali komponen yang telah dibuat juga dapat menerima pembaruan komponen setelah Anda mempublikasikan perubahan komponen.

Anda dapat memilih komponen dari daftar komponen yang ada di panel kiri setelah memilih layar. Jika Anda memilih komponen, Anda menyisipkan instans komponen tersebut ke dalam layar, sama seperti saat Anda menyisipkan kontrol.

Komponen yang tersedia di dalam aplikasi tercantum dalam kategori Kustom dalam daftar komponen pada tampilan hierarki. Komponen yang diimpor dari pustaka komponen tercantum dalam kategori Komponen pustaka:

Catatan

Komponen yang dibahas dalam artikel ini berbeda dengan Power Apps component framework yang memungkinkan pengembang dan pembuat untuk membuat komponen kode untuk aplikasi berbasis model dan kanvas. Untuk informasi lebih lanjut, buka Gambaran umum Power Apps component framework.

Properti kustom

Komponen dapat menerima nilai input dan memancarkan data jika Anda membuat satu atau beberapa properti kustom. Skenario ini adalah skenario tingkat lanjut dan mengharuskan Anda memahami formula dan kontrak yang mengikat.

Catatan

Fitur eksperimental untuk properti komponen yang disempurnakan menyediakan lebih banyak opsi untuk properti, termasuk fungsi dan fungsi perilaku. Untuk informasi selengkapnya, lihat Properti komponen kanvas (eksperimental)

Properti input adalah cara komponen menerima data yang akan digunakan dalam komponen. Properti input muncul di tab Properti panel sisi kanan jika sebuah instans komponen dipilih. Anda dapat mengonfigurasi properti input dengan ekspresi atau formula, sama seperti Anda mengonfigurasi properti standar di kontrol lainnya. Kontrol lainnya memiliki properti input, misalnya properti Default kontrol Input teks.

Properti output digunakan untuk memancarkan data atau status komponen. Misalnya, properti Dipilih pada kontrol Galeri adalah properti output. Saat Anda membuat properti output, Anda dapat menentukan kontrol lainnya yang dapat merujuk ke status komponen.

Berikut ini adalah petunjuk yang menjelaskan lebih lanjut konsep ini.

Membuat contoh komponen

Dalam contoh ini, Anda akan membuat komponen menu yang mirip dengan grafis berikut. Dan Anda dapat mengubah teks nantinya untuk digunakan di beberapa layar, aplikasi atau keduanya:

Catatan

Sebaiknya gunakan pustaka komponen saat membuat komponen untuk digunakan ulang. Memperbarui komponen di dalam aplikasi hanya membuat pembaruan komponen tersedia di dalam aplikasi. Saat menggunakan pustaka komponen, Anda akan diminta untuk memperbarui komponen jika komponen di dalam pustaka diperbarui dan dipublikasikan.

Membuat komponen baru

1. Membuat aplikasi kanvas kosong.

2. Dalam Tampilan Hierarki, pilih Komponen, lalu pilih Komponen baru untuk membuat komponen baru.

   

3. Pilih komponen baru di panel kiri, pilih elipsis (...), lalu pilih Ganti nama. Ketik atau tempel nama sebagai MenuComponent.

4. Di panel kanan, atur lebar komponen 150 dan tingginya 250, lalu pilih Properti kustom baru. Anda juga dapat mengatur tinggi dan lebar ke nilai lain yang sesuai.

   

5. Di kotak Nama tampilan, Nama properti, dan Deskripsi, ketik atau tempel teks sebagai Item.

   

   Jangan sertakan spasi di nama properti karena Anda akan merujuk ke komponen dengan nama ini saat Anda menulis formula. Misalnya, ComponentName.PropertyName.

   Nama tampilan muncul pada tab Properti panel kanan jika Anda memilih komponen. Nama tampilan deskriptif akan membantu Anda dan pembuat lainnya memahami tujuan properti ini. Deskripsi ditampilkan di tooltip jika anda mengarahkan kursor ke nama tampilan properti ini di tab Properti.

6. Di daftar Jenis data, pilih Tabel, lalu pilih Buat.

   

   Properti Item diatur ke nilai default berdasarkan jenis data yang Anda tentukan. Anda dapat mengaturnya ke nilai yang sesuai dengan kebutuhan Anda. Jika Anda menentukan jenis data Tabel atau Rekaman, Anda mungkin ingin mengubah nilai properti Item agar sesuai dengan skema data yang akan Anda masukkan ke komponen. Dalam kasus ini, Anda akan mengubahnya ke daftar string.

   Anda dapat menentukan nilai properti di bilah formula jika Anda memilih nama properti pada tab Properti panel kanan.

   

   Saat grafis berikutnya ditampilkan, Anda juga dapat mengedit nilai properti pada tab Lanjutan pada panel kanan.

7. Atur properti Item komponen ke formula ini:

   Table({Item:"SampleText"})
   

   

8. Di dalam komponen, sisipkan kontrol Galeri vertikal kosong dan pilih Tata letak pada panel properti sebagai Judul.

9. Pastikan bahwa daftar properti menampilkan properti Item (sebagaimana adanya secara default). Lalu atur nilai properti tersebut ke ekspresi ini:

   MenuComponent.Items
   

   Dengan cara ini, properti Item dari kontrol Galeri membaca dan tergantung pada properti input Item komponen.

10. Opsional - mengatur kontrol Galeri pada properti BorderThickness ke 1 dan properti TemplateSize ke 50. Anda juga dapat memperbarui nilai untuk ketebalan batas dan ukuran templat ke nilai lain yang sesuai.

Tambahkan komponen ke layar

Selanjutnya, Anda akan menambahkan komponen ke layar dan menentukan tabel string untuk komponen yang akan ditampilkan.

1. Pada panel kiri, pilih daftar layar, lalu pilih layar default.

   

2. Pada tab Sisipkan, buka menu Komponen, lalu pilih MenuComponent.

   

   Komponen baru diberi nama MenuComponent_1 secara default.

3. Atur properti Item dari MenuComponent_1 ke formula ini:

   Table({Item:"Home"}, {Item:"Admin"}, {Item:"About"}, {Item:"Help"})
   

   Instans ini serupa dengan grafis ini, namun Anda dapat menyesuaikan teks dan properti lain dari setiap instans.

   

Membuat dan menggunakan properti output

Sejauh ini, Anda telah membuat komponen dan menambahkannya ke aplikasi. Selanjutnya, Anda akan membuat properti output yang mencerminkan item yang dipilih pengguna di menu.

1. Buka daftar komponen, lalu pilih MenuComponent.

2. Di panel kanan, pilih tab Properti, lalu pilih Properti kustom baru.

3. Di kotak Nama tampilan, Nama properti dan Deskripsi, ketik atau tempel Dipilih.

4. Di dalam Jenis properti, pilih Output, lalu pilih Buat.

   

5. Pada tab Lanjutan, atur nilai properti Dipilih ke ekspresi ini, sesuaikan angka di nama galeri jika perlu:

   Gallery1.Selected.Item
   

   

6. Pada layar default aplikasi, tambahkan label, dan atur properti Teks ke ekspresi ini, sesuaikan angka pada nama komponen jika perlu:

   MenuComponent_1.Selected
   

   MenuComponent_1 adalah nama default suatu instans, bukan nama dari definisi komponen. Anda dapat mengubah nama setiap instans.

7. Sambil menekan terus tombol Alt, pilih setiap item di menu.

   Kontrol Label mencerminkan item menu yang Anda pilih terakhir.

Scope

Properti input dan output dengan jelas menentukan antarmuka antara komponen dan aplikasi host- nya. Secara default, komponen dienkapsulasi sehingga lebih mudah menggunakan kembali komponen di seluruh aplikasi, yang memerlukan penggunaan properti untuk meneruskan informasi di dalam dan luar komponen. Pembatasan cakupan menjaga kontrak data komponen sederhana dan kohesif, dan membantu mengaktifkan pembaruan definisi komponen—khususnya di seluruh aplikasi dengan pustaka komponen.

Namun ada saat-saat ketika komponen mungkin ingin berbagi sumber data atau variabel dengan hostnya. Terutama bila komponen hanya ditujukan untuk digunakan di satu aplikasi tertentu. Untuk kasus ini, Anda dapat secara langsung mengakses informasi tingkat aplikasi dengan mengaktifkan pengalih akses cakupan aplikasi dalam panel properti komponen:

Bila Akses cakupan aplikasi diaktifkan, berikut ini dapat diakses dari dalam komponen:

• Variabel global
• Koleksi
• Kontrol dan komponen pada layar, seperti kontrol TextInput
• Sumber data tabular, seperti tabel Dataverse

Saat pengaturan ini dimatikan, tidak satu pun di atas tersedia untuk komponen. Fungsi Set dan Collect masih tersedia tetapi variabel dan koleksi yang dihasilkan dicakup ke instance komponen dan tidak dibagikan dengan aplikasi.

Sumber data non-tabular, seperti Azure Blob Storage atau konektor kustom, tersedia, baik pengaturan ini diaktifkan maupun tidak aktif.Pikirkan sumber data ini lebih seperti referensi sumber daya lingkungan daripada sumber daya aplikasi.Saat komponen dibawa ke aplikasi dari pustaka komponen, sumber data dari lingkungan ini juga dibawa masuk.

Komponen dalam pustaka komponen tidak akan pernah dapat mengakses cakupan aplikasi karena tidak ada satu cakupan aplikasi untuk dirujuk. Jadi, pengaturan ini tidak tersedia dalam konteks ini dan secara efektif telah nonaktif.Setelah diimpor ke aplikasi, dan jika penyesuaian diizinkan oleh pembuat komponen, sakelar dapat diaktifkan, dan komponen dapat dimodifikasi untuk menggunakan cakupan aplikasi.

Catatan

• Anda dapat menyisipkan instans komponen ke dalam layar dalam pustaka komponen, dan melakukan pratinjau terhadap layar tersebut untuk tujuan pengujian.
• Pustaka komponen tidak ditampilkan saat menggunakan Power Apps Mobile.

Mengimpor dan mengekspor komponen (dihentikan)

Catatan

Fitur ini sudah dihentikan. Pustaka komponen merupakan cara yang disarankan untuk menggunakan kembali komponen di seluruh aplikasi. Saat menggunakan pustaka komponen, aplikasi mempertahankan dependensi pada komponen yang digunakan. Pembuat aplikasi akan diberi pemberitahuan jika pembaruan komponen dependen telah tersedia. Oleh karena itu, semua komponen yang akan digunakan kembali harus dibuat dalam pustaka komponen sebagai gantinya.

Kemampuan untuk mengimpor dan mengekspor komponen dinonaktifkan secara default sejak fitur ini dihentikan. Meski metode yang disarankan untuk bekerja dengan komponen adalah menggunakan pustaka komponen, namun Anda tetap dapat mengaktifkan fitur ini secara per aplikasi sebagai pengecualian hingga fitur tersebut dihilangkan. Untuk melakukannya, edit aplikasi Anda di Power Apps Studio, lalu buka Pengaturan > Fitur mendatang > Dihentikan > Atur komponen Ekspor dan impor ke Aktif.

Setelah mengaktifkan fitur ini, Anda dapat menggunakan kemampuan berikut untuk mengimpor dan mengekspor komponen.

Mengimpor komponen dari aplikasi lain

Untuk mengimpor satu atau beberapa komponen dari satu aplikasi ke aplikasi lain, pilih Impor komponen dari menu Sisipkan, lalu gunakan menu menurun Kustom. Atau gunakan Komponen dalam tampilan hierarki di panel kiri.

Kotak dialog berisi daftar semua aplikasi yang berisi komponen yang diizinkan untuk diedit. Pilih aplikasi, lalu pilih Impor untuk mengimpor versi terbaru yang dipublikasikan dari semua komponen dalam aplikasi tersebut. Setelah mengimpor minimal satu komponen, Anda dapat mengedit salinan dan menghapus yang tidak diperlukan.

Anda dapat menyimpan aplikasi dengan komponen yang ada ke file secara lokal, lalu gunakan kembali file dengan mengimpornya. Anda dapat menggunakan file untuk mengimpor komponen ke aplikasi lain.

Jika aplikasi berisi versi modifikasi dari komponen yang sama, Anda akan diminta untuk memutuskan apakah akan mengganti versi modifikasi atau membatalkan impor.

Setelah Anda membuat komponen di aplikasi, aplikasi lain dapat menggunakan komponen dari aplikasi ini dengan mengimpornya.

Catatan

Jika komponen yang Anda impor dari aplikasi lain dimodifikasi dalam aplikasi asli, Anda harus mengimpor kembali komponen tersebut dalam aplikasi yang menggunakan untuk menerima perubahan komponen terbaru. Gunakan pustaka komponen untuk bekerja dengan pembaruan komponen secara lebih efisien.

Mengekspor komponen dari aplikasi

Anda dapat mengekspor komponen ke file dan mengunduhnya untuk diimpor ke aplikasi lain.

Pilih pilihan Ekspor komponen dari bagian Komponen dalam tampilan hierarki di panel kiri:

Anda juga dapat menggunakan menu Sisipkan, lalu pilih menu menurun Kustom sebagai gantinya.

Memilih Ekspor komponen akan mengunduh komponen ke file:

File komponen yang diunduh menggunakan nama ekstensi file .msapp.

Impor komponen dari file komponen yang diekspor

Untuk mengimpor komponen dari file komponen yang diekspor, pilih Impor komponen dari menu Sisipkan, lalu gunakan menu drop-down Kustom atau gunakan Komponen dalam tampilan hierarki di panel kiri. Dari kotak dialog komponen, pilih Unggah file bukan pilih komponen atau aplikasi lain:

Dari kotak dialog Buka, telusuri lokasi file komponen dan pilih Buka untuk mengimpor komponen di dalam aplikasi.

Mengimpor komponen dari aplikasi yang diekspor

Anda dapat menyimpan aplikasi secara lokal menggunakan pilihan File > Simpan Sebagai File:

Setelah menyimpan aplikasi, Anda dapat menggunakan kembali komponen dari aplikasi ini menggunakan metode impor komponen dari sebuah file. Ikuti langkah di bagian sebelumnya pada komponen impor dari file komponen yang diekspor.

Pembatasan yang diketahui

• Properti input kustom tidak dapat dikonfigurasi ke nilai properti output kustom di seluruh instans yang sama atau berbeda bila Anda memiliki dua atau beberapa instans dengan komponen yang sama dalam aplikasi. Tindakan ini akan menghasilkan pesan peringatan referensi melingkar. Untuk mengatasi batasan ini, Anda dapat membuat salinan komponen di dalam aplikasi.
• Menambahkan dan menjalankan alur Power Automate dalam pustaka komponen tidak didukung.
• Anda tidak dapat menyimpan sumber data atau kontrol yang mencakup data dari sumber data tersebut (seperti formulir, kisi cair, atau tabel data) dengan komponen.
• Anda tidak dapat menyisipkan komponen ke galeri atau formulir (termasuk formulir SharePoint).
• Komponen tidak mendukung fungsi UpdateContext, namun Anda dapat membuat dan memperbarui variabel dalam komponen menggunakan fungsi Atur. Cakupan variabel ini terbatas pada komponen, namun Anda dapat mengaksesnya dari luar komponen melalui properti output kustom.

Langkah berikutnya

Belajar menggunakan pustaka komponen untuk membuat repositori komponen yang dapat digunakan kembali.

Baca juga

• Pustaka komponen
• Manajemen siklus hidup aplikasi pustaka komponen (ALM)
• Memetakan bidang input komponen
• Menambahkan multimedia ke komponen
• Rumus perilaku untuk komponen
• Power Apps component framework
• Tambahkan komponen kanvas ke halaman kustom di aplikasi berdasarkan model Anda

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