Transférer des images et des signatures de Power Apps vers Power Automate

Dans cet article, nous allons apprendre à transférer des images et des signatures de Power Apps vers la plateforme Microsoft Power Automate. C'est un peu difficile à faire car Power Apps n'a pas de méthode par défaut pour modifier et télécharger des images sur SharePoint.

L'exemple sur lequel nous allons travailler est une application de dépenses que j'ai déjà utilisée. Fondamentalement, il s'agit d'une galerie qui s'attache à une liste SharePoint.

Et si je sélectionne quelque chose dans cette galerie, cela met essentiellement à jour ce formulaire sur le côté droit.

Je peux alors aller dans ce formulaire à droite et le modifier.

Nous allons accéder à notre liste SharePoint et ajouter une colonne d'image appelée Signature .

Allons à Power Apps et ajoutons cette colonne d'image dans ce formulaire. Nous allons donc cliquer sur Modifier les champs puis sur Ajouter un champ et sélectionner Signature dans le champ déroulant.

Vous remarquerez que nous pouvons l'ajouter, mais nous ne pouvons pas faire des choses comme télécharger des images. Si nous cliquons sur Modifier , par exemple, nous pouvons tout modifier sauf mettre à jour l'image de la signature. Si nous faisons cela sur un iPad, ce serait bien si nous pouvions utiliser l'écran pour taper ou écrire une signature avant de soumettre ce dossier, mais malheureusement nous ne sommes pas autorisés à le faire.

Table des matières

• Téléchargement d'images et création de signatures
• Création d'un flux de plateforme Microsoft Power Automate
• Connexion de Power Apps à la plateforme Microsoft Power Automate
• Définition des arguments dans la plateforme Microsoft Power Automate
• Création d'une variable pour chaque image
• Conversion du code URI en code binaire
• Conclusion

Téléchargement d'images et création de signatures

Power Apps n'a pas de fonctionnalité pour cela, mais Power Automate peut venir à la rescousse et nous aider. Alors, voici comment nous pouvons faire cela.

Tout d'abord, nous avons besoin d'un moyen pour un utilisateur de soumettre une image et de dessiner une signature. Si nous cliquons sur le signe +, cela ajoute une nouvelle note de frais, et si nous cliquons sur la coche, nous obtenons cette boîte contextuelle.

Si nous revenons, rien ne se passe. Mais si nous cliquons sur Soumettre , la note de frais passe. Nous allons ajouter la possibilité pour un utilisateur de télécharger une image et de dessiner une signature. Allons donc dans Média , puis dans Ajouter une image . Ce contrôle nous permet essentiellement d'ajouter des photos.

Et puis cliquez sur Input puis Pen input . Cela nous permet de dessiner notre signature.

Agrandissons un peu ce modèle afin d'avoir plus d'espace pour le faire.

Et puis nous ajouterons quelques étiquettes ci-dessous juste pour montrer à tout le monde ce que nous faisons.

Sur la gauche, l'étiquette indiquera Télécharger les reçus et sur le côté droit, ce sera Veuillez signer .

Création d'un flux de plateforme Microsoft Power Automate

La prochaine chose que nous devons faire est de créer un flux Power Automate qui prend essentiellement le contrôle des reçus de téléchargement et le contrôle des signatures et les télécharge dans notre bibliothèque de documents de dépenses, de reçus et de signatures SharePoint. Encore une fois, il n'y a aucun moyen de le faire directement dans Power Apps et nous devrons utiliser Power Automate.

Cliquons sur Nouveau flux et sélectionnons Flux cloud instantané .

Nous allons sélectionner Power Apps comme moyen de déclencher ce flux, appeler ce UploadStuff et cliquer sur Créer .

Nous allons accéder à notre connecteur SharePoint et sélectionner Créer un fichier .

Nous avons besoin d'une adresse de site et d'un chemin de dossier, qui dans ce cas s'appelle /expensereceiptsandsignature.

Pour le nom du dossier, on souhaite probablement que le nom de la note de frais et la signature soient identiques au nom du titre réel de la note de frais. Nous demanderons à Power Apps le nom du fichier et le contenu du fichier .

Nous allons ensuite cliquer sur Nouvelle étape , puis refaire la même chose, car nous avons besoin d'un fichier Créer pour la photo du reçu de dépenses réelle et d'un autre pour la signature qui va être téléchargée. Seul le contenu du fichier sera différent, ce que nous devons demander dans Power Apps.

Nous avons enfin créé notre flux de travail.

Connexion de Power Apps à la plateforme Microsoft Power Automate

La dernière chose que nous devons faire est de connecter Power Apps à Power Automate. Donc, si nous ajoutons une nouvelle dépense et sélectionnons la coche, nous obtenons à nouveau ce modèle.

Si nous cliquons sur le bouton de soumission, tout ce que fait ce modèle est de soumettre le formulaire et de remettre la visibilité à false.

