Gambaran keseluruhan komponen kanvas

Nota

• Bahagian ini menerangkan komponen kanvas yang merangkumi keupayaan kebolehlanjutan UI kod rendah. Pembangun profesional juga boleh menggunakan rangka kerja komponen Power Apps untuk membina komponen kod.
• Anda juga boleh menggunakan komponen kanvas dalam apl dipacu model dengan menggunakan halaman tersuai dan pustaka komponen. Untuk maklumat lanjut, lihat Tambah komponen kanvas pada halaman tersuai dalam aplikasi dipacu model.

Komponen ialah blok binaan boleh guna semula untuk apl kanvas. Pembuat apl boleh mencipta kawalan tersuai untuk digunakan dalam apl atau merentas apl dengan menggunakan pustaka komponen. Komponen boleh menggunakan ciri canggih seperti sifat tersuai dan mendayakan keupayaan kompleks. Artikel ini memperkenalkan konsep komponen dan beberapa contoh.

Komponen berguna apabila membina apl yang lebih besar yang mempunyai corak kawalan yang serupa. Jika anda mengemas kini definisi komponen dalam aplikasi, semua tika dalam aplikasi mencerminkan perubahan anda. Komponen juga mengurangkan pertindihan usaha dengan menghapuskan keperluan untuk menyalin dan menampal kawalan dan meningkatkan prestasi. Apabila anda menggunakan pustaka komponen, komponen membantu mencipta pembangunan kolaboratif dan menyeragamkan rupa dan rasa dalam organisasi.

Untuk mengetahui cara menggunakan komponen dalam apl kanvas, tonton video ini:

Komponen dalam aplikasi kanvas

Anda boleh mencipta komponen daripada dalam apl seperti yang dijelaskan dalam artikel ini atau dengan mencipta komponen baharu dalam pustaka komponen. Gunakan pustaka komponen apabila anda perlu menggunakan komponen merentas berbilang skrin apl. Anda juga boleh menyalin komponen sedia ada ke dalam pustaka komponen sedia ada atau baharu.

Untuk mencipta komponen dalam aplikasi, pergi ke Pandangan Pokok, pilih tab Komponen , dan kemudian pilih Komponen baharu:

Memilih Komponen baharu membuka kanvas kosong. Tambah kawalan sebagai sebahagian daripada takrifan komponen pada kanvas. Jika anda mengedit komponen dalam kanvas, anda mengemas kini tika komponen yang sama dalam skrin aplikasi lain. Aplikasi yang menggunakan semula komponen yang sudah dicipta juga boleh menerima kemas kini komponen selepas anda menerbitkan perubahan komponen.

Anda boleh memilih komponen daripada senarai komponen sedia ada dalam anak tetingkap kiri selepas anda memilih skrin. Apabila anda memilih komponen, anda memasukkan tika komponen tersebut ke skrin, sama seperti anda memasukkan kawalan.

Komponen yang tersedia di dalam apl muncul di bawah kategori Tersuai dalam senarai komponen dalam paparan pokok. Komponen yang diimport daripada pustaka komponen muncul di bawah kategori Komponen perpustakaan :

Nota

Komponen yang dibincangkan dalam artikel ini adalah berbeza daripada rangka kerja komponen Power Apps yang membolehkan pembangun dan pembuat mencipta komponen kod untuk aplikasi dipacu model dan kanvas. Untuk maklumat lanjut, lihat Power Apps gambaran keseluruhan rangka kerja komponen.

Sifat tersuai

Komponen boleh menerima nilai input dan membuang data jika anda mencipta satu atau lebih sifat tersuai. Senario ini maju dan memerlukan anda memahami formula dan kontrak yang mengikat.

Nota

Ciri percubaan untuk sifat komponen yang dipertingkatkan menyediakan lebih banyak pilihan untuk sifat, termasuk fungsi dan fungsi tingkah laku. Untuk maklumat lanjut, lihat Sifat komponen kanvas (percubaan)

Sifat input ialah cara komponen menerima data untuk digunakan dalam komponen. Sifat input muncul dalam tab Sifat anak tetingkap sebelah kanan jika tika komponen dipilih. Anda boleh mengkonfigurasikan sifat input dengan ungkapan atau formula, sama seperti anda mengkonfigurasi sifat standard dalam kawalan lain. Kawalan lain mempunyai sifat input, seperti sifat Lalai kawalan input teks.

Sifat output digunakan untuk memancarkan data atau keadaan komponen. Contohnya, sifat Dipilih pada kawalan Galeri ialah sifat output. Apabila anda mencipta sifat output, anda boleh menentukan cara kawalan lain boleh merujuk pada keadaan komponen.

Bimbingan berikut menjelaskan konsep ini dengan lebih lanjut.

Cipta komponen contoh

