Bagikan melalui

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.

Dasbor Power BI dengan aplikasi tersemat.

Catatan

  • Hanya pengguna Power Apps di penyewa yang sama yang dapat mengakses aplikasi tersemat.
  • Menyematkan aplikasi kanvas di aplikasi desktop asli apa pun tidak didukung, yang mencakup Andrioid dan iOS. 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: Gunakan Power Apps komponen web.

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 ke 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=/penyedia/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:

  • [ID aplikasi] - Ini memberikan ID aplikasi yang akan dijalankan.
  • tenantid - adalah parameter opsional untuk mendukung akses tamu dan menentukan penyewa mana yang akan membuka aplikasi.
  • screenColor - digunakan untuk memberikan pengalaman pemuatan aplikasi yang lebih baik bagi pengguna Anda. Parameter ini dalam format RGBA (nilai mérah, nilai hijau, nilai biru, alfa) dan mengontrol warna layar saat aplikasi dimuat. Anda sebaiknya mengaturnya ke warna yang sama dengan ikon aplikasi.
  • source - tidak memengaruhi aplikasi, tetapi sebaiknya tambahkan nama deskriptif untuk merujuk ke sumber penyematan.
  • Terakhir, Anda dapat menambahkan parameter kustom apa pun yang Anda inginkan menggunakan fungsi Param(), dan nilai tersebut dapat digunakan oleh aplikasi Anda. Mereka ditambahkan ke 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 ( . . . ), lalu Detail.

    Membuka detail aplikasi.

  2. Salin ID Aplikasi.

    Menyalin ID aplikasi dari detail.

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

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

Anda mungkin perlu mengizinkan pop-up di browser saat menyematkan aplikasi di situs web Anda yang menggunakan fungsi Launch() untuk 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):

<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 [AppID] Anda.

Catatan

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

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

Situs web Contoso dengan aplikasi tersemat.

Jangan lupa untuk selalu mengautentikasi pengguna aplikasi Anda:

  • Jika situs Anda menggunakan Microsoft Entra autentikasi berbasis ID, login tambahan tidak diperlukan.
  • 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.