Integrera PowerApps i webbplatser och andra tjänsterIntegrate PowerApps into websites and other services

Apparna som du skapar är ofta mest användbara när de är tillgängliga just där människor utför sitt arbete.The apps you build are often most useful when they're available right where people are doing their work. PowerApps gör att du kan bädda in appar i en iframe så att du kan integrera apparna i webbplatser och andra tjänster som Power BI eller 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.

I det här avsnittet, visar vi dig hur du ställer in parametrarna för app-inbäddning. Därefter bäddar vi in vår tillgångsbeställningsapp i en webbplats.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-instrumentpanel med inbäddad app

Tänk på följande begränsningar:Keep the following restrictions in mind:

  • Endast PowerApps-användare i samma klientorganisation kan komma åt den inbäddade appen.Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps stöder enbart Internet Explorer 11 med kompatibilitetsvy avstängd.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

Du kan också integrera PowerApps i SharePoint Online (utan att använda en iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Mer information finns i Generera en app från SharePoint med PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Ange URI-parametrar för din appSet URI parameters for your app

Om du har en app som du vill bädda in är det första steget att ange parametrarna för URI (Uniform Resource Identifier), så att iframe vet var appen finns.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. URI:en finns i följande format:The URI is in the following form:

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

Observera: Vi har lagt till en radbrytning så URI:en visas bättre på sidan.Note: We added a line break so the URI displays better on the page.

Det enda du behöver göra är att ersätta ID för din app för [AppID] i URI:n (inklusive '[' & ']').The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Vi visar dig snart hur du hämtar värdet, men först visar vi här alla parametrar i URI:en:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] - är i formatet /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Det innehåller ID för den app som ska köras.It provides the ID of the app to run.
  • screenColor - används för att ge en bättre app-inläsningsupplevelse för dina användare.screenColor - is used to provide a better app loading experience for your users. Den här parametern är i formatet RGBA (rött värde, grönt värde, blått värde, alfa) och kontrollerar skärmfärgen när appen har lästs in.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Det är bäst att ställa in den på samma färg som för din apps ikon.It is best to set it to the same color as your app's icon.
  • source - påverkar inte appen, men vi rekommenderar att du lägger till ett beskrivande namn för att referera till källan för inbäddningen.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Slutligen kan du lägga till eventuella anpassade parametrar du vill ha via Param()-funktionen, och dessa värden kan användas av din app.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. De läggs till i slutet av URI:en, exempelvis som [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. De här parametrarna läses enbart vid start av appen. Om du behöver ändra dem måste du starta om appen.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Hämta app-IDGet the App ID

App-ID är tillgängligt på powerapps.com. För appen som du vill bädda in:The app ID is available on powerapps.com. For the app you want to embed:

  1. I powerapps.com, på fliken Appar, klickar du eller trycker på knappen med tre punkter (...In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ), sedan Information.), then Details.

    Gå till information om appar

  2. Kopiera App-ID.Copy the App ID.

    Kopiera app-ID från informationen

  3. Ersätt värdet [AppID] i URI:en.Substitute the [AppID] value in the URI. För vår tillgångsbeställningsapp ser URI:en ut så här: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
    

Bädda in din app på en webbplatsEmbed your app in a website

Att bädda in din app är nu så enkelt som att lägga till iframe till HTML-koden för din webbplats (eller någon annan tjänst som stöder iframes, till exempel Power BI eller 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]"/>

Ange värden för iframe-bredd och -höjd och ersätt ID för din app med [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Följande avbildning visar tillgångsbeställningsappen inbäddad i en Contoso-exempelwebbplats.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Contoso-webbplats med inbäddad app

Tänk på följande för att autentisera användare av din app:Keep the following points in mind for authenticating users of your app:

  • Om webbplatsen använder Azure Active Directory (AAD)-baserad autentisering, krävs ingen ytterligare inloggning.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Om din webbplats använder någon annan inloggningsmetod eller inte är autentiserad ser användarna en inloggningsuppmaning på iframe.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. När de loggar in kommer de att kunna köra appen så länge som appens skapare har delat appen med dem.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.

Som du kan se är inbäddningsappar enkla och kraftfulla.As you can see, embedding apps is simple and powerful. Med inbäddning kan du överföra appar direkt till de platser där du och dina kunder arbetar – webbplatser, Power BI-instrumentpaneler, SharePoint-sidor och mer.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.