Nous devons revenir à l'écran principal et activer ce flux. Mais d'abord, nous allons copier ce qui se trouve sur la barre d'effets et le couper juste pour qu'il soit enregistré dans notre presse-papiers. Ensuite, nous irons à Action , cliquez sur Power Automate , puis sélectionnez UploadStuff , qui est à nouveau le flux de travail Power Automate que nous venons de créer. Cela importera ensuite le flux de travail dans nos Power Apps.

Définition des arguments dans la plateforme Microsoft Power Automate

Nous devons définir un ensemble d'arguments que nous avons spécifiés dans Power Automate. Le premier argument que nous devons spécifier est le nom de fichier réel que nous voulons l'appeler, qui dans notre cas sera égal au titre de la note de frais que nous soumettons, qui est stocké dans DataCardValue1.

Nous avons également besoin de l'image réelle du reçu que nous téléchargeons et collons toutes les autres commandes que nous avions auparavant.

Maintenant, c'est là que les choses se compliquent et par délicates, je veux dire malheureusement très délicates. Si nous soumettons ceci, ce qui devrait arriver, c'est que UploadedImage1.Image et Pen.Input2.Image devraient passer par le flux de travail et ils verront le contenu du fichier qui serait créé.

Cependant, notez que UploadedImage1.Image ne fait pas référence à l'image elle-même. Il fait référence à un chemin que Microsoft a créé pour qu'il sache où télécharger l'image. Ce n'est donc pas vraiment le code d'image lui-même ; c'est un chemin aléatoire auquel seul Microsoft a accès. L'image sera enregistrée, mais ce sera un fichier texte aléatoire que vous ne pourrez pas comprendre.

Nous devons donc faire quelques ajustements en utilisant ce code :

Création d'une variable pour chaque image

La première chose que nous devons faire est de créer une variable pour chaque image. Nous allons créer une variable appelée varImage1 qui sera égale à la représentation JSON de l'image téléchargée. Nous souhaitons également inclure les données binaires dans le JSON.

Nous prendrons ensuite la sortie de cette fonction qui est stockée dans varImage1 et créerons une autre variable appelée varImageTrimmed , qui prend essentiellement la varImage1 et en coupe les extrémités à l'aide de la fonction Mid.

Nous prenons l'image téléchargée et la convertissons en un URI - un morceau de code qui est stocké sous forme de texte qui représente ce que l'image est réellement. Nous prenons ensuite cela et supprimons les deux premiers caractères et les deux derniers caractères de ce texte, car ce sont des identificateurs de format dont nous n'avons pas besoin.

Ensuite, nous ferons le même processus pour la signature et remplacerons l'image par PenInput2 et l'appellerons varSig1 .

Conversion du code URI en code binaire

Nous avons déjà dit que Power Automate n'est pas un chemin aléatoire vers une image ; c'est plutôt le code URI de l'image elle-même, qui est essentiellement la représentation textuelle de cette image. Nous ne pouvons pas simplement transmettre cette image textuelle, nous devons donc convertir le code que nous recevons en code binaire que SharePoint peut lire.

Tous les fichiers sont en code binaire, nous devons donc aller dans Expression et utiliser une fonction qui convertit l'URI en binaire. Nous allons mettre cette expression dans l'élément de contenu du fichier de cette action, puis cliquer sur Enregistrer .

La seule chose qu'il nous reste à faire est de nous assurer que les fichiers ne portent pas le même nom. Nous voulons que le premier fichier soit l'image et le second fichier soit la signature. Nous pouvons donc éditer le premier avec _receipt.jpg et le second avec _signature.jpg.

Essayons-le pour voir si cela fonctionne. Nous allons commencer avec un nouveau rapport de dépenses pour un nouvel iPad coûtant 400 $.

Une fois que nous avons cliqué sur la coche, nous pouvons ajouter l'image et la signature.

Nous pouvons télécharger notre reçu et ajouter notre signature.

On peut alors cliquer sur Soumettre . Pour confirmer, allons dans notre liste SharePoint de soumission de dépenses pour voir si cet élément de ligne a été créé.

En plus de cela, si nous allons dans Reçus de dépenses et signatures, nous voyons le nouveau reçu iPad et la nouvelle signature iPad, qui correspondent tous deux au titre de la note de frais que nous venons de créer.

Ce sont de vraies images et nous pouvons réellement les voir alors que si nous devions le faire à l'ancienne, ce ne seraient que des fichiers texte à la place.

Conclusion

Pensez un instant à quel point c'est puissant. Nous avons maintenant un moyen de créer une application permettant aux utilisateurs de prendre des photos et des signatures, et de les intégrer dans un flux de travail de la plateforme Microsoft Power Automate. Dans ce cas, nous les utilisons pour stocker des fichiers dans des bibliothèques de documents. L'élément clé que nous avons appris aujourd'hui est de savoir comment déplacer les données liées aux images et aux signatures de Power Apps vers Power Automate.

Si vous avez apprécié le contenu couvert dans ce didacticiel particulier, n'oubliez pas de vous abonner à la chaîne de télévision LuckyTemplates. Nous avons une énorme quantité de contenu qui sort tout le temps de moi-même et d'une gamme de créateurs de contenu - tous dédiés à l'amélioration de la façon dont vous utilisez LuckyTemplates et Power Platform.

Henri