Canvas-apps integreren in websites en andere services

  • Artikel

De apps die u bouwt zijn vaak het best te gebruiken als ze beschikbaar zijn op de plek waar het werk wordt uitgevoerd. Door canvas-apps in een iframe in te sluiten kunt u die apps integreren in websites en andere services, zoals Power BI of SharePoint.

In dit onderwerp leert u hoe u parameters instelt om de app te kunnen insluiten. Vervolgens gaat u de app Voorraad bestellen in een website insluiten.

Power BI-dashboard met ingesloten app.

Notitie

  • Alleen Power Apps-gebruikers in dezelfde tenant hebben toegang tot de ingesloten app.
  • Het insluiten van canvas-apps in een native desktoptoepassing wordt niet ondersteund. Dit sluit first-party integraties uit, zoals Power Apps in Teams.

U kunt ook canvas-apps integreren in SharePoint Online zonder iframe. Meer informatie: Office: het Power Apps-webonderdeel gebruiken.

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://apps.powerapps.com/play/[AppID]?source=iframe

Voor GCC-gebruikers

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

Belangrijk

Vanaf augustus 2019 is het URI-formaat gewijzigd van https://web.powerapps.com/webplayer in https://apps.powerapps.com/play. Werk alle ingesloten iframes bij om de nieuwe URI-indeling te gebruiken. Verwijzingen naar de vorige indeling worden omgeleid naar de nieuwe URI om compatibiliteit te garanderen.

Vorige indeling:

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

Het enige wat u moet doen, is [AppID] in de URI (inclusief '[' en ']') 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]: geeft de id van de uit te voeren app.
  • tenantid: is een optionele parameter om gasttoegang te ondersteunen en bepaalt van welke tenant de app moet worden geopend.
  • 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]?source=iframe&param1=value1&param2=value2. Deze parameters worden alleen gelezen tijdens het starten van de app. Als u ze moet wijzigen, moet u de app opnieuw starten. Let op: alleen het eerste item na [appid] moet een "?" hebben; gebruik daarna de "&" zoals hier geïllustreerd.

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://apps.powerapps.com/play/76897698-91a8-b2de-756e-fe2774f114f2?source=iframe

Mogelijk moet u pop-ups in de browser toestaan wanneer u een app in uw website insluit die de functie Launch() gebruikt om een webpagina of een app te starten.

De app insluiten in een website

Voor het insluiten van de app hoeft u nu alleen nog maar de iframe toe te voegen aan de HTML-code voor uw site (of aan elke andere service die iframes ondersteunt, zoals Power BI of SharePoint):

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

Geef waarden op voor de hoogte en breedte van de iframe en vervang [AppID] door de id van de app.

Notitie

Neem allow="geolocation; microphone; camera" op in de HTML-code voor het iframe om toe te staan dat uw apps deze mogelijkheden gebruiken in Google Chrome.

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

Contoso-website met ingesloten app.

Houd rekening met de volgende punten wanneer u gebruikers van de app gaat verifiëren:

  • Als uw website Microsoft Entra ID 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.

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, in Power BI-dashboards, SharePoint-pagina's en meer.

Notitie

Laat ons uw taalvoorkeuren voor documentatie weten! Beantwoord een korte enquête. (houd er rekening mee dat deze in het Engels is)

De enquête duurt ongeveer zeven minuten. Er worden geen persoonlijke gegevens verzameld (privacyverklaring).