Intégrer des applications canevas dans des sites web et d’autres services

Les applications que vous développez sont souvent plus utiles lorsqu’elles sont disponibles à l’endroit même où les utilisateurs travaillent. En intégrant des applications canevas dans un iframe, vous pouvez intégrer ces applications dans des sites Web et d’autres services, tels que Power BI ou 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.

Vous pouvez également intégrer des applications canevas dans SharePoint Online sans utiliser un iframe. Pour en savoir plus : Utiliser le composant WebPart Power Apps.

Définir les paramètres URI pour votre application

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. L’URI se présente sous la forme suivante :

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

Pour les utilisateurs du cloud de la communauté du secteur public

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

Il vous suffit de remplacer l’ID de votre application par [AppID] dans l’URI (y compris les caractères « [ » et « ] »). Nous allons vous montrer comment obtenir rapidement cette valeur. Avant toute chose, voici les paramètres disponibles dans l’URI :

• [appID] - Il s’agit de l’ID de l’application à exécuter.
• tenantid - est un paramètre facultatif pour prendre en charge l’accès invité et détermine le locataire à partir duquel ouvrir l’application.
• screenColor - sert à fournir une meilleure expérience de chargement d’application pour vos utilisateurs. 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. Il est préférable de définir la même couleur que l’icône de votre application.
• 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.
• 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. Ils sont ajoutés à la fin de l’URI, de la façon suivante : [AppID]?source=iframe&param1=value1&param2=value2. Ces paramètres sont en lecture seule lors du lancement de l’application. Si vous devez les modifier, vous devez relancer l’application. Notez que seul le premier élément après [appid] doit avoir un « ? » ; après cela, utilisez le « & » comme illustré ici.

Obtenir l’ID de l’application

L’ID de l’application est disponible sur powerapps.com. Pour l’application que vous souhaitez incorporer :

1. Dans powerapps.com, dans l’onglet Applications, cliquez ou appuyez sur les points de suspension ( … ), puis sur Détails.

   

2. Copiez l’ID de l’application.

   

3. Remplacez la valeur [AppID] dans l’URI. Pour notre application de commande de ressources, l’URI ressemble à ceci :

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

Vous devrez peut-être autoriser les fenêtres contextuelles dans le navigateur lorsque vous intégrez une application dans votre site Web qui utilise Launch() pour lancer une page web ou une application.

Intégrer votre application dans un site web

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) :

<iframe width="[W]" height="[H]" src="https://apps.powerapps.com/play/[AppID]?source=website&screenColor=rgba(165,34,55,1)" 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].

L’image suivante montre l’incorporation de l’application de commande de ressources dans un exemple de site web Contoso.

Gardez les points suivants à l’esprit pour l’authentification des utilisateurs de votre application :

• Si votre site web utilise l’authentification basée sur Microsoft Entra ID, aucune connexion supplémentaire n’est requise.
• 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. Une fois qu’ils sont connectés, ils peuvent exécuter l’application, tant que l’auteur de celle-ci la partage avec eux.

Comme vous pouvez le voir, l’incorporation d’applications est simple et puissante. Elle vous permet d’apporter des applications à l’endroit même où vous et vos clients travaillez, dans des sites web et des tableaux de bord Power BI, les pages SharePoint, et plus encore.