Trasferisci immagini e firme da Power Apps a Power Automate

In questo post impareremo come trasferire immagini e firme da Power Apps alla piattaforma Microsoft Power Automate. Questo è un po' difficile da fare perché Power Apps non ha un modo predefinito per modificare e caricare le immagini in SharePoint.

L'esempio su cui lavoreremo è un'app per le spese che ho usato in precedenza. Fondamentalmente, questa è una galleria che si collega a un elenco di SharePoint.

E se seleziono qualcosa in questa galleria, sostanzialmente aggiorna questo modulo sul lato destro.

Posso quindi andare in questo modulo sulla destra e modificarlo.

Andremo al nostro elenco SharePoint e aggiungeremo una colonna immagine chiamata Signature .

Andiamo a Power Apps e aggiungiamo la colonna dell'immagine in questo modulo. Faremo quindi clic su Modifica campi , quindi su Aggiungi campo e selezioneremo Firma dal campo a discesa.

Noterai che siamo in grado di aggiungerlo, ma non possiamo fare cose come caricare immagini. Se clicchiamo su Modifica , ad esempio, possiamo modificare tutto tranne aggiornare l'immagine della firma. Se lo stiamo facendo su un iPad, sarebbe bello se potessimo effettivamente utilizzare lo schermo per digitare o scrivere una firma prima di inviare questo record, ma sfortunatamente non siamo autorizzati a farlo.

Sommario

• Caricamento di immagini e creazione di firme
• Creazione di un flusso della piattaforma Microsoft Power Automate
• Connessione di Power Apps alla piattaforma Microsoft Power Automate
• Definizione degli argomenti nella piattaforma Microsoft Power Automate
• Creazione di una variabile per ogni immagine
• Conversione del codice URI in codice binario
• Conclusione

Caricamento di immagini e creazione di firme

Power Apps non ha una funzionalità per questo, ma Power Automate può venire in soccorso e aiutarci. Quindi ecco come possiamo farlo.

Innanzitutto, abbiamo bisogno di un modo per consentire a un utente di inviare effettivamente un'immagine e tracciare una firma. Se facciamo clic sul segno +, viene aggiunta una nuova nota spese e se facciamo clic sul segno di spunta, otteniamo questa finestra popup.

Se torniamo indietro non succede niente. Ma se clicchiamo su Invia , la nota spese va a buon fine. Aggiungeremo la possibilità per un utente di caricare un'immagine e disegnare una firma. Quindi andiamo su Media e poi su Aggiungi immagine . Questo controllo ci consente sostanzialmente di aggiungere foto.

E quindi fare clic su Input quindi su Pen input . Questo ci permette di disegnare la nostra firma.

Rendiamo questo modello un po' più grande in modo da avere più spazio per farlo.

E poi aggiungeremo alcune etichette qui sotto solo per mostrare a tutti cosa stiamo facendo.

Sulla sinistra, l'etichetta indicherà Carica ricevute e sul lato destro, sarà Firma .

Creazione di un flusso della piattaforma Microsoft Power Automate

La prossima cosa che dobbiamo fare è creare un flusso di Power Automate che fondamentalmente prenda il controllo della ricevuta di caricamento e il controllo della firma e li carichi nella nostra raccolta documenti di spese, ricevute e firme di SharePoint. Ancora una volta, non c'è modo di farlo direttamente in Power Apps e dovremo usare Power Automate.

Facciamo clic su Nuovo flusso e selezioniamo Flusso cloud istantaneo .

Selezioneremo Power Apps come modo per attivare questo flusso, chiameremo questo UploadStuff e faremo clic su Crea .

Andremo al nostro connettore SharePoint e selezioneremo Crea file .

Abbiamo bisogno di un indirizzo del sito e di un percorso di cartella, che in questo caso si chiama /expensereceiptsandsignature.

Per il nome del file, probabilmente vogliamo che il nome della ricevuta di spesa e la firma siano identici al nome del titolo effettivo della ricevuta di spesa. Chiederemo a Power Apps il nome file e il contenuto del file .

Faremo quindi clic su Nuovo passaggio e poi faremo di nuovo la stessa cosa, perché abbiamo bisogno di un file Crea per la foto della ricevuta di spesa effettiva e un altro per la firma che verrà caricata. Solo il contenuto del file sarà diverso, cosa che dobbiamo richiedere all'interno di Power Apps.

Ora abbiamo finalmente creato il nostro flusso di lavoro.

Connessione di Power Apps alla piattaforma Microsoft Power Automate

L'ultima cosa che dobbiamo fare è connettere Power Apps a Power Automate. Quindi, se aggiungiamo una nuova spesa e selezioniamo il segno di spunta, otteniamo di nuovo questo modello.

Se facciamo clic sul pulsante di invio, tutto ciò che fa questo modello è inviare il modulo e reimpostare la visibilità su false.

Dobbiamo tornare alla schermata principale e attivare questo flusso. Ma prima, copieremo ciò che c'è sulla barra degli effetti e lo taglieremo in modo che venga salvato nei nostri appunti. Quindi andremo su Action , faremo clic su Power Automate , quindi selezioneremo UploadStuff , che è di nuovo il flusso di lavoro di Power Automate che avevamo appena creato. Questo importerà quindi il flusso di lavoro nelle nostre Power Apps.

