Programme Mère-Fille

Relier SharePoint à Power Apps

Cette manipulation vous explique comment relier SharePoint à Power Apps pour afficher les données de SharePoint dans votre application.

En effet, vous avez des données dans une liste ou une bibliothèque SharePoint. Vous aimeriez afficher ces données dans une application Power Apps.

De plus, vous voulez aussi comprendre comment ajouter les données d’une liste SharePoint à une application Power Apps existante.

Aussi, cet article vous explique comment procéder pour relier SharePoint à Power Apps.

Si vous rencontrez des erreurs dans les manipulations ci-dessous, lisez l’article qui explique comment débuguer les erreurs dans Power Apps.

Gardez à l’esprit que l’interface a pu évoluer fortement depuis que cet article a été rédigé.

Créer une liste SharePoint

Premièrement, vous allez créer une liste SharePoint avec des colonnes et du contenu, que vous utiliserez dans l’application Power Apps.

Dans ce scénario, vous allez ajouter des colonnes pour contenir une image et un lieu.

En particulier, dans votre navigateur web, ouvrez votre site SharePoint.

Ensuite, dans le site SharePoint, cliquez sur le menu + Créer puis sur Liste puis sur Liste vierge et nommez votre liste Photographies.

Ensuite, vous allez ajouter une nouvelle colonne nommée Photo de type Image.

Pour ce faire, dans la liste Photographies, cliquez sur lien + Ajouter une colonne, puis sélectionnez le type Image puis cliquez sur le bouton Suivant. Ensuite, dans le volet qui s’ouvre à droite, nommez la colonne Photo et cliquez sur le bouton Enregistrer.

Puis, vous allez ajouter une dernière colonne supplémentaire nommée Lieu de type Choix.

Pour ce faire, dans la liste Photographies, cliquez sur lien + Ajouter une colonne, puis sélectionnez le type Choix puis cliquez sur le bouton Suivant. Ensuite, dans le volet qui s’ouvre à droite, nommez la colonne Lieu, puis changez :

  • Choix 1 en Ville
  • Choix 2 en Campagne
  • Choix 3 en Montagne

Astuce : Pour changer un choix, il suffit de cliquer dans le choix.

Enfin, cliquez sur le bouton Enregistrer.

Ensuite, dans la liste Photographies, ajoutez 3 photos quelconques en indiquant un titre quelconque et en sélectionnant un lieu quelconque.a

Liste SharePoint avec une colonne Image
Liste SharePoint avec une colonne Image

Relier SharePoint à Power Apps : créer une application

Ensuite, vous allez créer une application Power Apps.

En particulier, créez un nouvel onglet dans votre navigateur web en appuyant sur les touches CTRL + T du clavier.

Puis, créez un programme vide de type Application canevas vierge (ou Zone de dessin : cela revient au même).

Composants Power Apps : Application canevas vierge
Composants Power Apps : Application canevas vierge

Lors de la création, nommez l’application comme vous voulez et choisissez le format Téléphone.

Dans ce scénario, l’application se nomme Souplesse avec un format Téléphone.

Ajouter un bandeau et un titre

Vous allez ajouter un bandeau et un titre pour éviter d’avoir un écran complètement vierge.

En particulier, dans le volet vertical qui est complètement à gauche dans Power Apps, cliquez sur l’icône + : le volet Insérer apparaît.

Ensuite, cliquez sur le choix Rectangle.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle :

  • Position
    • X : 0
    • Y : 0
  • Taille
    • Largeur : 640
    • Hauteur : 100
Propriétés du contrôle Rectangle Power Apps
Propriétés du contrôle Rectangle Power Apps

Ensuite, dans le volet Insérer, cliquez sur Étiquette de texte.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle :

  • Texte : Classique
  • Alignement du texte : Aligner au centre
  • Position
    • X : 40
    • Y : 15
  • Taille
    • Largeur : 560
    • Hauteur : 70
  • Couleur : White
Propriétés du contrôle Étiquette de texte Power Apps
Propriétés du contrôle Étiquette de texte Power Apps

Relier SharePoint à Power Apps

Ensuite, vous allez connecter la liste SharePoint à votre application Power Apps, afin que celle-ci puisse afficher le contenu de la liste SharePoint.

Pour ce faire, dans le volet vertical qui est complètement à gauche dans Power Apps, cliquez sur l’icône en forme de base de données.

Rattacher une liste SharePoint à Power Apps
Rattacher une liste SharePoint à Power Apps

Le volet Données s’ouvre.

Volet Données dans Power Apps
Volet Données dans Power Apps pour relier la liste SharePoint

Dans ce volet, cliquez sur le bouton Ajouter des données : la fenêtre Sélectionner une source s’affiche.

Volet Sélectionner une source dans Power Apps
Volet Sélectionner une source dans Power Apps

