Integrare PowerApps nei siti Web e in altri serviziIntegrate PowerApps into websites and other services

Le app create sono spesso più utile quando sono disponibili direttamente laddove gli utenti svolgono il proprio lavoro.The apps you build are often most useful when they're available right where people are doing their work. PowerApps consente di incorporare le app in un iframe per poter integrare le app nei siti Web e in altri servizi, ad esempio Power BI o 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 questo argomento verrà illustrato come impostare i parametri per l'incorporamento delle app, quindi verrà incorporata l'app Asset Ordering in un sito Web.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.

Dashboard di Power BI con app incorporata

Occorre tenere presenti le restrizioni seguenti:Keep the following restrictions in mind:

  • Solo gli utenti di PowerApps nello stesso tenant possono accedere all'app incorporata.Only PowerApps users in the same tenant can access the embedded app.
  • PowerApps supporta Internet Explorer 11 solo con la Visualizzazione Compatibilità disattivata.PowerApps supports Internet Explorer 11 only with Compatibility View turned off.

È anche possibile integrare PowerApps in SharePoint Online (senza usare un iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Per altre informazioni, vedere Generare un'app da SharePoint usando PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Impostare i parametri URI per l'appSet URI parameters for your app

Se si vuole incorporare un'app, il primo passaggio consiste nell'impostare i parametri per l'URI (Uniform Resource Identifier), in modo che l'iframe sappia dove trovare l'app.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. L'URI è nel formato seguente:The URI is in the following form:

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

Nota: è stata aggiunta un'interruzione di riga per visualizzare meglio l'URI nella pagina.Note: We added a line break so the URI displays better on the page.

L'unica operazione necessaria consiste nel sostituire [AppID] nell'URI con l'ID dell'app (incluso '[' & ']').The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Tra poco verrà illustrato come ottenere questo valore, ma prima ecco tutti i parametri disponibili nell'URI:We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID]: è nel formato /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Fornisce l'ID dell'app da eseguire.It provides the ID of the app to run.
  • screenColor: valore usato per fornire una migliore esperienza dell'app agli utenti.screenColor - is used to provide a better app loading experience for your users. Questo parametro è nel formato RGBA (valore rosso, valore verde, valore blu, alfa) e controlla il colore dello schermo durante il caricamento dell'app.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. È consigliabile impostarlo sullo stesso colore dell'icona dell'app.It is best to set it to the same color as your app's icon.
  • source: non interessa l'app, ma è consigliabile aggiungere un nome descrittivo per fare riferimento all'origine dell'incorporamento.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Infine, è possibile aggiungere i parametri personalizzati desiderati usando la funzione Param(); tali valori possono essere utilizzati dall'app.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Vengono aggiunti alla fine dell'URI, ad esempio [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Questi parametri vengono letti solo durante l'avvio dell'applicazione; se si vogliono modificarle, è necessario eseguire di nuovo l'app.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Ottenere l'ID dell'appGet the App ID

L'ID dell'app è disponibile in powerapps.com. Per l'applicazione si vuole incorporare:The app ID is available on powerapps.com. For the app you want to embed:

  1. In powerapps.com, nella scheda App, scegliere o toccare i puntini di sospensione (...),In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . quindi Dettagli.), then Details.

    Passare ai dettagli dell'app

  2. Copiare l'ID App.Copy the App ID.

    Copiare l'ID app dai dettagli

  3. Sostituire il valore [AppID] nell'URI.Substitute the [AppID] value in the URI. Per l'app Asset Ordering, l'URI è simile al seguente: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
    

Incorporare l'app in un sito WebEmbed your app in a website

L'incorporamento dell'app è ora semplice quanto l'aggiunta di iframe al codice HTML per il sito o per qualsiasi altro servizio che supporta iframe, ad esempio Power BI o 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]"/>

Specificare i valori per la larghezza e l'altezza dell'iframe e sostituire [AppID] con l'ID dell'app.Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

L'immagine seguente mostra l'app Asset Ordering incorporata in un sito Web Contoso di esempio.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Sito Web Contoso con app incorporata

Tenere presente quanto segue per l'autenticazione degli utenti dell'app:Keep the following points in mind for authenticating users of your app:

  • Se il sito Web usa l'autenticazione basata su Azure Active Directory (AAD), non è necessario alcun accesso aggiuntivo.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Se il sito Web usa qualsiasi altro meccanismo di accesso o non è autenticato, gli utenti visualizzano una richiesta di accesso sull'iframe.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Dopo l'accesso, potranno eseguire l'app a condizione che il relativo autore l'abbia condivisa con loro.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.

Come si può vedere, l'incorporamento delle app è semplice ed efficace.As you can see, embedding apps is simple and powerful. L'incorporamento consente di inserire le app esattamente dove servono a utenti e clienti, ovvero in siti Web, dashboard di Power BI, pagine di SharePoint e altro ancora.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.