Le app create sono spesso più utile quando sono disponibili direttamente laddove gli utenti svolgono il proprio lavoro. PowerApps consente di incorporare le app in un iframe per poter integrare le applicazioni nei siti Web e nei dashboard di Power BI.

In questo argomento, mostreremo come impostare i parametri per l'incorporamento delle app, quindi verrà incorporata l'app Asset Ordering in un sito Web e in un dashboard.

Dashboard di Power BI con app incorporata

Nota: solo gli utenti di PowerApps nello stesso tenant possono accedere all'app incorporata.

È anche possibile integrare PowerApps in SharePoint Online (senza usare un iframe). Per altre informazioni, vedere Generare un'app da SharePoint usando PowerApps.

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://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
source=iframe&appId=/providers/Microsoft.PowerApps/apps/[AppID]

Nota: è stata aggiunta un'interruzione di riga per visualizzare meglio l'URI nella pagina.

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

  • appID: è nel formato /providers/Microsoft.PowerApps/apps/[AppID]. Fornisce l'ID dell'app da eseguire.
  • hideNavBar: -valore booleano (true/false) che controlla se l'intestazione Dynamics 365 per l'app è visibile o meno. È consigliabile un valore di true se si tratta dell'unica app che verrà incorporata nel sito.
  • screenColor: valore 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]&param1=value1. Questi parametri vengono letti solo durante l'avvio dell'applicazione; se si vogliono modificarle, è necessario eseguire di nuovo l'app.

Ottenere l'ID dell'app

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

  1. In powerapps.com, nella scheda App, scegliere 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://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 Web

Per incorporare l'app è ora sufficiente aggiungere l'iframe al codice HTML per il sito:

<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.

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 Azure Active Directory (AAD), 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.

Incorporare l'app in un dashboard di Power BI

In linea con l'obiettivo di misurare, agire e automatizzare, riteniamo che il posto migliore per usare un'app è spesso nel contesto dei dati misurati e dei report monitorati dall'utente.

In questo esempio è stato creato un dashboard di Power BI per monitorare le vendite dei prodotti per l'azienda. In questo dashboard si tengono d'occhio le tendenze di vendita di hardware e il nuovo inventario hardware viene ordinato direttamente all'interno del dashboard, dall'app incorporata. L'incorporamento app consente ai nostri esperti di inventario di lavorare in un'unica posizione all'interno del dashboard di Power BI a cui sono abituati.

Nell'immagine seguente, si noterà l'app Asset Ordering incorporata direttamente nel dashboard, insieme ai dati di vendita che forniscono il contesto per il processo di ordinamento dell'hardware.

Dashboard di Power BI con app incorporata

Per incorporare un'app in un dashboard di Power BI, seguire questi passaggi:

  1. Creare l'URI, come illustrato in precedenza:

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. Aggiungere l'URI a un iframe. In questo caso la larghezza e l'altezza sono impostate al 98% per evitare la presenza di barre di scorrimento nel riquadro:

    <iframe width="98%" height="98%" src="https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2"/>
    
  3. Passare al dashboard di Power BI in cui si vuole incorporare l'app.

  4. Nel dashboard, nella barra dei menu superiore, scegliere o toccare Aggiungi riquadro. A seconda delle limitazioni di spazio, potrebbe essere visualizzato solo il segno più (+).

    Aggiungere un riquadro nel dashboard di Power BI

  5. Scegliere o toccare CONTENUTO WEB, quindi Avanti.

    Aggiungere contenuto Web a un dashboard

  6. Incollare il codice iframe nel campo Codice di incorporamento, quindi scegliere o toccare Applica.

    Codice di incorporamento per il contenuto Web

  7. Il riquadro verrà ora visualizzato nel dashboard ed è possibile spostarlo dove si preferisce, esattamente come altri riquadri. Per altre informazioni sull'aggiunta di riquadri a un dashboard, vedere Aggiungere immagini, testo, video e altro al dashboard.

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 e nei dashboard di Power BI.