Överför bilder och signaturer från Power Apps till Power Automate

I det här inlägget ska vi lära oss hur du överför bilder och signaturer från Power Apps till Microsoft Power Automate-plattformen. Detta är lite svårt att göra eftersom Power Apps inte har ett standardsätt för att redigera och ladda upp bilder till SharePoint.

Exemplet vi kommer att arbeta med är en utgiftsapp som jag har använt tidigare. I grund och botten är detta ett galleri som ansluter till en SharePoint-lista.

Och om jag väljer något i det här galleriet, uppdaterar det i princip det här formuläret på höger sida.

Jag kan sedan gå in i det här formuläret till höger och redigera det.

Vi går till vår SharePoint-lista och lägger till en bildkolumn som heter Signatur .

Låt oss gå till Power Apps och lägga till bildkolumnen i det här formuläret. Så vi klickar på Redigera fält och sedan på Lägg till fält och väljer Signatur från rullgardinsmenyn.

Du kommer att märka att vi kan lägga till det, men vi kan inte göra saker som att ladda upp bilder. Om vi ​​klickar på till exempel Redigera kan vi redigera allt utom att uppdatera signaturens bild. Om vi ​​gör detta på en iPad skulle det vara trevligt om vi faktiskt kunde använda skärmen för att skriva in eller skriva in en signatur innan vi skickar in den här posten, men det får vi tyvärr inte göra.

Innehållsförteckning

• Ladda upp bilder och skapa signaturer
• Skapa ett Microsoft Power Automate-plattformsflöde
• Ansluta Power Apps till Microsoft Power Automate-plattformen
• Definiera argument i Microsoft Power Automate Platform
• Skapa en variabel för varje bild
• Konvertera URI-kod till binär kod
• Slutsats

Ladda upp bilder och skapa signaturer

Power Apps har ingen funktionalitet för det, men Power Automate kan komma till undsättning och hjälpa oss. Så här är hur vi kan göra det.

Först behöver vi ett sätt för en användare att faktiskt skicka in en bild och rita en signatur. Om vi ​​klickar på +-tecknet lägger det till en ny utgiftsrapport, och om vi klickar på bocken får vi denna popup-ruta.

Om vi ​​går tillbaka händer ingenting. Men om vi klickar på Skicka går utgiftsrapporten igenom. Vi kommer att lägga till en möjlighet för en användare att ladda upp en bild och rita en signatur. Så låt oss gå till Media och sedan gå till Lägg till bild . Denna kontroll låter oss i princip lägga till foton.

Och klicka sedan på Inmatning och sedan på Penninmatning . Detta gör att vi kan rita vår signatur.

Låt oss göra den här modellen lite större så att vi har mer utrymme att göra detta.

Och sedan lägger vi till några etiketter nedan bara för att visa alla vad vi gör.

Till vänster står det Ladda upp kvitton på etiketten och till höger står det Vänligen underteckna .

Skapa ett Microsoft Power Automate-plattformsflöde

Nästa sak vi behöver göra är att skapa ett Power Automate-flöde som i princip tar kontroll över uppladdningskvitto och signaturkontroll och laddar upp dem till vårt SharePoint-utgifts-, kvitton- och signaturdokumentbibliotek. Återigen, det finns inget sätt att göra detta direkt i Power Apps och vi måste använda Power Automate.

Låt oss klicka på Nytt flöde och välja Instant molnflöde .

Vi väljer Power Apps som sättet att utlösa detta flöde, kallar det här UploadStuff och klickar på Skapa .

Vi går till vår SharePoint-anslutare och väljer Skapa fil .

Vi behöver en platsadress och en mappsökväg, som i det här fallet kallas /expensereceiptsandsignature.

För namnet på filen vill vi troligen att namnet på utläggskvittot och signaturen ska vara identiskt med namnet på utgiftskvittots faktiska titel. Vi kommer att fråga Power Apps om filnamnet och filinnehållet .

Vi klickar sedan på Nytt steg och gör sedan samma sak igen, eftersom vi behöver en Skapa-fil för själva utgiftskvittofotot och en annan för signaturen som ska laddas upp. Endast filinnehållet kommer att vara annorlunda, vilket vi måste be om i Power Apps.

Nu har vi äntligen skapat vårt arbetsflöde.

Ansluta Power Apps till Microsoft Power Automate-plattformen

Det sista vi behöver göra är att ansluta Power Apps till Power Automate. Så om vi lägger till en ny utgift och markerar bocken får vi den här modellen igen.

Om vi ​​klickar på skicka-knappen är allt den här modellen gör att skicka in formuläret och ställa tillbaka synligheten till falsk.

