Ikhtisar komponen kanvas

Note

• Bagian ini menjelaskan komponen kanvas yang mencakup kemampuan ekstensibilitas UI kode rendah. Pengembang profesional juga dapat menggunakan kerangka kerja komponen Power Apps untuk membangun komponen kode.
• Anda juga dapat menggunakan komponen kanvas di aplikasi berbasis model dengan menggunakan halaman kustom dan pustaka komponen. Untuk informasi selengkapnya, lihat Menambahkan komponen kanvas ke halaman kustom di aplikasi berbasis model.

Komponen adalah blok penyusun yang dapat digunakan kembali untuk aplikasi kanvas. Pembuat aplikasi dapat membuat kontrol kustom untuk digunakan di dalam aplikasi, atau di seluruh aplikasi dengan 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 saat membangun aplikasi yang lebih besar yang memiliki pola kontrol serupa. Jika Anda memperbarui definisi komponen di dalam aplikasi, semua instans di aplikasi ini mencerminkan perubahan Anda. Komponen juga mengurangi duplikasi upaya dengan menghilangkan kebutuhan untuk menyalin dan menempelkan kontrol dan meningkatkan performa. Saat Anda menggunakan pustaka komponen, komponen membantu membuat pengembangan kolaboratif dan menstandarkan tampilan dan nuansa dalam organisasi.

Untuk mempelajari cara menggunakan komponen di aplikasi kanvas, tonton video ini:

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. Gunakan pustaka komponen saat Anda perlu menggunakan komponen di beberapa layar aplikasi. Anda juga dapat menyalin komponen yang ada ke pustaka komponen yang sudah ada atau baru.

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

Memilih Komponen baru membuka kanvas kosong. Tambahkan kontrol sebagai bagian dari definisi komponen pada kanvas. Jika Anda mengedit komponen di kanvas, Anda memperbarui instans komponen yang sama di layar aplikasi lain. 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 muncul di bawah kategori Kustom dalam daftar komponen di dalam tampilan pohon. Komponen yang diimpor dari pustaka komponen muncul di bawah kategori komponen Pustaka :

Note

Komponen yang dibahas dalam artikel ini berbeda dari kerangka kerja komponen Power Apps yang memungkinkan pengembang dan pembuat membuat komponen kode untuk aplikasi berbasis model dan kanvas. Untuk informasi selengkapnya, lihat Gambaran umum kerangka kerja komponen Power Apps.

Properti khusus

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 rumus dan kontrak yang mengikat.

Note

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

Properti input adalah bagaimana 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 rumus, 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:

Note

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 dalam nama properti karena Anda akan merujuk ke komponen dengan nama ini saat Anda menulis rumus. 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 rumus 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 rumus 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). Kemudian 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) Atur properti BorderThickness kontrol Galeri ke 1 dan properti TemplateSize-nya menjadi 50. Anda juga dapat memperbarui nilai untuk ketebalan batas dan ukuran templat ke nilai lain yang sesuai.

Tambahkan komponen ke layar

Selanjutnya, tambahkan komponen ke layar dan tentukan tabel string untuk ditampilkan komponen.

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 rumus 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 membuat komponen dan menambahkannya ke aplikasi. Selanjutnya, buat 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 sebuah 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.

Tetapi ada kalanya komponen mungkin ingin berbagi sumber data atau variabel dengan hostnya. Berbagi ini sangat berguna ketika komponen hanya ditujukan untuk digunakan dalam satu aplikasi tertentu. Untuk kasus ini, Anda dapat secara langsung mengakses informasi tingkat aplikasi dengan mengaktifkan pengalih akses cakupan aplikasi dalam panel properti komponen:

Saat Anda mengaktifkan cakupan aplikasi Access, item berikut dapat diakses dari dalam komponen:

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

Saat Anda menonaktifkan pengaturan ini, komponen tidak dapat mengakses item sebelumnya.  Mengatur dan Mengumpulkan fungsi masih tersedia tetapi variabel dan koleksi yang dihasilkan dilingkup ke instans komponen dan tidak dibagikan dengan aplikasi.

Sumber data non-tabular, seperti Azure Blob Storage atau konektor kustom, tersedia apakah pengaturan ini diaktifkan atau dinonaktifkan. Anggap sumber data ini lebih seperti referensi sumber daya lingkungan dan bukan sumber daya aplikasi. Bila komponen digunakan dalam aplikasi dari pustaka komponen, sumber data ini dari lingkungan juga akan digunakan.

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

Note

• 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 Seluler.

Mengimpor dan mengekspor komponen (dihentikan)

Note

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 diberi tahu saat pembaruan untuk komponen dependen 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 karena fitur ini dihentikan. Meskipun metode yang direkomendasikan untuk bekerja dengan komponen adalah menggunakan pustaka komponen, Anda masih dapat mengaktifkan fitur ini berdasarkan per aplikasi sebagai pengecualian hingga fitur dihapus. Untuk melakukan ini, edit aplikasi Anda di Power Apps Studio lalu, buka Settings> Fitur yang akan datang>Retired> Atur komponen Export 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 drop-down 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 setidaknya satu komponen, Anda dapat mengedit salinan dan menghapus apa pun yang tidak Anda butuhkan.

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.

Note

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 dengan memilih Simpan File>Sebagai:

Setelah menyimpan aplikasi, Anda dapat menggunakan kembali komponennya dengan mengimpornya dari file. Untuk informasi selengkapnya, lihat bagian sebelumnya tentang mengimpor komponen dari file komponen yang diekspor.

Batasan yang diketahui

• Saat Anda memiliki dua instans atau lebih dari komponen yang sama dalam aplikasi, Anda tidak dapat mengonfigurasi properti input kustom ke nilai properti output kustom di instans yang sama atau berbeda. Tindakan ini menghasilkan pesan peringatan referensi melingkar. Untuk mengatasi batasan ini, buat salinan komponen di dalam aplikasi Anda.
• Menambahkan dan menjalankan alur kerja Power Automate di 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 dalam 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
• Kerangka kerja komponen Power Apps
• Menambahkan komponen kanvas ke halaman kustom di aplikasi berbasis model