PowerApps integreren in websites en andere servicesIntegrate PowerApps into websites and other services

De apps die u bouwt zijn vaak het best te gebruiken als ze beschikbaar zijn op de plek waar het werk wordt uitgevoerd.The apps you build are often most useful when they're available right where people are doing their work. Met PowerApps kunt u apps insluiten in een iframe, zodat u deze apps kunt integreren in websites en andere services, zoals Power BI of 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.

In dit onderwerp leert u hoe u parameters instelt om de app in te kunnen sluiten. Vervolgens gaat u de app Voorraad bestellen in een website insluiten.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.

Power BI-dashboard met ingesloten app

Houd rekening met de volgende beperkingen:Keep the following restrictions in mind:

  • Alleen PowerApps-gebruikers in dezelfde tenant hebben toegang tot de ingesloten app.Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps biedt alleen ondersteuning voor Internet Explorer 11 als Compatibiliteitsweergave is uitgeschakeld.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

U kunt ook PowerApps integreren in SharePoint Online (zonder iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Zie Een app genereren vanuit SharePoint met behulp van PowerApps voor meer informatie.For more information, see Generate an app from within SharePoint using PowerApps.

URI-parameters instellen voor de appSet URI parameters for your app

Als u een app wilt insluiten, stelt u eerst de parameters in voor de URI (Uniform Resource Identifier), zodat het iframe de app kan vinden.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. De URI heeft de volgende indeling:The URI is in the following form:

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

Opmerking: er is een regeleinde toegevoegd, zodat de URI beter op de pagina wordt weergegeven.Note: We added a line break so the URI displays better on the page.

Het enige wat u moet doen, is [AppID] in de URI (inclusief '[' en ']') vervangen door de ID van uw app.The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). U leert verderop hoe u aan die waarde komt. Eerst worden hier alle parameters getoond die in de URI beschikbaar zijn:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • appID: heeft de indeling /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. De parameter geeft de id van de uit te voeren app.It provides the ID of the app to run.
  • screenColor: deze wordt gebruikt om de app beter te kunnen laden.screenColor - is used to provide a better app loading experience for your users. Deze parameter heeft de indeling RGBA (rode waarde, groene waarde, blauwe waarde, alfa) en bepaalt de schermkleur tijdens het laden van de app.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Het wordt aangeraden de schermkleur dezelfde kleur te geven als het pictogram voor de app.It is best to set it to the same color as your app's icon.
  • source: is niet van invloed op de app, maar u wordt aangeraden een beschrijvende naam toe te voegen die naar de bron van de ingesloten app verwijst.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Ten slotte kunt u aangepaste parameters toevoegen met de functie Param(). Deze waarden kunnen door de app worden gebruikt.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Ze worden aan het eind van de URI toegevoegd, bijvoorbeeld [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Deze parameters worden alleen gelezen als de app wordt gestart. Als u ze wilt wijzigen, moet u de app opnieuw starten.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

De app-id ophalenGet the App ID

De app-id is beschikbaar op powerapps.com. Ga voor de app die u wilt insluiten als volgt te werk:The app ID is available on powerapps.com. For the app you want to embed:

  1. Ga naar powerapps.com en klik of tik op het tabblad Apps op het beletselteken ( . . .In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ), vervolgens op Details.), then Details.

    Naar de app-details

  2. Kopieer de App ID.Copy the App ID.

    App-id kopiëren in Details

  3. Vervang de [AppID]-waarde in de URI.Substitute the [AppID] value in the URI. De URI ziet er voor de app Voorraad bestellen als volgt uit: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
    

De app insluiten in een websiteEmbed your app in a website

Voor het insluiten van de app hoeft u nu alleen nog maar de iframe toe te voegen aan de HTML-code voor uw site (of aan elke andere service die iframes ondersteunt, zoals Power BI of 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]"/>

Geef waarden op voor de hoogte en breedte van de iframe en vervang [AppID] door de id van de app.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

In de volgende afbeelding ziet u de app Voorraad bestellen ingesloten in een voorbeeld van een Contoso-website.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Contoso-website met ingesloten app

Houd de volgende punten in acht wanneer u gebruikers van de app gaat verifiëren:Keep the following points in mind for authenticating users of your app:

  • Als uw website AAD (Azure Active Directory) gebruikt op basis van verificatie, is er geen aanvullende aanmelding vereist.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Als uw website gebruikmaakt van een ander aanmeldingsproces of als de website niet geverifieerd is, zien de gebruikers een aanmeldingsprompt op de iframe.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Nadat een gebruiker is aangemeld, kan de app worden uitgevoerd, mits de auteur van de app deze met de gebruiker heeft gedeeld.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.

Zoals u ziet, is het insluiten van apps eenvoudig en levert het u veel op.As you can see, embedding apps is simple and powerful. Door apps in te sluiten, kunt u ze precies op de plek krijgen waar u en uw klanten hun werk doen: onder meer op websites, in Power BI-dashboards en op SharePoint-pagina's.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.