Vi måste gå tillbaka till huvudskärmen och aktivera detta flöde. Men först kopierar vi det som finns på fx- fältet och klipper det bara så att det sparas i vårt urklipp. Sedan går vi till Action , klickar på Power Automate och väljer sedan UploadStuff , vilket återigen är Power Automate-arbetsflödet som vi just skapat. Detta kommer sedan att importera arbetsflödet till våra Power Apps.

Definiera argument i Microsoft Power Automate Platform

Vi måste definiera ett gäng argument som vi har specificerat inom Power Automate. Det första argumentet som vi behöver ange är det faktiska filnamnet som vi vill kalla det, vilket i vårt fall kommer att vara lika med titeln på utgiftsrapporten som vi skickar in, som lagras i DataCardValue1.

Vi behöver också själva bilden av kvittot som vi laddar upp och klistra in alla andra kommandon som vi hade tidigare.

Nu är det här det blir knepigt och med knepigt menar jag tyvärr väldigt knepigt. Om vi ​​skickar in detta, vad som bör hända är att UploadedImage1.Image och Pen.Input2.Image ska passera genom arbetsflödet och de kommer att skapa filinnehållet som skulle skapas.

Observera dock att UploadedImage1.Image faktiskt inte hänvisar till själva bilden. Det hänvisar till en sökväg som Microsoft har gjort för att veta var bilden ska laddas upp. Så det är egentligen inte själva bildkoden; det är en slumpmässig väg som bara Microsoft har tillgång till. Bilden kommer att sparas, men det kommer att vara en slumpmässig textfil som du inte kommer att kunna förstå.

Så vi måste göra några justeringar med den här koden:

Skapa en variabel för varje bild

Det första vi behöver göra är att skapa en variabel för varje bild. Vi skapar en variabel som heter varImage1 som kommer att vara lika med JSON-representationen av den uppladdade bilden. Vi vill också inkludera binära data i JSON.

Vi tar sedan utdata från den här funktionen som är lagrad i varImage1 och skapar en annan variabel som heter varImageTrimmed , som i princip tar varImage1 och hackar av ändarna av den med hjälp av Mid-funktionen.

Vi tar den uppladdade bilden och konverterar den till en URI – en kodbit som lagras i textform som representerar vad bilden faktiskt är. Vi tar sedan det och tar bort de två första tecknen och de två sista tecknen i den texten, eftersom det är formatidentifierare som vi inte behöver.

Sedan kommer vi att göra samma process för signaturen och ersätta bilden med PenInput2 och kalla den varSig1 .

Konvertera URI-kod till binär kod

Vi har redan sagt att Power Automate inte är en slumpmässig väg till en bild; istället är det URI-koden för själva bilden, som i grunden är den textmässiga representationen av den bilden. Vi kan inte bara skicka den textbilden så vi måste konvertera koden som vi får till binär kod som SharePoint kan läsa.

Alla filer är i binär kod, så vi måste gå till Expression och använda en funktion som konverterar URI till binär. Vi lägger detta uttryck i filinnehållselementet för den här åtgärden och klickar sedan på Spara .

Det enda vi har kvar att göra är att se till att filerna inte heter samma sak. Vi vill att den första filen ska vara bilden och den andra filen ska vara signaturen. Så vi kan redigera den första med _receipt.jpg och den andra med _signature.jpg.

Låt oss prova det för att se om det fungerar. Vi börjar med en ny utgiftsrapport för en ny iPad som kostar $400.

När vi klickar på bocken kan vi lägga till bilden och signaturen.

Vi kan ladda upp vårt kvitto och lägga till vår signatur.

Vi kan sedan klicka på Skicka . För att bekräfta, låt oss gå till vår SharePoint-lista för utgiftsinlämning för att se om den raden har skapats.

Utöver det, om vi går till Kostnadskvitton och -signaturer, ser vi det nya iPad-kvittot och nya iPad-signaturen, som båda motsvarar titeln på utgiftsrapporten vi just skapat.

Det här är riktiga bilder och vi kan faktiskt se dem medan om vi ska göra det på gammaldags sätt, skulle det bara vara textfiler istället.

Slutsats

Tänk ett ögonblick hur kraftfullt detta är. Vi har nu ett sätt att skapa en applikation för människor att ta foton och signaturer och lägga in dem i ett Microsoft Power Automate-plattformsarbetsflöde. I det här fallet använder vi dem för att lagra filer i dokumentbibliotek. Det viktigaste som vi lärde oss idag är hur man flyttar data relaterade till bilder och signaturer från Power Apps till Power Automate.

Om du gillade innehållet i denna handledning, glöm inte att prenumerera på LuckyTemplates TV-kanal. Vi har en enorm mängd innehåll som kommer ut hela tiden från mig själv och en rad innehållsskapare – alla dedikerade till att förbättra ditt sätt att använda LuckyTemplates och Power Platform.

Henry