Dans cette fenêtre, tapez dans la zone Rechercher, le mot SharePoint.

Par ailleurs, dans les résultats de recherche, remarquez l’apparition de deux lignes SharePoint : cf. copie d’écran ci-dessous. Pour l’instant, ne cliquez pas sur ces résultats.

Volet Sélectionner SharePoint dans Power Apps
Volet Sélectionner SharePoint dans Power Apps

Dans les résultats de recherche, cliquez sur la ligne SharePoint dont le texte descriptif est SharePoint helps organizations share and collaborate etc.

Deux situations différentes sont possibles. Tout dépend de l’existence ou non, d’une connexion SharePoint que vous auriez pu faire auparavant.

En effet, soit vous avez déjà une connexion SharePoint existante et dans ce cas, Power Apps vous l’affiche. Si c’est le cas, passez directement à la section Connexion SharePoint Existante, et ne faites pas la section Nouvelle connexion SharePoint.

Soit, vous n’avez pas de connexion SharePoint existante et dans ce cas, Power Apps vous propose d’en créer une en affichant un volet à droite. Si c’est le cas, poursuivez avec la section Nouvelle connexion SharePoint, ci-dessous.

Nouvelle connexion SharePoint

Cette section (Nouvelle connexion SharePoint) traite du cas, où vous n’avez pas encore de connexion SharePoint existante. Si vous avez déjà une connexion SharePoint, ou pour vérifier que c’est bien votre situation, rendez-vous à la section Connexion SharePoint Existante, ci-dessous.

Un volet s’ouvre à droite : cf. copie d’écran ci-dessous.

Créer une connexion SharePoint dans Power Apps
Créer une connexion SharePoint dans Power Apps

Le premier choix (services de cloud computing) est le cas général. Notamment, quand vous utilisez SharePoint Online. C’est la situation la plus fréquente.

Le second choix (se connecter à l’aide de la passerelle de données locale) est beaucoup moins répandue. Elle concerne uniquement les personnes qui veulent développer une application Power Apps pour se connecter à un SharePoint local dans leurs locaux.

Dans ce volet, laissez le choix par défaut et cliquez sur le bouton Se connecter : le volet Se connecter à un site SharePoint s’affiche à droite.

Puis, sautez la section Connexion SharePoint existante qui est juste ci-dessous et poursuivez avec la section Se connecter au site SharePoint, qui est plus bas.

Connexion SharePoint existante

Cette section (Connexion SharePoint existante) traite du cas, où vous avez déjà une connexion SharePoint existante. Si vous n’avez pas de connexion SharePoint, rendez-vous à la section ci-dessus, qui s’intitule Nouvelle connexion SharePoint.

La connexion s’affiche dans le volet Données (à gauche) : cf. copie d’écran ci-dessous.

Connexion SharePoint existante
Connexion SharePoint existante

Ensuite, cliquez sur la connexion SharePoint.

Puis, poursuivez ci-dessous avec la section Se connecter au site SharePoint.

Se connecter au site SharePoint

Ensuite, dans ce volet, entrez l’URL de votre site ou cliquez dessus si elle s’affiche en bas.

Se connecter à un site SharePoint
Se connecter à un site SharePoint

Le volet Choisir une liste s’affiche à droite.

Ensuite, dans ce volet, cochez la case de la liste Photographies.

Choisir une liste SharePoint
Choisir une liste SharePoint

Enfin, cliquez sur le bouton Se connecter : la liaison de données SharePoint dans Power App apparaît dans le volet Données à gauche.

Liaison de données SharePoint dans Power Apps
Liaison de données SharePoint dans Power Apps

Relier SharePoint à Power Apps : afficher les données

Maintenant, que vous avez relié la liste SharePoint à Power Apps, vous allez afficher les données de la liste dans votre application Power Apps.

Notamment, dans le volet vertical qui est complètement à gauche dans Power Apps, cliquez sur l’icône en forme + : le volet Insérer apparaît.

Ensuite, cliquez sur le choix Galerie verticale.

Puis, dans le volet Sélectionner une source qui vient d’apparaître, cliquez sur Photographies.

Si, pour une raison quelconque, vous n’avez pas pu cliquer sur Photographies, ce n’est pas grave. En effet, dans le volet Galerie de droite, cliquez sur le mot Aucun de la liste déroulante Source de données et sélectionnez le choix Photographies.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle Galerie :

  • Position
    • X : 0
    • Y : 100
Afficher les données SharePoint dans la galerie
Afficher les données SharePoint dans la galerie

Ajouter des contrôles sur l’application Power Apps

L’affichage des données SharePoint dans la galerie fonctionne bien.

Toutefois, dans ce scénario, vous aimeriez voir l’image en grand quand elle est sélectionnée, ainsi que le lieu et son titre.