Definizione degli argomenti nella piattaforma Microsoft Power Automate

Dobbiamo definire una serie di argomenti che abbiamo specificato all'interno di Power Automate. Il primo argomento che dobbiamo specificare è il nome effettivo del file che vogliamo chiamarlo, che nel nostro caso sarà uguale al titolo della nota spese che stiamo inviando, che è memorizzata in DataCardValue1.

Abbiamo anche bisogno dell'immagine effettiva della ricevuta che stiamo caricando e incollare tutti gli altri comandi che avevamo prima.

Ora è qui che le cose si fanno complicate e per complicate, purtroppo intendo molto complicate. Se inviamo questo, ciò che dovrebbe accadere è che UploadedImage1.Image e Pen.Input2.Image dovrebbero passare attraverso il flusso di lavoro e saranno il contenuto del file che verrebbe creato.

Tuttavia, tieni presente che UploadedImage1.Image in realtà non fa riferimento all'immagine stessa. Si riferisce a un percorso che Microsoft ha creato per sapere dove caricare l'immagine. Quindi non è proprio il codice dell'immagine vero e proprio; è un percorso casuale a cui solo Microsoft ha accesso. L'immagine verrà salvata, ma sarà un file di testo casuale che non sarai in grado di comprendere.

Quindi dobbiamo apportare alcune modifiche utilizzando questo codice:

Creazione di una variabile per ogni immagine

La prima cosa che dobbiamo fare è creare una variabile per ogni immagine. Creeremo una variabile chiamata varImage1 che sarà uguale alla rappresentazione JSON dell'immagine caricata. Vogliamo anche includere i dati binari nel JSON.

Prenderemo quindi l'output di questa funzione che è memorizzato in varImage1 e creeremo un'altra variabile chiamata varImageTrimmed , che sostanzialmente prende varImage1 e ne taglia le estremità usando la funzione Mid.

Prendiamo l'immagine caricata e la convertiamo in un URI, un pezzo di codice memorizzato in forma di testo che rappresenta ciò che l'immagine è effettivamente. Quindi lo prendiamo e togliamo i primi due caratteri e gli ultimi due caratteri di quel testo, perché quelli sono identificatori di formato di cui non abbiamo bisogno.

Quindi, eseguiremo lo stesso processo per la firma e sostituiremo l'immagine con PenInput2 e la chiameremo varSig1 .

Conversione del codice URI in codice binario

Abbiamo già detto che Power Automate non è un percorso casuale verso un'immagine; invece, è il codice URI dell'immagine stessa, che è fondamentalmente la rappresentazione testuale di quell'immagine. Non possiamo semplicemente passare quell'immagine testuale, quindi dobbiamo convertire il codice che riceviamo in codice binario che SharePoint può leggere.

Tutti i file sono in codice binario, quindi dobbiamo andare su Expression e utilizzare una funzione che converte l'URI in binario. Inseriremo questa espressione nell'elemento del contenuto del file di questa azione e quindi faremo clic su Salva .

L'unica cosa che ci resta da fare è assicurarci che i file non abbiano lo stesso nome. Vogliamo che il primo file sia l'immagine e il secondo la firma. Quindi possiamo modificare il primo con _receipt.jpg e il secondo con _signature.jpg.

Proviamolo per vedere se funziona. Inizieremo con una nuova nota spese per un nuovo iPad che costa $ 400.

Dopo aver fatto clic sul segno di spunta, possiamo aggiungere l'immagine e la firma.

Possiamo caricare la nostra ricevuta e aggiungere la nostra firma.

Possiamo quindi fare clic su Invia . Per confermare, andiamo al nostro elenco di SharePoint per l'invio delle spese per vedere se l'elemento pubblicitario è stato creato.

In aggiunta a ciò, se andiamo a Spese ricevute e firme, vediamo la nuova ricevuta dell'iPad e la nuova firma dell'iPad, che corrispondono entrambe al titolo della nota spese che abbiamo appena creato.

Queste sono immagini reali e possiamo effettivamente vederle mentre se dovessimo farlo alla vecchia maniera, questi sarebbero invece solo file di testo.

Conclusione

Pensa per un momento a quanto sia potente. Ora abbiamo un modo per creare un'applicazione che consente alle persone di scattare foto e firme e inserirle in un flusso di lavoro della piattaforma Microsoft Power Automate. In questo caso, li stiamo usando per archiviare i file nelle raccolte documenti. La cosa fondamentale che abbiamo imparato oggi è come spostare i dati relativi a immagini e firme da Power Apps a Power Automate.

Se ti sono piaciuti i contenuti trattati in questo particolare tutorial, non dimenticare di iscriverti al canale TV LuckyTemplates. Abbiamo un'enorme quantità di contenuti che escono continuamente da me e da una serie di creatori di contenuti, tutti dedicati a migliorare il modo in cui utilizzi LuckyTemplates e Power Platform.

Enrico