Dalam contoh ini, anda akan mencipta komponen menu yang menyerupai grafik yang berikut. Dan anda boleh mengubah teks kemudian untuk menggunakannya dalam berbilang skrin, aplikasi atau kedua-duanya:

Nota

Kami mengesyorkan agar anda menggunakan pustaka komponen apabila mencipta komponen untuk digunakan semula. Mengemas kini komponen dalam aplikasi hanya membuat kemas kini komponen tersedia dalam aplikasi. Apabila menggunakan pustaka komponen, anda boleh digesa untuk mengemas kini komponen jika komponen di dalam pustaka dikemas kini dan diterbitkan.

Cipta komponen baharu

1. Buat apl kanvas kosong.

2. Dalam Pandangan Pokok, pilih Komponen dan kemudian pilih Komponen baharu untuk mencipta komponen baharu.

   

3. Pilih komponen baharu dalam anak tetingkap kiri, pilih elipsis (...), dan kemudian pilih Namakan semula. Taip atau tampal nama sebagai MenuComponent.

4. Dalam anak tetingkap sebelah kanan, setkan lebar komponen sebagai 150 dan ketinggiannya sebagai 250, dan kemudian pilih Sifat tersuai baharu. Anda juga boleh menetapkan tinggi dan lebar kepada mana-mana nilai lain yang sesuai.

   

5. Dalam kotak Nama paparan, Nama harta dan Perihalan , taip atau tampal teks sebagai Item.

   

   Jangan sertakan ruang dalam nama sifat kerana anda akan merujuk kepada komponen dengan nama ini apabila anda menulis formula. Contohnya, ComponentName.PropertyName.

   Nama paparan muncul pada tab Sifat anak tetingkap kanan jika anda memilih komponen. Nama paparan deskriptif membantu anda dan pembuat lain memahami tujuan sifat ini. Perihalan muncul dalam petua alat jika anda menuding pada nama paparan sifat ini dalam tab Sifat .

6. Dalam senarai Jenis data, pilih Jadual dan kemudian pilih Cipta.

   

   Sifat Item ditetapkan kepada nilai lalai berdasarkan jenis data yang anda tentukan. Anda boleh menetapkan nilai yang sesuai dengan keperluan anda. Jika anda menentukan jenis data Jadual atau Rekod, anda mungkin mahu mengubah nilai sifat Item untuk dipadankan dengan skema data yang anda mahu masukkan kepada komponen. Dalam kes ini, anda akan menukarnya ke senarai rentetan.

   Anda boleh mengesetkan nilai sifat dalam bar formula jika anda memilih nama sifat pada tab Sifat anak tetingkap sebelah kanan.

   

   Seperti yang ditunjukkan oleh grafik seterusnya, anda juga boleh mengedit nilai harta pada tab Lanjutan anak tetingkap sebelah kanan.

7. Tetapkan sifat Item komponen kepada formula ini:

   Table({Item:"SampleText"})
   

   

8. Dalam komponen, masukkan kawalan Galeri menegak kosong dan pilih Tataletak pada anak tetingkap sifat sebagai Tajuk.

9. Pastikan senarai sifat menunjukkan sifat Item (seperti yang dilakukan secara lalai). Kemudian tetapkan nilai sifat itu kepada ungkapan ini:

   MenuComponent.Items
   

   Dengan cara ini, sifat Item kawalan Galeri membaca dan bergantung pada sifat input Item komponen.

10. (Pilihan) Tetapkan sifat BorderThickness kawalan Galeri kepada 1 dan sifat TemplateSizenya kepada 50. Anda juga boleh mengemas kini nilai untuk ketebalan sempadan dan saiz templat kepada mana-mana nilai lain yang sesuai.

Tambahkan komponen pada skrin

Seterusnya, tambahkan komponen pada skrin dan tentukan jadual rentetan untuk komponen dipaparkan.

1. Dalam anak tetingkap sebelah kiri, pilih senarai skrin dan kemudian pilih skrin lalai.

   

2. Pada tab Sisipkan , buka menu Komponen , dan kemudian pilih KomponenMenu.

   

   Komponen baharu dinamakan MenuComponent_1 secara lalai.

3. Tetapkan sifat Item MenuComponent_1 kepada formula ini:

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

   Contoh ini menyerupai grafik ini, tetapi anda boleh sesuaikan teks dan sifat lain bagi setiap tika.

   

Cipta dan gunakan sifat output

Setakat ini, anda mencipta komponen dan menambahkannya pada apl. Seterusnya, cipta sifat output yang mencerminkan item yang dipilih oleh pengguna dalam menu.

1. Buka senarai komponen, dan kemudian pilih MenuComponent.

2. Dalam anak tetingkap sebelah kanan, pilih tab Properties dan kemudian pilih Sifat tersuai baharu.

3. Dalam kotak Nama paparan,Nama harta danPerihalan , taip atau tampal Terpilih .

4. Di bawah Jenis sifat, pilih Output dan kemudian pilih Cipta.

   

5. Pada tab Lanjutan , tetapkan nilai sifat Dipilih kepada ungkapan ini, melaraskan angka dalam nama galeri jika perlu:

   Gallery1.Selected.Item
   

   

6. Pada skrin lalai apl, tambah label dan setkan sifat Teksnya kepada ungkapan ini, laraskan angka dalam nama komponen jika perlu:

   MenuComponent_1.Selected
   

   MenuComponent_1 ialah nama lalai contoh, bukan nama definisi komponen. Anda boleh menamakan semula mana-mana tika.

7. Sambil menekan terus kekunci Alt, pilih setiap item dalam menu.

   Kawalan Label mencerminkan item menu yang anda pilih terkini.

Scope

Sifat input dan output mentakrifkan antara muka antara komponen dengan aplikasi hosnya dengan jelas. Secara lalai, komponen itu dikurung supaya ia lebih mudah untuk menggunakan semula komponen dalam semua aplikasi, memerlukan penggunaan sifat untuk menghantar maklumat ke dalam dan keluar daripada komponen. Sekatan skop memastikan kontrak data komponen mudah dan padu, dan ia membantu mendayakan kemas kini definisi komponen—terutamanya merentas apl dengan pustaka komponen.

Tetapi ada kalanya komponen mungkin mahu berkongsi sumber data atau pembolehubah dengan hosnya. Perkongsian ini amat berguna apabila komponen hanya bertujuan untuk digunakan dalam satu apl tertentu. Untuk kes ini, anda boleh terus mengakses maklumat peringkat aplikasi dengan menghidupkan suis skop aplikasi Access dalam anak tetingkap sifat komponen:

Apabila anda menghidupkan skop apl Access, item berikut boleh diakses daripada dalam komponen:

• Pemboleh ubah global
• Koleksi
• Kawalan dan komponen pada skrin, seperti kawalan TextInput
• Sumber data berjadual, seperti jadual Dataverse

Apabila anda mematikan tetapan ini, komponen tidak dapat mengakses mana-mana item sebelumnya.  Fungsi Set dan Collect masih tersedia tetapi pembolehubah dan koleksi yang terhasil adalah skop kepada tika komponen dan tidak dikongsi dengan aplikasi.

Sumber data bukan jadual, seperti Azure Blob Storage atau penyambung tersuai, tersedia sama ada seting ini dihidupkan atau dimatikan. Fikirkan sumber data ini lebih menyerupai tindakan merujuk kepada sumber persekitaran daripada sumber aplikasi. Apabila komponen dibawa ke dalam aplikasi daripada pustaka komponen, sumber data ini daripada persekitaran juga dibawa masuk.

Komponen dalam pustaka komponen tidak boleh mengakses skop apl, kerana tiada skop apl tunggal untuk dirujuk. Oleh itu, tetapan ini tidak tersedia dalam konteks ini dan dimatikan secara berkesan. Setelah diimport ke dalam apl dan jika penyesuaian dibenarkan oleh pembuat komponen, suis boleh didayakan dan komponen boleh diubah suai untuk menggunakan skop apl.

Nota

• Anda boleh memasukkan contoh komponen ke dalam skrin dalam pustaka komponen dan pratonton skrin untuk tujuan ujian.
• Pustaka komponen tidak dipaparkan apabila menggunakan Power Apps Mudah Alih.

Import dan eksport komponen (ditamatkan)

Nota

Ciri ini telah ditamatkan. Pustaka komponen adalah cara yang disyorkan untuk menggunakan semula komponen merentas apl. Apabila menggunakan pustaka komponen, aplikasi mengekalkan kebergantungan pada komponen yang digunakannya. Pembuat aplikasi dimaklumkan apabila kemas kini kepada komponen bergantung tersedia. Oleh itu, semua komponen baharu boleh diguna semula hendaklah diwujudkan dalam pustaka komponen.

Keupayaan untuk mengimport dan mengeksport komponen dilumpuhkan secara lalai kerana ciri ini telah bersara. Walaupun kaedah yang disyorkan untuk bekerja dengan komponen ialah menggunakan pustaka komponen, anda masih boleh mendayakan ciri ini berdasarkan setiap apl sebagai pengecualian sehingga ciri itu dialih keluar. Untuk melakukan ini, edit apl anda dalam Power Apps Studio dan kemudian, pergi ke Tetapan>Ciri akan datang>Bersara> Tetapkan Eksport dan import komponen kepada Hidup.

Selepas anda mendayakan ciri ini, anda boleh menggunakan keupayaan berikut untuk mengimport dan mengeksport komponen.

