Intégrer PowerApps dans des sites web et d’autres servicesIntegrate PowerApps into websites and other services

Les applications que vous développez sont souvent plus utiles lorsqu’elles sont disponibles à l’endroit même où les utilisateurs travaillent.The apps you build are often most useful when they're available right where people are doing their work. PowerApps vous permet d’incorporer des applications dans un iframe. Vous pouvez ainsi les intégrer dans des sites web et d’autres services, tels que Power BI ou 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.

Dans cette rubrique, nous allons vous montrer comment définir des paramètres d’incorporation d’application. Ensuite, nous verrons comment incorporer notre application de commande de ressources dans un site 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.

Tableau de bord Power BI avec une application intégrée

Gardez à l’esprit les restrictions suivantes :Keep the following restrictions in mind:

  • Seuls les utilisateurs PowerApps dans le même locataire peuvent accéder à l’application incorporée.Only PowerApps users in the same tenant can access the embedded app.
  • Pour accéder à PowerApps à l’aide d’Internet Explorer 11, vous devez désactiver l’affichage de compatibilité.To access PowerApps using Internet Explorer 11, you must turn off Compatibility View.

Vous pouvez également intégrer PowerApps dans SharePoint Online (sans utiliser un iframe).You can also integrate PowerApps into SharePoint Online (without using an iframe). Pour en savoir plus, consultez la page Générer une application à partir de SharePoint à l’aide de PowerApps.For more information, see Generate an app from within SharePoint using PowerApps.

Définir les paramètres URI pour votre applicationSet URI parameters for your app

Si vous possédez une application que vous souhaitez incorporer, la première étape consiste à définir les paramètres pour l’Uniform Resource Identifier (URI), afin que l’iframe sache où trouver l’application.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 se présente sous la forme suivante :The URI is in the following form:

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

Note

Nous avons ajouté un saut de ligne pour que l’URI s’affiche mieux sur la page.We added a line break so the URI displays better on the page.

Il vous suffit de remplacer l’ID de votre application par [AppID] dans l’URI (y compris les caractères « [ » et « ] »).The only thing you have to do is substitute the ID of your app for [AppID] in the URI (including '[' & ']'). Nous allons vous montrer comment obtenir rapidement cette valeur. Avant toute chose, voici les paramètres disponibles dans l’URI :We'll show you how to get that value shortly, but first here are all the parameters available in the URI:

  • [appID] est au format /providers/Microsoft.PowerApps/apps/[AppID].[appID] - is in the format /providers/Microsoft.PowerApps/apps/[AppID]. Il s’agit de l’ID de l’application à exécuter.It provides the ID of the app to run.
  • screenColor sert à fournir une meilleure expérience de chargement d’application pour vos utilisateurs.screenColor - is used to provide a better app loading experience for your users. Ce paramètre est au format RGBA (rouge, vert, bleu, alpha), et définit la couleur de l’écran pendant le chargement de l’application.This parameter is in the format RGBA (red value, green value, blue value, alpha) and controls the screen color while the app loads. Il est préférable de définir la même couleur que l’icône de votre application.It is best to set it to the same color as your app's icon.
  • source n’affecte pas l’application. Cependant, nous vous conseillons d’ajouter un nom descriptif pour faire référence à la source de l’incorporation.source - does not affect the app, but we suggest you add a descriptive name to refer to the source of the embedding.
  • Enfin, vous pouvez librement ajouter les paramètres personnalisés de votre choix à l’aide de la fonction Param (), et ces valeurs peuvent être utilisées par votre application.Lastly, you can add any custom parameters you want using the Param() function, and those values can be consumed by your app. Ils sont ajoutés à la fin de l’URI, de la façon suivante : [AppID]&param1=value1.They are added to the end of the URI, such as [AppID]&param1=value1. Ces paramètres sont en lecture seule lors du démarrage de l’application. Si vous avez besoin de les modifier, redémarrez l’application.These parameters are read only during launch of the app; if you need to change them, you need to re-launch the app.

Obtenir l’ID de l’applicationGet the App ID

L’ID de l’application est disponible sur powerapps.com. Pour l’application que vous souhaitez incorporer :The app ID is available on powerapps.com. For the app you want to embed:

  1. Dans powerapps.com, dans l’onglet Applications, cliquez ou appuyez sur les points de suspension ( In powerapps.com, on the Apps tab, click or tap the ellipsis ( . . . ), puis sur Détails.), then Details.

    Accédez aux détails de l’application.

  2. Copiez l’ID de l’application.Copy the App ID.

    Copiez l’ID de l’application à partir des détails.

  3. Remplacez la valeur [AppID] dans l’URI.Substitute the [AppID] value in the URI. Pour notre application de commande de ressources, l’URI ressemble à ceci :For our Asset Ordering app, the URI looks like this:

    https://web.powerapps.com/webplayer/iframeapp?source=iframe&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    

Intégrer votre application dans un site webEmbed your app in a website

Il est maintenant aussi simple d’incorporer votre application que d’ajouter l’iframe au code HTML de votre site (ou tout au service prenant en charge les iframes, tel que Power BI ou 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?source=website&screenColor=rgba(165,34,55,1)&appId=/providers/Microsoft.PowerApps/apps/[AppID]" allow="geolocation; microphone; camera"/>

Spécifiez des valeurs pour la largeur et la hauteur de l’iframe, et remplacez l’ID de votre application par [AppID].Specify values for the iframe width and height, and substitute the ID of your app for [AppID].

Note

Incluez allow="geolocation; microphone; camera" dans votre code HTML iframe pour autoriser vos applications à utiliser ces fonctionnalités sur Google Chrome.Include allow="geolocation; microphone; camera" in your iframe HTML code to allow your apps to use these capabilities on Google Chrome.

L’image suivante montre l’incorporation de l’application de commande de ressources dans un exemple de site web Contoso.The following image shows the Asset Ordering app embedded in a Contoso sample website.

Site web Contoso avec application incorporée

Gardez les points suivants à l’esprit pour l’authentification des utilisateurs de votre application :Keep the following points in mind for authenticating users of your app:

  • Si votre site web utilise l’authentification basée sur Azure Active Directory (AAD), aucune connexion supplémentaire n’est requise.If your website uses Azure Active Directory (AAD) based authentication, no additional sign-in is required.
  • Si votre site web utilise tout autre mécanisme de connexion, ou s’il n’est pas authentifié, vos utilisateurs voient une invite de connexion sur l’iframe.If your website uses any other sign-in mechanism or is not authenticated, your users see a sign-in prompt on the iframe. Une fois qu’ils sont connectés, ils peuvent exécuter l’application, tant que l’auteur de celle-ci la partage avec eux.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.

Comme vous pouvez le voir, l’incorporation d’applications est simple et puissante.As you can see, embedding apps is simple and powerful. Elle vous permet d’apporter des applications à l’endroit même où vous et vos clients travaillez, dans des sites web, des tableaux de bord Power BI, des pages SharePoint et bien plus encore.Embedding enables you to bring apps right to the places you and your customers work – websites, Power BI dashboards, SharePoint pages, and more.