Mengintegrasikan aplikasi kanvas ke dalam situs web dan layanan lainnya

Aplikasi yang Anda buat terkadang sangat berguna hanya saat orang-orang melakukan pekerjaan mereka. Dengan menyematkan aplikasi kanvas dalam iframe, Anda dapat mengintegrasikan aplikasi tersebut ke dalam situs web dan layanan lainnya seperti Power BI atau SharePoint.

Dalam topik ini, kami akan menunjukkan cara menetapkan parameter untuk penyematan aplikasi; selanjutnya, kami akan menyematkan aplikasi Asset Ordering di situs web.

Catatan

• Hanya pengguna Power Apps di penyewa yang sama yang dapat mengakses aplikasi tersemat.
• Menyematkan aplikasi kanvas di aplikasi desktop asli tidak didukung. Ini tidak termasuk integrasi pihak pertama seperti Power Apps di Teams).

Anda juga dapat mengintegrasikan aplikasi kanvas ke SharePoint Online tanpa menggunakan iframe. Informasi selengkapnya: Menggunakan bagian web Power Apps.

Menetapkan parameter URI untuk aplikasi Anda

Jika Anda memiliki aplikasi yang ingin disematkan, langkah pertama adalah menetapkan parameter untuk Uniform Resource Identifier (URI) sehingga iframe mengetahui lokasi untuk menemukan aplikasi. URI tersebut ada dalam format berikut:

https://apps.powerapps.com/play/[AppID]?source=iframe

Untuk pengguna GCC

https://apps.gov.powerapps.us/play/[AppID]?source=iframe

Penting

Pada Agustus 2019, format URI telah berubah dari https://web.powerapps.com/webplayer menjadi https://apps.powerapps.com/play. Perbarui iframe tersemat untuk menggunakan format URI baru. Referensi ke format sebelumnya akan diarahkan ke URI baru untuk memastikan kompatibilitasnya.

Format sebelumnya:

https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

Satu-satunya hal yang harus Anda lakukan adalah mengganti ID aplikasi Anda untuk [AppID] di URI (termasuk '[' & ']'). Kami akan segera menunjukkan cara mendapatkan nilai tersebut, tetapi pertama-tama, semua parameter yang tersedia di URI adalah sebagai berikut:

• [appID] - Menyajikan ID aplikasi yang akan dijalankan.
• tenantid - adalah parameter opsional untuk mendukung akses tamu dan menentukan penyewa yang akan digunakan untuk membuka aplikasi.
• screenColor - digunakan untuk memberikan pengalaman pemuatan aplikasi yang lebih baik bagi para pengguna. Parameter ini berada dalam format RGBA (nilaimrah, nilai hijau, nilai biru, nilai alpha) dan mengontrol warna layar saat aplikasi dimuat. Anda sebaiknya mengaturnya ke warna yang sama dengan ikon aplikasi.
• sumber - tidak memengaruhi aplikasi, tetapi sebaiknya tambahkan nama deskriptif untuk merujuk sumber penyematan.
• Terakhir, Anda dapat menambahkan parameter kustom yang diinginkan menggunakan fungsi Param(), dan nilai tersebut dapat digunakan oleh aplikasi Anda. Nilai tersebut akan ditambahkan di akhir URI, seperti [AppID]?source=iframe&param1=value1&param2=value2. Parameter ini hanya dibaca selama peluncuran aplikasi. Jika ingin mengubahnya, Anda harus meluncurkan ulang aplikasi. Perlu diingat, hanya item pertama setelah [appid] yang harus memiliki "?"; setelahnya, gunakan "&" sebagaimana diilustrasikan di sini.

Mendapatkan ID Aplikasi

ID aplikasi tersedia di powerapps.com. Untuk aplikasi yang ingin Anda sematkan:

1. Di powerapps.com, pada tab Aplikasi, klik atau ketuk elipsis ( . . . ), kemudian Detail.

   

2. Salin ID Aplikasi.

   

3. Ganti nilai [AppID] dalam URI. Untuk aplikasi Asset Ordering, URI akan terlihat seperti ini:

   https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe
   

Anda mungkin harus mengizinkan pop-up di browser saat menyematkan aplikasi di situs web Anda yang menggunakan fungsi Launch() agar meluncurkan halaman web atau aplikasi.

Menyematkan aplikasi di situs web

Menyematkan aplikasi Anda sekarang sangat sederhana seperti menambahkan iframe ke kode HTML untuk situs (atau layanan lain yang mendukung iframe seperti Power BI atau SharePoint):

HTML

<iframe width="[W]" height="[H]" src="https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" allow="geolocation; microphone; camera"/>

Tentukan nilai untuk lebar dan tinggi iframe, lalu ganti ID aplikasi untuk [AppID].

Catatan

Sertakan allow="geolocation; microphone; camera" dalam kode HTML iframe agar aplikasi dapat menggunakan kemampuan ini di Google Chrome.

Gambar berikut menunjukkan aplikasi Asset Ordering yang disematkan di situs web sampel Contoso.

Jangan lupa untuk selalu mengautentikasi pengguna aplikasi Anda:

• Jika situs web Anda menggunakan Microsoft Entra autentikasi berbasis ID, tidak diperlukan rincian masuk tambahan.
• Jika situs web Anda menggunakan mekanisme masuk lainnya atau tidak diautentikasi, pengguna akan melihat petunjuk masuk pada iframe. Setelah masuk, mereka akan dapat menjalankan aplikasi selama pembuat aplikasi membagikannya kepada mereka.

Seperti yang Anda lihat, menyematkan aplikasi sangat sederhana dan mudah dilakukan. Penyematan membuat Anda dapat membawa aplikasi langsung ke tempat Anda dan pelanggan Anda bekerja – situs web, dasbor Power BI, halaman SharePoint, dan masih banyak lagi.

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