Import komponen daripada aplikasi lain

Untuk mengimport satu atau lebih komponen daripada satu app ke app lain, pilih Import komponen daripada menu Selitkan dan kemudian gunakan menu lungsur turun Tersuai . Atau gunakan Komponen dalam paparan pokok pada anak tetingkap kiri.

Kotak dialog menyenaraikan semua aplikasi yang mengandungi komponen yang mempunyai keizinan untuk diedit. Pilih apl, dan kemudian pilih Import untuk mengimport versi terbaharu yang diterbitkan bagi semua komponen dalam apl itu. Selepas anda mengimport sekurang-kurangnya satu komponen, anda boleh mengedit salinan anda dan memadamkan mana-mana yang anda tidak perlukan.

Anda boleh menyimpan aplikasi dengan komponen sedia ada ke fail tempatan dan kemudian menggunakan semula fail itu dengan mengimportnya. Anda boleh menggunakan fail untuk mengimport komponen ke aplikasi lain.

Jika aplikasi mengandungi versi yang diubah suai bagi komponen yang sama, anda akan digesa untuk memutuskan sama ada hendak mengganti semula versi yang diubah suai atau membatalkan import.

Selepas anda mencipta komponen dalam aplikasi, aplikasi lain boleh mengambil komponen daripada aplikasi ini dengan mengimportnya.

Nota

Jika komponen yang anda import daripada aplikasi lain diubah suai dalam aplikasi asal, anda mesti mengimport komponen secara manual lagi dalam aplikasi yang digunakan untuk menerima perubahan komponen terkini. Sebaliknya, gunakan perpustakaan komponen untuk bekerja dengan kemas kini komponen dengan lebih cekap.

Eksport komponen daripada aplikasi anda

Anda boleh mengeksport komponen ke fail dan memuat turunnya untuk diimport ke aplikasi lain.

Pilih pilihan Eksport komponen daripada bahagian Komponen dalam paparan pokok pada anak tetingkap kiri:

Anda juga boleh menggunakan menu Insert dan kemudian pilih menu lungsur turun Tersuai .

Memilih Komponen eksport memuat turun komponen ke fail:

Fail komponen yang dimuat turun menggunakan .msapp sambungan nama fail.

Import komponen dari fail komponen yang dieksport

Untuk mengimport komponen daripada fail komponen yang dieksport, pilih Import komponen daripada sama ada menu Sisipkan dan kemudian gunakan Menu lungsur Tersuai atau gunakan pandangan pada Daripada kotak dialog komponen, pilih Muat naik fail dan bukannya memilih mana-mana komponen atau apl lain:

Daripada kotak dialog Buka , semak imbas ke lokasi fail komponen dan pilih Buka untuk mengimport komponen dalam apl.

Import komponen daripada aplikasi yang dieksport

Anda boleh menyimpan apl secara setempat dengan memilih Simpan Fail >Sebagai:

Selepas anda menyimpan apl, anda boleh menggunakan semula komponennya dengan mengimportnya daripada fail. Untuk maklumat lanjut, lihat bahagian sebelumnya tentang mengimport komponen daripada fail komponen yang dieksport.

Batasan diketahui

• Apabila anda mempunyai dua atau lebih tika komponen yang sama dalam aplikasi, anda tidak boleh mengkonfigurasikan sifat input tersuai kepada nilai sifat output tersuai merentas tika yang sama atau berbeza. Tindakan ini menghasilkan mesej amaran rujukan bulat. Untuk mengatasi had ini, cipta salinan komponen dalam apl anda.
• Menambah dan menjalankan aliran Power Automate dalam pustaka komponen tidak disokong.
• Anda tidak boleh menyimpan sumber data atau kawalan yang termasuk data daripada sumber data tersebut (seperti borang, grid bendalir atau jadual data) dengan komponen.
• Anda tidak boleh memasukkan komponen ke dalam galeri atau borang (termasuk borang SharePoint).
• Komponen tidak menyokong fungsi UpdateContext tetapi anda boleh membuat dan mengemas kini pembolehubah dalam komponen dengan menggunakan fungsi Set . Skop pemboleh ubah ini terhad kepada komponen, tetapi anda boleh mengaksesnya dari luar komponen melalui sifat output tersuai.

Langkah-langkah berikutnya

Belajar menggunakan pustaka komponen untuk mencipta repositori komponen boleh guna semula.

Lihat juga

• Perpustakaan komponen
• Pengurusan kitaran hayat aplikasi perpustakaan komponen (ALM)
• Peta medan input komponen
• Tambahkan multimedia pada komponen
• Formula tingkah laku untuk komponen
• Power Apps rangka kerja komponen
• Tambahkan komponen kanvas pada halaman tersuai dalam apl dipacu model