Aussi, dans un premier temps, vous allez positionner les contrôles pour afficher ces données.

Pour cela, dans le volet Insérer, cliquez sur Étiquette de texte.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle Étiquette de texte :

  • Position
    • X : 40
    • Y : 890
  • Taille
    • Largeur : 560
    • Hauteur : 70
Propriétés du premier contrôle étiquette de texte
Propriétés du premier contrôle étiquette de texte

Ensuite, dans le volet Insérer, cliquez à nouveau sur Étiquette de texte pour insérer un second contrôle.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle :

  • Alignement du texte : Aligner au centre
  • Position
    • X : 40
    • Y : 1000
  • Taille
    • Largeur : 560
    • Hauteur : 70
  • Bordure
    • Epaisseur : 2
Propriétés du second contrôle étiquette de texte
Propriétés du second contrôle étiquette de texte

Vous allez ajouter le contrôle de type Image.

Pour cela, dans la zone Rechercher du volet Insérer (à gauche), tapez le mot Image.

Puis, dans les résultats de recherche, cliquez sur Image.

Puis, avec la méthode de votre choix, modifiez les propriétés du contrôle Image :

  • Position
    • X : 160
    • Y : 675
  • Taille
    • Largeur : 320
    • Hauteur : 200
Propriétés du contrôle image
Propriétés du contrôle image

Afficher les données en mode Mère-Fille

Maintenant que vous avez positionné les contrôles, il ne reste plus qu’à les alimenter.

En particulier, dans le volet vertical qui est complètement à gauche dans Power Apps, cliquez sur l’icône en forme de 3 feuilles de papier superposées : le volet Arborescence apparaît.

Dans la copie d’écran ci-dessous, vous trouverez la correspondance entre le nom des contrôles et leur emplacement. En effet, vos contrôles peuvent avoir des noms différents.

Cette copie d’écran vous permettra d’adapter à votre application les manipulations suivantes qui reposent sur le nom des contrôles.

Arborescence de l'application Power Apps
Arborescence de l’application Power Apps

Pour alimenter la partie basse (l’image et les deux textes), le principe est de récupérer l’élement sélectionné dans la galerie.

Concrètement, l’élément sélectionné dans ce scénario est l’objet :

Gallery2.Selected
Controles enfant du controle galerie
Controles enfant du controle galerie

Dans Gallery2 :

  • L’image est stockée dans Image2
  • Le titre est stocké dans Title2
  • Le lieu est stocké dans Subtitle2

Dans un premier temps, vous allez alimenter le contrôle Image.

Premièrement, cliquez sur le contrôle Image4 pour le sélectionner.

Ensuite, dans le volet Image (à droite), cliquez sur l’onglet Avancé.

Dans cet onglet, remplacez le mot SampleImage de la propriété Image par :

Gallery2.Selected.Image2

Deuxièmement, cliquez sur le contrôle Label3 pour le sélectionner.

Ensuite, dans le volet Étiquette (à droite), cliquez sur l’onglet Avancé.

Dans cet onglet, remplacez le mot « Texte » (avec les guillemets) de la propriété Text par :

Gallery2.Selected.Title2

Troisièmement, cliquez sur le contrôle Label4 pour le sélectionner.

Ensuite, dans le volet Étiquette (à droite), cliquez sur l’onglet Avancé.

Dans cet onglet, remplacez le mot « Texte » (avec les guillemets) de la propriété Text par :

Gallery2.Selected.Subtitle2

Relier SharePoint à Power Apps : vérification

Pour vérifier le bon fonctionnement, appuyez sur la touche F5 de votre clavier.

Ensuite, cliquez sur chaque élément de la liste pour vérifier qu’il s’affiche bien dans la partie basse de l’écran.

Relier SharePoint à Power Apps
Relier SharePoint à Power Apps

Puis, fermez l’exécution en cours.

Puis, enregistrez votre application avec les touches CTRL + S du clavier.

Enfin, publiez votre application avec les touches CTRL + Maj + P du clavier.

Ensuite, cliquez sur la flèche Précédent (en haut, à gauche) : un pop-up demande s’il faut quitter.

Dans ce pop-up, cliquez sur Quitter : la liste des applications Power Apps s’affiche.

Résumé

En résumé, vous avez appris à créer une liste SharePoint.

Puis, vous avez aussi vu comment ajouter une colonne de type image à la liste SharePoint.

Par ailleurs, vous avez aussi appris à relier SharePoint à Power Apps, grâce à une connexion.

Ensuite, vous avez affiché les données de la liste SharePoint dans une galerie.

Enfin, vous avez pu mettre en place un affichage de type Mère-Fille pour afficher le détail d’un élément de la liste.

Pour aller plus loin

Ensuite, consultez aussi l’article qui explique comment Cacher la barre Power Apps.

Commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *