Stocker les photos de l'appareil photo PowerApp dans SharePoint ou OneDrive

Pour capturer une photo prise depuis une PowerApp, nous allons tirer parti du contrôle Camera pour capturer une image et la transmettre à un flux qui l'enregistrera sur SharePoint sur OneDrive. Le processus repose sur l'expression de flux de travail Base64ToBinary () que nous appellerons dans le flux pour convertir le format d'image reçu de PowerApps (base64) dans le format correct à stocker dans SharePoint ou OneDrive (binaire). Commençons.

Configuration de l’emplacement de stockage

Comme indiqué ci-dessus, OneDrive et SharePoint disposent d’une action Create File qui peut être utilisée et qui sont relativement interchangeables. En utilisant le cas d'utilisation d'un chargeur de reçu, je vais utiliser SharePoint pour cette démonstration. Nous allons simplement créer une simple bibliothèque appelée «Reçus».

Bibliothèque créée pour stocker les récépissés. Les champs prêts à l'emploi suffiront.

Création du flux

Nous allons ensuite créer le flux qui gérera la conversion. Ce flux sera déclenché à partir de PowerApp et utilisera plusieurs arguments différents pour stocker le document.

REMARQUE: une fois que vous commencez à demander des propriétés, il est difficile d'annuler avec un déclencheur PowerApps. Il est préférable d’obtenir d’abord toutes vos actions, de voir ce dont vous avez besoin, puis de demander les propriétés dans l’ordre que vous préférez.

Étapes initiales

1. Créez un flux à partir de blanc et utilisez le déclencheur avec le Les déclencheurs PowerApp à partir du connecteur PowerApps. Nous pourrons ultérieurement déclencher cela dans l'application sous forme d'appel de fonction.
2. L'étape suivante consistera à convertir les données du fichier que nous avons obtenues de PowerApp en un objet utilisable que Flow peut gérer. Il s'agit de l'action Compose distincte du connecteur «Opérations de données». Pour le moment, laissez la propriété Inputs vide et nous y reviendrons dans un instant.
   

   Action de composition des opérations sur les données – Utilisée pour créer des objets

3. La troisième étape consiste à sélectionner l'action Créer un fichier pour la plate-forme que vous souhaitez utiliser. Une fois que vous avez sélectionné votre action, vous pouvez maintenant demander les propriétés Nom de fichier et File Content .
   

   Vous pouvez demander que n'importe quel type de champ soit fourni par PowerApp

4. Après avoir demandé les deux propriétés, vous verrez qu'elles sont disponibles pour être utilisées dans le panneau d'outils.
   

   Passez l'argument de contenu de fichier à l'action Compose.

Base64ToBinary Magic

Pour stocker l'image, nous devons convertir en binaire afin que l'action Create File puisse correctement stocker le fichier. C’est ici que la fonction Base64ToBinary () entre en jeu.

1. Tout d’abord dans le panneau Expression, entrez la fonction et placez le curseur dans la parenthèse.
   

   La fonction fournit également intellisense pour les paramètres nécessaires.

2. Basculez ensuite vers le panneau de contenu dynamique et sélectionnez la propriété FileContent que nous avions précédemment demandée. l'expression devrait se lire:

   base64ToBinary (triggerBody () [' nom de la variable de contenu du fichier '])

   REMARQUE: Si vous suivez à la lettre les instructions, le nom de la propriété de contenu doit être “CreateFile_FileContent” ”. [19659029] Une fois que vous avez rempli la fonction (voir capture d'écran ci-dessous), appuyez sur "OK". Exemple de formule dans le panneau Outils avant de cliquer sur "OK".

Flux final

Si vous avez suivi les étapes ci-dessus. votre Flow devrait ressembler à la capture d'écran ci-dessous. Une fois que tout va bien, sauvegardez et le flux est fini.

Assurez-vous que l'entrée pour la fonction Compose comporte le symbole «Fx» et le texte «base64ToBinar…»

REMARQUE IMPORTANTE: Une fois que vous enregistrez et quittez, si vous revenez dans le flux, le champ Compose Inputs peut être réinitialisé pour n'être plus que la propriété FileContent . Vous devrez réinitialiser cette option pour utiliser la fonction base64, sinon elle se cassera lorsque vous la sauvegarderez.

Construisez l’application PowerApp

Nous allons maintenant appeler la fonction à partir de PowerApp. Gardez-le aussi simple que possible. Créez à partir d'un modèle vierge (tablette ou mobile, c'est bien) et sur la page, nous ajouterons un contrôle de la caméra. J’ai étendu le contrôle de la caméra pour couvrir l’ensemble de l’écran du mobile (à part un en-tête) afin que l’utilisateur puisse facilement cliquer. J'ai également ajouté une étiquette au bas de l'écran pour indiquer à l'utilisateur d'appuyer sur l'appareil photo pour prendre la photo.

REMARQUE: il est important d'utiliser le gestionnaire d'événements OnSelect sur le L'appareil photo se commande car, sinon, la photo ne sera pas correctement capturée.

Nous ne souhaitons pas que l'utilisateur charge automatiquement l'image sans contrôle, nous allons donc créer une expérience utilisateur lui permettant de examinez d'abord l'image. Pour ce faire, nous avons paramétré le gestionnaire OnSelect du contrôle de la caméra sur: ClearCollect ( receivePhoto Camera1.Photo); UpdateContext ({ invoiceTaken [true]). )

Ceci stockera la photo de l'appareil photo dans une collection appelée « receivePhoto », et mettra également à jour une variable appelée « receiveTaken » à true. Cette variable contrôle la visibilité d'un deuxième ensemble d'objets regroupés pour afficher une copie de l'image capturée. Une fois que cela est vrai, quelques composants sont utilisés pour afficher l'aperçu.

Expérience de panel de prévisualisation

Pour permettre à l'utilisateur de revoir sa photo, nous allons insérer cinq composants et les regrouper. Nous devrons ensuite configurer leur propriété visibilité pour qu'elle soit dynamique en fonction de la variable receiveTaken. Cela aidera l'utilisateur à prendre une photo, à la prévisualiser et à la reprendre si elle n'est pas acceptable.

1. Icônes> Boîte – Une boîte permettant de couvrir la autre contenu pour focaliser le panneau de prévisualisation (pensez à une ombre derrière un modal)
   1. note –
2. Média> Image – Composant d'image configuré pour afficher l'image d'aperçu. La propriété d'image sera définie sur: First ( receivePhoto ). Url
3. Text> Label – Étiquette présentant le nom de fichier généré. Cela peut être généré de différentes manières, mais pour rester simple, définissons la propriété Text sur:
   "Receipt -" & Text (Today (), "[$-en-US] mm_dd_yyyy") & ". png "
4. Texte> Étiquette – Une deuxième étiquette pour afficher la chaîne de contenu (il s'agit de la version de chaîne de la chaîne en base64. Ce n'est pas obligatoire, mais il est utile pour les tests). Nous définissons la propriété Text comme suit:
   First ( receivePhoto ). Url
5. Button> Button – Un bouton “reprendre” pour masquer le panneau de prévisualisation et permettre l'utilisateur de reprendre une photo. Le gestionnaire Onselect est le suivant:
   UpdateContext ({reçuTaken: false})
6. Button – Et enfin le bouton «Enregistrer dans SharePoint». Ce bouton a une fonction lourde configurée pour son gestionnaire Onselect en place, alors on le décompose davantage.

Utilisation de la fonction Flow pour enregistrer l’image

Maintenant que nous avons créé notre Flow pour effectuer la Conversion et stockage de documents, nous pouvons revenir à PowerApp pour connecter le flux à notre bouton d'envoi original. Dans l'éditeur PowerApps, sous l'onglet Action sélectionnez Flux. Cela affichera un panneau où vous pourrez voir tous vos flux avec des déclencheurs définis sur PowerApps. Sélectionnez le bouton Save to SharePoint puis sélectionnez le flux créé précédemment dans le panneau. En sélectionnant d'abord le bouton, l'appel de flux est automatiquement appliqué au gestionnaire d'événements OnSelect . Selon l'ordre que vous avez demandé à PowerApps de configurer vos propriétés, votre intellisense peut être différent, mais la propriété content est la partie la plus importante à définir:

Formule générale:

ReceiptUploader.Run ("Receipt" - "& Text (Today ()," [$-en-US] mm_dd_yyyy ") &". Png ", substitut (First (receivePhoto) .Url," data: image / png; base64, "," ")); Notify ("Votre reçu a été enregistré", NotificationType.Success); Naviguer (DetailScreen1, ScreenTransition.Fade)

Propriété FileContent_FileName

identique à l'étiquette – "Réception -" & texte Today (), "[$-en-US] mm_dd_yyyy") & ".png"

FileContent_FileContent: Property

Nous utilisons ici la fonction de substitution pour supprimer les détails de codage préfixés:

. Substitute (First (reçuPhoto) .Url, "données: image / png; base64,", ")

À la fin de la fonction, nous configurons une simple notification pour qu'elle apparaisse et dirige l'utilisateur vers un autre écran. . Nous allons terminer ici, mais un autre élément à manipuler serait qu'un utilisateur accédant à cette page devrait avoir la fonction de navigation met également à jour la variable receptionTaken en false pour s'assurer que le panneau de prévisualisation est '.

Assurez-vous de bien enregistrer et publier votre PowerApp. Vous êtes maintenant prêt pour les tests!

Prêt pour les tests

Lorsque l'application est enregistrée, vous pouvez désormais tester l'application. (mes captures d'écran portent le préfixe «134» au lieu de «reçu».)

Mon plafond (avant la photo)

Panneau d'aperçu de mon plafond

Une fois que j'ai appuyé sur «Enregistrer le reçu», vous devriez alors obtenir le Notification en haut de l'écran.

Et enfin dans SharePoint, vous devriez voir votre reçu.

Et votre Terminé! Maintenant, avec la base construite, cela peut être étendu pour être intégré à n'importe quel cas d'utilisation (téléchargeur de reçu, ouvriers de terrain, etc.). La référence à ce fichier peut être stockée dans une liste de suivi distincte du flux ou l'expérience de PowerApp peut être de générer le nom du reçu en fonction d'autres champs. Les PowerApp ne peuvent pas encore lire les bibliothèques de documents, mais