De apps die u bouwt zijn vaak het best te gebruiken als ze beschikbaar zijn op de plek waar het werk wordt uitgevoerd. Met PowerApps kunt u apps insluiten in een iframe, zodat u deze apps kunt integreren in websites en Power BI-dashboards.

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 en een dashboard insluiten.

Power BI-dashboard met ingesloten app

Opmerking: alleen PowerApps-gebruikers in dezelfde tenant hebben toegang tot de ingesloten app.

U kunt ook PowerApps integreren in SharePoint Online (zonder iframe). Zie Een app genereren vanuit SharePoint met behulp van PowerApps voor meer informatie.

URI-parameters instellen voor de 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. De URI heeft de volgende indeling:

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

Opmerking: er is een regeleinde toegevoegd, zodat de URI beter op de pagina wordt weergegeven.

Het enige wat u moet doen, is [AppID] in de URI vervangen door de ID van uw app. U leert verderop hoe u aan die waarde komt. Eerst worden hier alle parameters getoond die in de URI beschikbaar zijn:

  • appID: heeft de indeling /providers/Microsoft.PowerApps/apps/[AppID]. De parameter geeft de id van de uit te voeren app.
  • hideNavBar: is a Booleaanse waarde (waar/onwaar) die bepaalt of de Dynamics 365-kop van de app al dan niet zichtbaar is. De waarde true wordt aangeraden als dit de enige app is die u in uw website insluit.
  • screenColor: deze wordt gebruikt om de app beter te kunnen laden. Deze parameter heeft de indeling RGBA (rode waarde, groene waarde, blauwe waarde, alfa) en bepaalt de schermkleur tijdens het laden van de app. Het wordt aangeraden de schermkleur dezelfde kleur te geven als het pictogram voor de app.
  • 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.
  • Ten slotte kunt u aangepaste parameters toevoegen met de functie Param(). Deze waarden kunnen door de app worden gebruikt. Ze worden aan het eind van de URI toegevoegd, bijvoorbeeld [AppID]&param1=value1. Deze parameters worden alleen gelezen als de app wordt gestart. Als u ze wilt wijzigen, moet u de app opnieuw starten.

De app-id ophalen

De app-id is beschikbaar op powerapps.com. Ga voor de app die u wilt insluiten als volgt te werk:

  1. Ga naar powerapps.com en klik of tik op het tabblad Apps op het beletselteken ( . . . ), vervolgens op Details.

    Naar de app-details

  2. Kopieer de App ID.

    App-id kopiëren in Details

  3. Vervang de [AppID]-waarde in de URI. De URI ziet er voor de app Voorraad bestellen als volgt uit:

    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 website

Voor het insluiten van de app hoeft u nu alleen nog maar de iframe aan de HTML-code voor uw site toe te voegen:

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

In de volgende afbeelding ziet u de app Voorraad bestellen ingesloten in een voorbeeld van een Contoso-website.

Contoso-website met ingesloten app

Houd de volgende punten in acht wanneer u gebruikers van de app gaat verifiëren:

  • Als uw website AAD (Azure Active Directory) gebruikt op basis van verificatie, is er geen aanvullende aanmelding vereist.
  • Als uw website gebruikmaakt van een ander aanmeldingsproces of als de website niet geverifieerd is, zien de gebruikers een aanmeldingsprompt op de iframe. Nadat een gebruiker is aangemeld, kan de app worden uitgevoerd, mits de auteur van de app deze met de gebruiker heeft gedeeld.

De app insluiten in een Power BI-dashboard

Overeenkomstig onze visie met betrekking tot meten, functioneren en automatiseren, zijn wij van mening dat de beste plek voor een app vaak de context is van de gegevens die u meet en de rapporten die u controleert.

In dit voorbeeld hebben we een Power BI-dashboard gemaakt die de verkoop van producten voor ons bedrijf bewaakt. We volgen de verkooptrends van computerhardware via dit dashboard en we bestellen nieuwe hardware rechtstreeks met behulp van de ingesloten app in het dashboard. Door de app in te sluiten, kunnen onze voorraadspecialisten op één plek hun werk doen. Ze zijn tevreden dat ze het vertrouwde Power BI-dashboard kunnen blijven gebruiken.

In de volgende afbeelding ziet u dat de app Voorraad bestellen rechtstreeks is ingesloten in het dashboard, naast verkoopcijfers die een context bieden voor het bestelproces voor de hardware.

Power BI-dashboard met ingesloten app

Volg deze stappen als u een app in een Power BI-dashboard wilt insluiten:

  1. Maak de URI zoals eerder getoond:

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. Voeg de URI toe aan een iframe. In dit geval worden de hoogte en breedte ingesteld op 98% omdat we geen schuifbalken op de tegel willen hebben:

    <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. Ga naar het Power BI-dashboard waar u de app wilt insluiten.

  4. Klik of tik in het dashboard in de bovenste menubalk op Tegel toevoegen. Afhankelijk van de afmetingen ziet u mogelijk alleen het plusteken (+).

    Tegel Toevoegen in het Power BI-dashboard

  5. Klik of tik op WEBINHOUD en vervolgens op Volgende.

    Webinhoud toevoegen aan een dashboard

  6. Plak de iframecode in het veld Invoegcode en klik of tik op Toepassen.

    Invoegcode voor webinhoud

  7. De tegel wordt weergegeven in het dashboard en u kunt de tegel op een willekeurige plaats neerzetten, net zoals andere tegels. Zie Add image, text, video, and more to your dashboard (Afbeeldingen, tekst, video en meer aan een dashboard toevoegen) voor meer informatie over het toevoegen van tegels aan een dashboard.

Zoals u ziet, is het insluiten van apps eenvoudig en levert het u veel op. Door apps in te sluiten, kunt u ze precies op de plek krijgen waar u en uw klanten hun werk doen: op websites en Power BI-dashboards.