Integrácia služby PowerApps do webových lokalít a ďalších služiebIntegrate PowerApps into websites and other services

Vytvorené aplikácie sú najužitočnejšie, keď sú k dispozícii v čase, keď ľudia pracujú.The apps you build are often most useful when they're available right where people are doing their work. Služba PowerApps umožňuje vkladať plátnové aplikácie do prvku iframe, aby ste mohli integrovať tieto aplikácie na lokality a do iných služieb, ako napríklad Power BI alebo SharePoint.PowerApps enables you to embed canvas apps in an iframe so that you can integrate those apps into websites and other services, such as Power BI or SharePoint.

V tejto téme vám ukážeme, ako nastaviť parametre vkladania aplikácií a potom vložíme našu aplikáciu na objednávanie tovaru na lokalitu.In this topic, we'll show you how to set parameters for app embedding; then we'll embed our Asset Ordering app in a website.

Tabuľa Power BI s vloženou aplikáciou

Majte na pamäti nasledovné obmedzenia:Keep the following restrictions in mind:

  • K vloženej aplikácií majú prístup iba používatelia služby PowerApps patriaci do rovnakého nájomníka.Only PowerApps users in the same tenant can access the embedded app.
  • Ak chcete získať prístup k službe PowerApps prostredníctvom Internet Explorera 11, musíte vypnúť režim kompatibilného zobrazenia.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

Službu PowerApps môžete tiež integrovať do SharePointu Online (bez použitia prvku iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Ďalšie informácie získate v téme Generovanie aplikácie z SharePointu pomocou PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Nastavenie parametrov URI v aplikáciiSet URI parameters for your app

Ak máte aplikáciu, ktorú chcete vložiť, začnite nastavením parametrov identifikátora URI (Uniform Resource Identifier), aby prvok iframe vedel, kde môže aplikáciu nájsť.If you have an app you want to embed, the first step is to set parameters for the Uniform Resource Identifier (URI), so that the iframe knows where to find the app. Formát identifikátora URI je nasledovný:The URI is in the following form:

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

Poznámka

Pridali sme zlom riadka, aby sa identifikátor URI lepšie zobrazil na stránke.We added a line break so the URI displays better on the page.

Jediné, čo musíte v identifikátore URI urobiť je nahradiť identifikáciu vašej aplikácie za [AppID] (vrátane [' & ']).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Za chvíľu vám ukážeme, ako získať danú hodnotu, ale najprv si predstavíme všetky parametre, ktoré sú v identifikátore URI k dispozícii:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] – je vo formáte /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Poskytuje identifikáciu aplikácii, ktorá sa má spustiť.It provides the ID of the app to run.
  • screenColor – poskytuje používateľom lepšie načítavanie aplikácie.screenColor - is used to provide a better app loading experience for your users. Tento parameter je vo formáte RGBA (hodnota červenej, zelenej, modrej, alfa) a ovláda farbu obrazovky počas načítavania aplikácie.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Odporúča sa nastaviť ju na rovnakú farbu, akú má ikona aplikácie.It is best to set it to the same color as your app's icon.
  • source – nemá vplyv na aplikáciu, ale odporúčame pridať názov, ktorý popisuje zdroj vkladania.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Nakoniec môžete pridať pomocou funkcie Param() ľubovoľné vlastné parametre, ktorých hodnoty sa použijú v aplikácii.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Pridajú sa na koniec identifikátora URI, ako napríklad [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Tieto parametre sú počas načítavania aplikácie iba na čítanie. Ak ich potrebujete zmeniť, musíte opätovne spustiť aplikáciu.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Získanie identifikácie aplikácieGet the App ID

Identifikácia aplikácie sa nachádza na lokalite powerapps.com.The app ID is available on powerapps.com. Identifikácia pre vkladanú aplikáciu:For the app you want to embed:

  1. Na lokalite powerapps.com, na karte Aplikácie kliknite alebo ťuknite na položku tri bodky (...In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) a potom kliknite na položku Podrobnosti.), then Details.

    Prechod na podrobnosti aplikácie

  2. Kopírujte položku ID aplikácie.Copy the App ID.

    Kopírovanie ID aplikácie z podrobností

  3. Nahraďte v identifikátore URI hodnotu [AppID].Substitute the [AppID] value in the URI. V našej aplikácii na objednávanie tovaru vyzerá identifikátor URI takto:For our Asset Ordering app, the URI looks like this:

    https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    

Vloženie aplikácie na webovú lokalituEmbed your app in a website

Vloženie aplikácie je rovnako jednoduché ako pridávanie prvku iframe do kódu HTML na vašej lokalite (alebo na ľubovolnej lokalite, ktorá podporuje prvky iframe, ako napríklad Power BI alebo SharePoint):Embedding your app is now as simple as adding the iframe to the HTML code for your site (or any other service that supports iframes, such as Power BI or SharePoint):

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

Zadajte hodnoty pre šírku a výšku prvku iframe a nahraďte identifikáciu aplikácie položkou [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Poznámka

Do kódu HTML pre prvok iframe zahrňte položku allow="geolocation; microphone; camera", aby aplikácie mohli používať tieto možnosti v Google Chrome.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

Nasledujúci obrázok zobrazuje aplikáciu na objednávanie tovaru, ktorá je vložená na ukážkovej webovej lokalite Contoso.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Webová lokalita Contoso s vloženou aplikáciou

Pri overovaní používateľov aplikácie majte na pamäti:Keep the following points in mind for authenticating users of your app:

  • Ak webová lokalita používa overovanie na základe služby Azure Active Directory (AAD), nie je potrebné žiadne dodatočné prihlasovanie.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Ak webová lokalita používa iný mechanizmus prihlasovania alebo nepoužíva overovanie, používateľom sa v prvku iframe zobrazí výzva na prihlásenie.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Po prihlásení budú môcť spúšťať aplikáciu, ak ju s nimi autor aplikácie zdieľa.After they sign-in, they will be able to run the app as long as the author of the app has shared it with them.

Ako vidíte, vkladanie aplikácií je jednoduché a účinné.As you can see, embedding apps is simple and powerful. Vkladanie umožňuje mať aplikácie tam, kde vy a vaši zákazníci pracujú, čo sú webové lokality, tabule Power BI, stránky SharePointu a ďalšie.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.