Integrace PowerApps do webových stránek a dalších služebIntegrate PowerApps into websites and other services

Vytvořené aplikace jsou často nejužitečnější, když jsou k dispozici tam, kde lidé pracují.The apps you build are often most useful when they're available right where people are doing their work. Služba PowerApps vám umožňuje vkládat aplikace do prvku IFrame, abyste je mohli integrovat do webových stránek a dalších služeb jako Power BI nebo SharePoint.PowerApps enables you to embed apps in an iframe so that you can integrate those apps into websites and other services, such as Power BI or SharePoint.

V tomto tématu vám ukážeme, jak nastavit parametry pro vkládání aplikace, a potom vložíme aplikaci pro objednávání prostředků (Asset Ordering) do webové stránky.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.

Řídicí panel Power BI s vloženou aplikací

Mějte na paměti následující omezení:Keep the following restrictions in mind:

  • K vložené aplikaci budou mít přístup pouze uživatelé PowerApps ve stejném tenantovi.Only PowerApps users in the same tenant can access the embedded app.
  • Služba PowerApps podporuje pouze Internet Explorer 11 s vypnutým kompatibilním zobrazením.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

Službu PowerApps můžete integrovat také do SharePointu Online (bez použití prvku IFrame).You can also integrate PowerApps into SharePoint Online (without using an iframe). Další informace najdete v tématu o generování aplikace přímo ze sharpointového seznamu pomocí PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Nastavení parametrů identifikátoru URI požadované aplikaceSet URI parameters for your app

Pokud máte aplikaci, kterou chcete vložit, prvním krokem je nastavení parametrů pro identifikátor URI, aby prvek IFrame věděl, kde aplikaci najít.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. Identifikátor URI by měl vypadat následovně:The URI is in the following form:

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

Poznámka:: Přidali jsme konec řádku, aby se identifikátor URI na stránce lépe zobrazoval.Note: We added a line break so the URI displays better on the page.

Jediné, co musíte udělat, je v identifikátoru URI nahradit [AppID] za ID aplikace (včetně „[‘ & ‚]“).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Zanedlouho vám ukážeme, jak tuto hodnotu získat, ale nejprve se podívejte na všechny dostupné parametry identifikátoru URI:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] – má formát /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Poskytuje ID aplikace, která se má spustit.It provides the ID of the app to run.
  • screenColor – slouží k poskytnutí lepšího prostředí uživatelům během načítání.screenColor - is used to provide a better app loading experience for your users. Tento parametr má formát RGBA (červená, zelená, modrá a alfa) a řídí barvu obrazovky během načítání aplikace.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Nejlepší je nastavit stejnou barvu, jakou má ikona aplikace.It is best to set it to the same color as your app's icon.
  • source – nemá na aplikaci vliv, ale doporučujeme vám přidat popisující název, který bude odkazovat na zdroj vložení.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Nakonec můžete přidat libovolný vlastní parametr pomocí funkce Param() function a jeho hodnoty využije aplikace.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Přidávají se na konec identifikátoru URI tímto způsobem: [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Tyto parametry se načtou při spouštění aplikace. Pokud je potřebujete změnit, musíte aplikaci spustit znovu.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Získání ID aplikaceGet the App ID

ID aplikace je k dispozici na webu powerapps.com. Postup získání ID aplikace, kterou chcete vložit:The app ID is available on powerapps.com. For the app you want to embed:

  1. Na webu powerapps.com klikněte nebo klepněte na kartě Aplikace na tlačítko se třemi tečkami ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ) a potom na Podrobnosti.), then Details.

    Přejití na podrobnosti

  2. Zkopírujte ID aplikace.Copy the App ID.

    Kopírování ID aplikace z podrobností

  3. Nahraďte v identifikátoru URI hodnotu [AppID].Substitute the [AppID] value in the URI. Identifikátor URI naší aplikace pro objednávání prostředků vypadá takto:For our Asset Ordering app, the URI looks like this:

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

Vložení aplikace do webové stránkyEmbed your app in a website

Vložení aplikace je stejně jednoduché jako přidání prvku IFrame do kódu HTML vašeho webu (nebo jakékoli jiné služby, která podporuje prvky IFrame, jako je Power BI nebo 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?hideNavBar=true&
source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]"/>

Zadejte hodnoty pro šířku a výšku prvku IFrame a nahraďte hodnotu [AppID] vlastním ID aplikace.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Následují obrázek znázorňuje aplikaci pro objednávání prostředků vloženou do ukázkové webové stránky společnosti Contoso.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Web společnosti Contoso s vloženou aplikací

Mějte na paměti následující body pro ověřování uživatelů vaší aplikace:Keep the following points in mind for authenticating users of your app:

  • Pokud webová stránka používá ověřování na základě Azure Active Directory, není žádné další přihlašování potřeba.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Pokud vaše webová stránka používá jiný mechanismus přihlášení nebo není ověřená, uživatelům se v prvku IFrame zobrazí výzva pro přihlášení.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Po přihlášení budou uživatelé moct aplikaci používat, pokud ji tedy s nimi autor sdílel.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.

Jak vidíte, vkládání aplikací je jednoduché a účinné.As you can see, embedding apps is simple and powerful. Vkládání vám umožňuje přinést aplikace přímo do míst, ve kterých vy i vaši zákazníci pracujete – webové stránky, řídicí panel Power BI, stránky SharePointu a další.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.