Поділитися через

Інтеграція компонованих програм з веб-сайтами та іншими службами

  • Стаття

Створювані програми часто найбільш корисні, коли вони доступні в той час, коли люди виконують свою роботу. Вбудовування компонованих програм в iframe дозволяє інтегрувати ці програми з веб-сайтами та іншими службами, такими як Power BI або SharePoint.

Тут ми покажемо, як задати параметри для вбудовування програми. Потім ми впровадимо програму для замовлення товарів на веб-сайті.

Приладна дошка Power BI із вбудованою програмою.

Примітка

  • Тільки користувачі Power Apps в одному клієнті можуть одночасно отримати доступ до вбудованої програми.
  • Вбудовування програм на полотні у власну програму для настільних комп’ютерів не підтримується. Це виключає власні інтеграції, як-от Power Apps у Teams).

Крім того, компоновані програми можна інтегрувати з SharePoint Online режим без використання фрейму iframe. Додаткові відомості див.: Використання веб-частини Power Apps.

Установлення параметрів URI для програми

Якщо ви маєте програму, яку хочете інтегрувати, перш за все необхідно задати параметри для універсального кодового ресурсу (URI), щоб iframe знав, де розташована ваша програма. URI має наведений нижче формат.

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

Для користувачів GCC

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

Важливо

Станом на серпень 2019 року, формат URI змінився з https://web.powerapps.com/webplayer на https://apps.powerapps.com/play. Тому оновіть всі вбудовані фрейми iframes, щоб вони використовували новий формат URI. Посилання на попередній формат будуть перенаправлятися на нові URI для забезпечення сумісності.

Попередній формат:

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

Вам тільки потрібно вказати в URI ідентифікатор своєї програми замість [AppID], в тому числі '[' & ']'. Ми покажемо, як отримати це значення, але спочатку розглянемо всі параметри, доступні в URI:

  • [appID] — надає ідентифікатор програми для запуску.
  • tenantid — необов'язковий параметр для підтримки гостьового доступу і визначає, з якого клієнта слід відкрити програму.
  • screenColor — використовується для забезпечення кращого завантаження програм для ваших користувачів. Цей параметр має формат RGBA (червоний, зелений, синій і альфа) і визначає колір екрану при завантаженні програми. Радимо встановити для нього колір значка програми.
  • source — не впливає на програму, але ми радимо додати описову назву для посилання на джерело вбудовування.
  • Нарешті, ви можете додати будь-які настроюються параметри за допомогою функції Param(), вказавши ті значення, які можуть використовуватися вашою програмою. Вони додаються в кінець URI, наприклад [AppID]?source=iframe&param1=value1&param2=value2. Ці параметри доступні тільки для читання під час запуску програми. Якщо необхідно змінити їх, необхідно перезапустити програму. Зверніть увагу, що тільки перший елемент після [appid] повинен мати «?»; після цього використовуйте «&», як показано тут.

Отримання ідентифікатора програми

Ідентифікатор програми доступний на сайті powerapps.com. Для програми, яку ви хочете вбудувати, виконайте зазначені нижче дії.

  1. На сайті powerapps.com, на вкладці Програми клацніть три крапки ( . . . ), потім виберіть Докладні відомості.

    Перехід на сторінку відомостей.

  2. Скопіюйте App ID.

    Копіювання ідентифікатора програми з докладних відомостей.

  3. Замініть значення [AppID] в URI. Для нашої програми для замовлення товарів, URI виглядатиме наступним чином:

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

Вам може знадобитися дозволити використання спливаючих вікон в браузері, якщо ви вбудуєте програму на веб-сайті, який використовує функцію Launch(), щоб запустити веб-сторінку або програму.

Вбудовування програми на веб-сайт

Впровадити програму тепер так само просто, як додати IFrame в HTML-код вашого сайту (або будь-яку іншу службу, яка підтримує IFrame, наприклад Power BI або 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"/>

Вкажіть значення висоти і ширини IFrame, а також ідентифікатор програми замість [AppID].

Примітка

Додайте allow="geolocation; microphone; camera" в HTML-код IFrame, щоб дозволити програмам використовувати ці можливості в Google Chrome.

На наступному зображенні показано програму для замовлення товарів на прикладі веб-сайту Литвина.

Вебсайт Contoso з вбудованою програмою.

Враховуйте наступні моменти, щоб автентифікувати користувачів вашої програми:

  • Якщо на вашому веб-сайті Microsoft Entra використовується автентифікація на основі ідентифікатора, додатковий вхід не потрібен.
  • Якщо ваш сайт використовує будь-який інший механізм входу або не пройшов перевірку автентичності, ваші користувачі побачать на IFrame запит на вхід. Після того як вони увійдуть, вони зможуть працювати з програмою, якщо її автор надав їм спільний доступ.

Як бачите, вбудовувати програми просто і ефективно. Таким чином ви можете переносити програми безпосередньо в місця, де працюєте ви і ваші клієнти — на веб-сайти, приладні дошки Power BI, сторінки SharePoint, тощо.

Примітка

Розкажіть нам про свої уподобання щодо мови документації? Візьміть участь в короткому опитуванні. (зверніть увагу, що це опитування англійською мовою)

Проходження опитування займе близько семи хвилин. Персональні дані не збиратимуться (декларація про конфіденційність).