Leggi in inglese

Condividi tramite

Integrare app canvas nei siti Web e in altri servizi

  • Articolo

Le app create sono spesso più utile quando sono disponibili direttamente laddove gli utenti svolgono il proprio lavoro. Mediante l'incorporazione di app canvas in un iframe, è possibile integrare tali app in siti Web e in altri servizi, ad esempio Power BI o 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.

Dashboard di Power BI con app incorporata.

Nota

  • Solo gli utenti di Power Apps nello stesso tenant possono accedere all'app incorporata.
  • L'incorporamento di app canvas in un'applicazione desktop nativa non è supportato. Sono escluse le integrazioni proprietarie come Power Apps in Teams.

È anche possibile integrare app canvas in SharePoint Online senza usare un iframe. Altre informazioni: Usare la Web part di Power Apps.

Impostare i parametri URI per l'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. L'URI è nel formato seguente:

https://apps.powerapps.com/play/[AppID]?source=iframe

Per gli utenti di GCC

https://apps.gov.powerapps.us/play/[AppID]?source=iframe

Importante

A partire da agosto 2019, il formato URI è cambiato da https://web.powerapps.com/webplayer a https://apps.powerapps.com/play. Aggiornare eventuali iframe incorporati per utilizzare il nuovo formato URI. I riferimenti al formato precedente verranno reindirizzati al nuovo URI per garantire la compatibilità.

Formato precedente:

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

L'unica operazione necessaria consiste nel sostituire [AppID] nell'URI con l'ID dell'app (incluso '[' & ']'). Tra poco verrà illustrato come ottenere questo valore, ma prima ecco tutti i parametri disponibili nell'URI:

  • [appID]: fornisce l'ID dell'app da eseguire.
  • tenantid: è un parametro facoltativo per supportare l'accesso degli ospiti e determina da quale tenant aprire l'app.
  • screenColor: usato per fornire una migliore esperienza dell'app agli utenti. Questo parametro è nel formato RGBA (valore rosso, valore verde, valore blu, alfa) e controlla il colore dello schermo durante il caricamento dell'app. È consigliabile impostarlo sullo stesso colore dell'icona dell'app.
  • source: non interessa l'app, ma è consigliabile aggiungere un nome descrittivo per fare riferimento all'origine dell'incorporamento.
  • Infine, è possibile aggiungere i parametri personalizzati desiderati usando la funzione Param(); tali valori possono essere utilizzati dall'app. Vengono aggiunti alla fine dell'URI, ad esempio [AppID]?source=iframe&param1=value1&param2=value2. Questi parametri vengono letti solo all'avvio dell'app. Se è necessario modificarli, si deve riavviare l'app. Da notare che solo il primo elemento dopo [appid] deve avere un "?"; per gli altri utilizzare "&" come illustrato qui.

Ottenere l'ID app

L'ID dell'app è disponibile in powerapps.com. Per l'app che si vuole incorporare:

  1. In powerapps.com, nella scheda App, fare clic o toccare i puntini di sospensione (...), quindi Dettagli.

    Passare ai dettagli dell'app.

  2. Copiare l'ID App.

    Copiare l'ID app dai dettagli.

  3. Sostituire il valore [AppID] nell'URI. Per l'app Asset Ordering, l'URI è simile al seguente:

    https://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe

Potrebbe essere necessario consentire i popup nel browser quando si incorpora un'app nel sito Web che utilizza la funzione Launch() per avviare una pagina Web o un'app.

Incorporare l'app in un sito Web

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:

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

Specificare i valori per la larghezza e l'altezza dell'iframe e sostituire [AppID] con l'ID dell'app.

Nota

Includere allow="geolocation; microphone; camera" nel codice HTML di iframe per consentire alle app di usare queste funzionalità in Google Chrome.

L'immagine seguente mostra l'app Asset Ordering incorporata in un sito Web Contoso di esempio.

Sito Web Contoso con app incorporata.

Tenere presente quanto segue per l'autenticazione degli utenti dell'app:

  • Se il sito Web usa l'autenticazione basata su Microsoft Entra ID, non è necessario alcun accesso aggiuntivo.
  • Se il sito Web usa qualsiasi altro meccanismo di accesso o non è autenticato, gli utenti visualizzano una richiesta di accesso sull'iframe. Dopo l'accesso, potranno eseguire l'app a condizione che il relativo autore l'abbia condivisa con loro.

Come si può vedere, l'incorporamento delle app è semplice ed efficace. L'incorporamento consente di inserire le app esattamente là dove servono, cioè nei in siti Web, nei dashboard di Power BI, le pagine di SharePoint e altro ancora.

Nota

Puoi indicarci le tue preferenze di lingua per la documentazione? Partecipa a un breve sondaggio. (il sondaggio è in inglese)

Il sondaggio richiederà circa sette minuti. Non viene raccolto alcun dato personale (Informativa sulla privacy).