Les applications que vous développez sont souvent plus utiles lorsqu’elles sont disponibles à l’endroit même où les utilisateurs travaillent. PowerApps vous permet d’incorporer des applications dans un iframe, de sorte que vous puissiez les intégrer dans des sites web et des tableaux de bord Power BI.

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 a dans un site web et dans un tableau de bord.

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

Remarque : seuls les utilisateurs PowerApps dans le même client peuvent accéder à l’application intégrée.

Vous pouvez également intégrer PowerApps dans SharePoint Online (sans utiliser un iframe). Pour en savoir plus, consultez la page Générer une application à partir de SharePoint à l’aide de PowerApps.

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

Remarque : nous avons ajouté un saut de ligne pour que l’URI s’affiche mieux sur la page.

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] est au format /providers/Microsoft.PowerApps/apps/[AppID]. Il s’agit de l’ID de l’application à exécuter.
  • 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]&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.

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.

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

  2. Copiez l’ID de l’application.

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

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

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

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 :

<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]"/>

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.

Site web Contoso avec application incorporée

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

  • Si votre site web utilise l’authentification basée sur Azure Active Directory (AAD), 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.

Incorporer votre application dans un tableau de bord Power BI

Conformément à notre vision de la mesure, de l’action et de l’automatisation, nous pensons que le meilleur endroit pour utiliser une application est dans le contexte des données que vous mesurez, et les rapports que vous analysez.

Dans cet exemple, nous avons créé un tableau de bord Power BI pour analyser les ventes de produits de notre entreprise. Grâce à ce tableau, nous gardons un œil sur les tendances des ventes de matériel informatique, et nous commandons de nouveaux équipements informatiques directement dans le tableau de bord, à partir de l’application incorporée. Incorporer l’application permet à nos responsables des stocks de travailler depuis un seul emplacement, et ils sont heureux de rester dans le tableau de bord Power BI auquel ils sont habitués.

Dans l’image suivante, l’application de commande de ressources est directement incorporée dans le tableau de bord, au même titre que les chiffres des ventes qui fournissent un contexte pour la procédure de commande de matériel.

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

Pour incorporer une application dans un tableau de bord Power BI, suivez ces étapes :

  1. Créez l’URI, comme indiqué précédemment :

    https://web.powerapps.com/webplayer/iframeapp?hideNavBar=true&
    source=powerbi&appId=/providers/Microsoft.PowerApps/apps/76897698-91a8-b2de-756e-fe2774f114f2
    
  2. Ajoutez l’URI à un iframe. Ici, nous définissons la largeur et la hauteur à 98 % afin de ne pas obtenir de barres de défilement sur notre vignette :

    <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. Accédez au tableau de bord Power BI dans lequel vous souhaitez incorporer l’application.

  4. Dans le tableau de bord, dans la barre de menus supérieure, cliquez ou appuyez sur Ajouter une vignette. Selon les limitations d’espace, il est possible que vous ne voyez que le signe plus (+).

    Ajouter une vignette dans le tableau de bord Power BI

  5. Cliquez ou appuyez sur CONTENU WEB, puis sur Suivant.

    Ajouter du contenu web à un tableau de bord

  6. Collez le code iframe dans le champ Code incorporé, puis cliquez ou appuyez sur Appliquer.

    Incorporer du code pour un contenu web

  7. La vignette doit maintenant apparaître sur le tableau de bord, et vous pouvez la déplacer où vous le souhaitez, tout comme les autres vignettes. Pour en savoir plus sur l’ajout de vignettes dans un tableau de bord, consultez la page Ajouter à votre tableau de bord des images, du texte, des vidéos, et bien plus.

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.