Power Apps Attachments for SharePoint - Files, Images, and Signatures

in today's show we're going to talk about powerapps with sharepoint attachments so we all know you can use the form control to get sharepoint attachments up there but you know it's not a lot of fun so what we're going to talk about today is how we can use flows to get attachments into sharepoint from powerapps and we're not just going to do files we're also going to do images from a pen input that's right if you sign it we can get that attached or taking a picture with a camera and how to get that attached so we're going to learn some of those mechanics today and figure out how to solve this problem of sharepoint attachments with powerapps but first here's our intro hi my name is shane young with powerapps911 those guys and today we're going to dig into powerapps and sharepoint attachments so this was once i get a lot of questions about here and there and i'm always like eh attachments are no fun i've never been a huge fan of attachments but i get you guys have needs to use attachments so i finally set out i made this video and really the key here is going to be that we're going to send our data right so whether that's a file or a pin input or a camera image like whatever it is we want to send as an attachment we're going to send that over to flow flow is going to process that flow's going to create that for us and so then that kind of gives us a lot more flexibility the other nice thing with this is once you understand how this works it lets you start to build on it with other ideas like i know some of you have wanted to be like all right i want to attach a file to the item and then read that information in and push that into a sharepoint list as like raw data you could learn to do that right we're not going to get that far down the rabbit hole today but this opens up the door to us going deeper with future videos and the whole reason i'm throwing all this out here is because i'm working on my power apps and power automate and power bi class for sharepoint uh we have a live recording of that coming up in about a month and so we're made three weeks i don't know soon and so i'd love to see you guys come join me for that class and so i thought i'd kind of give you a preview of what we talked about in that class so anyway all the blah blah blah let's switch over to my desktop and play with attachments i thought we'd start by just walking through the things i built so you can see it right so you can understand what's going on if you're not understanding what we're about to cover so the idea here is i want to create a new item and so we're going to pass a couple fields and we're going to attach a file and we're going to press one button and then one fail swoop it's all going to go over so title field is demo one i know very creative named shane i threw a choices field in here i don't know why i thought it gave us something else to show along the way so boom boom we're going to attach a file and we're going to go over here to my desktop and over here my desktop let's grab this lovely picture of chewy relaxing it turns sideways we don't care whatever okay so that's it right so just a couple quick inputs and then like if we scroll down here this is the actual sharepoint list you can see that right now a title rr is the last one so we'll get added to the bottom of the list and you also might be asking yourself as we go through this like hey why are you using images does it only work for images no images are just easier for us to visualize but everything here works just fine if you're using excel word pdf it doesn't matter the file type we're just using images because they're visualized better so you go we'll say create an upload little spinner goes and after a second it finishes and if we scroll down to the bottom now we should see title demo one and if we click on the little view thing there's chewy relaxing yay so we attached a file not using a form control but using some independent pieces and passing it through a flow and if you've seen my video or uploading documents directly to sharepoint right there will be a link up there somewhere it's a very much a play on that concept it's just integrating attachments in the process let's take a quick look at the flow that kind of made this happen so if we go here to flow and here's my flow so we'll say edit and so here you're going to see that we're just using the regular powerapps trigger we're going to use create item right i didn't have to create the item with flow but i just thought this was another chance to remind you guys that you can create these that way as well and so we're just passing this dynamic content that title field and that color field that we passed and note even though favorite color is a choices field in uh powerapps or in sharepoint we are able just to pass the text we're just passing the text power purple or red or pink or blue and then that is going to go directly in you don't have to do any shenanigans to use it i thought that was nice so then once i create the item you'll notice here under create item there are there is no option for attachments so in order to do attachments you then you want to use a separate command add attachment and so here same site same list and then we're using the dynamic content the id from the previous step and then we are going to uh pass in the file name from sharepoint and then we have to use the old base64 binary expression to convert the base64 that we're going to send from powerapps into the format that sharepoint wants it boom we're responding to powerapps we'll talk about why that is in a minute but we're not actually sending anything back we're just responding we'll talk about that so in a nutshell that's all it takes but that works just fine right that same flow supports a file attachment like we did here if i wanted to attach a signature right so sig change the color it doesn't matter let's just draw a smiley face there you go and then if we say create an upload here we get the spinning wheel again and a few moments later if we scroll the bottom sig and we can preview it and there's my smiley face that's two the third one i promised you was attached with a camera same type of things i have an extra camera over here don't you all have two cameras and so here we'll just go webcam and then we will set this to pink we will give you a nice smile geez oh gosh that is terrifying i don't know if my mother could love that ugly face but there it is and now we'll say create an upload we hit the spinner again and now if we scroll to the bottom we should see webcam and i apologize for the scary imagery hopefully youtube doesn't uh get mad at me so there you go so those are the different options right where if we look at create and upload our button it's the same roughly the same for all of them and so we're going to build rebuild all this together but i just want you to see that there is no forms involved there is no form on success no nothing like that okay so how do i build this all right that's the fair question so the first piece of the puzzle is we're going to go over here make a new screen and what we want to do is we want to do a text input right so we need to get that title field so we'll just make that one for title and then we'll do a second input you guys want to do choices again i thought the colors were fun so do a drop down for those and in the drop down here we're going to say i want to use the choices function against my employees dot favorite color and so remember the choices function goes to a sharepoint choices column or a dataverse choices column and returns all the values right so in sharepoint those are the acceptable colors according to sharepoint so powerapps is showing us so we can choose those okay on this side pretty easy setup i'm gonna go ahead and rename this as well to input t for title and then dd f for favorite color so that way we know what they are in the formulas when we use them right so that is step one step two is that we need to be able to get a um file in there right so whether it's the pin input the camera or the attachment control it doesn't matter we want to be able to pull that in and so in order to pull that in the trick we'll start with the attachment control is you have to use a form all right so what you're going to do is you're going to insert a form onto the screen for any sharepoint list in the universe right doesn't matter i'm going to use employees here it could be a different one altogether doesn't matter the reason we're doing this is we want to steal the attachment control and the only way to steal it is to get it from here so if i scroll down there's an attachment control you're going to highlight just the control and say control c click out of your form and control v and now you have an attachment control now once you've got the attachment control you can delete the form right so the form is gone bye-bye and then what you're going to do is you're going to fix it so you see some errors up here so if you hit the drop down say edit the formula bar you can see that the border color's got a formula it doesn't understand i don't care about the border color so i'm just going to make it black then we're going to hit the drop down again items i don't need items so just delete that clear empty cool and then last but not least the tool tip same thing don't care delete that out oh i thought it would be happy oh there's one more so hit the drop down one more and then the display mode we do care about this this one needs to be display mode dot edit right if you want people to use your control we just put it there so you could use it it's got to be edit so there you go there are the three things but now we have the control i'm gonna rename this to attacher i don't know weird name so we have the attacher okay so those are the first pieces of this puzzle now the other thing that we learned about especially if you've already done the upload before is the attachment control doesn't spit out images the way that we want or files right word excel powerpoint we'll do it excel this time or something right doesn't matter it doesn't spit them out the right way so you have to pass everything through an image control so media and then image control put this on the screen and what i want you to do here is i want you to set the image to be last and that's a function of attacher attacher dot attachments so attacher dot attachments is a table of all the attachments and so by putting last like this this is saying give me the very last record that was attached and then do dot value and that's going to return whatever it gets attached so we can test that real quick hit play attach a file and this is where working with images the starter easier because you can visualize things right so let's grab chewy's nose grab that cute little nose there you go so you can see that we got our formula correct right this is why you use images to start it's going to work the same we're going to do i promise we'll do excel but it works it's easier to visualize okay so that's the first piece of the puzzle right it's inputs so we need three inputs to get the data in now what we're going to need is we need to get down to the base64 of this image and so if we throw a button on the screen right this will be our little upload button we're gonna go back over here we're gonna steal some of this code we'll steal some of this code we're gonna steal these two pieces and we'll talk about them as soon as we get over there and remember if you've done the upload before this is the same code just modified for this example okay so set var demo from attachment control is going to use the json function to take whatever's in image one well we want not image one we want image six we gotta update our code so whatever image is there take that and then include the binary data so this line this section right here is going to take the file that we just attached and encode it in base64 which is all the a's and the b's the ones and twos the zeros all the inner guts that make up that beautiful picture of chewie's nose okay and that code doesn't change so whatever your image control is named that is going to be what you put here and then you're going to take that json output and you're just going to save it into a variable i called it var demo from attachment control i don't care what you call it you need to put it in there though once you've done that then this code is a hundred percent the same right this code does not change because this code just works from the name of that variable so whatever you stored into var demo from attachment control it's stripping off the header and the footer so we just get the guts okay not gonna go through all that but that mid function is just finding the the comma getting rid of everything in front of the comma and it's dropping the very last character force i don't ever try to rewrite it i just copy and paste it from my apps and speaking my apps remember if you go out to training.powerapps911.com and click on the youtube library you can subscribe out there and you can just download this whole working app right all my thousands of subscribers out there all get access to all these files so you can just download this working file and not have to sit there and pause the video and copy all this character by character so up to you though okay so now that we've got that that gets the base64 only which is what we're going to need in flow so speaking of flow let's go write a flow so we're going to go over here we're not going to mess with this one we're going to start with a new one so i'll say create leave that one there we're going to do an instant cloudflow and we're going to set powerapps our trigger and we're just going to call this attach video there you go we'll say create now this is using the powerapps v1 trigger for flow you could use the v2 trigger the steps are different i don't love those steps as much as i love those these steps so i just use the v1 still but up to you so following me use this one okay so the first thing i wanted to do was i wanted to create an item in sharepoint so i'm just going to search for sharepoint create i'm sharepoint create item action where do i want to do that well for me it's my site called powerapps videos where you do it up to you and then my employees list right there okay and so then it's like all right if you want to create an item in sharepoint remember we could have done this in powerapps with patch for example and then just pass this id but i thought it was fun to do it over here a little different flavor so for the title what we're going to do is we're going to ask in powerapps now be careful this is where you guys are going to leave comments over the next four years and be like hey i messed this up and getting the wrong thing so asking powerapps you got to be very particular about when you click this because when i click this it now made a new dynamic content called create item title so that's one piece of input we were doing favorite color so i went down here i'm gonna say enter custom value opens up dynamic content you don't wanna reuse this one so you're going to say see more and you're going to ask in powerapps a second time right we want two inputs we now have two asking powerapps okay so what happens a lot of times people if you click that button asking powerups five times and there's gonna be five pieces of data you have to pass even if you're not using them so far i only want two i've got two we're doing great so that will create the item okay now we've created the item now what we want to do is we want to attach an item to the or attach the file to the item we just created so we're going to do a new step here we're going to search for sharepoint attach add attachment and notice there's other ones for getting attachments deleting attachments pulling out the guts of attachment right there's more to learn with it but for today we're just worried about adding same site so powerapps videos again for me right there list name same list i wish powerapps just or power i wish flow just knew what i was doing so it would just make this faster but it doesn't so there's those two now the id so what i know id do you want to pass it to well from create id it had a create item it had an id so there it is now keep in mind remember if you created the item over in sharepoint or you already had the item in sharepoint you just wanted to attach to it then we could have just said asking powerapps for the id and not done all this create item right this is not you don't have to do it this way you just need to understand how the pieces connect so for the file name i'm going to do the same thing we'll go down here i want to ask in powerapps again now if you're looking carefully right i've moved my face out of the way hopefully you see the two that we've already asked for we don't want those we need to do another one but it doesn't offer so what you have to do is you have to say see more now you have asking powerapps now when you click on asking powerapps now we have three last but not least we need to create a fourth one so put your cursor in content of the file same drill go down here and then say see more and then ask in powerapps and so now we have four right add attachment file content create item title create item favorite color and add attachment file name four things to ask for totally it's a common mistake so if you get out of whack the best thing to do is just delete the flow and rebuild it right we should have four things we're done okay now we're not actually all the way done though so hover over this one make sure you understand that this is add attachment file content because weirdly enough even though most of the universe uses base64 sharepoint stores everything in binary so powerapps is going to send base64 over if you save base64 into your attachment columns it'll it'll work it will not error but then you can't see the file because it's trying to show that base64 is binary it's all confused so what i need you to do now is i need you to delete this out i need to go to here expressions and type in base and there you go base64 to binary open your parentheses and so if you kind of click out there you see how there's open and closed so we want to put our dynamic content right there so i get my cursor between the two parenthesis and so now you say dynamic content you scroll to the bottom make sure you pick the right one we want add attachment um file content okay make sure you pick the right one that will put that in there you don't have to worry about what it says it did all the work say okay so there you go there is our flow right we've got um ask content for title ask content for favorite color and if you want to ask for more things ask for more things you can fill out all of these i don't care i just want to show you how to do one and then add attachment the id from the item we just created file name is asking powerapps and this is an expression that is wrapping our last fourth one that's it so now we're going to do is we're going to say save all right it's ready to go it's happy back to powerapps we go all right so over here in powerapps we got the base64 we just need to send it so what i would do is i'm gonna throw an extra button on the screen then we go to action and power automate this will show you all your flows i have like 200 you do not have 200 i hope because it's pain in the butt somewhere in here hopefully at the very bottom let's see of course not so i gotta scroll through here now slowly and fine so there's attached test but we want to attach video okay i did it out all the scrolling and sometimes pain but for me to find these things there's no search there's no easy way i just have to scroll so yeah there's attached video we're going to add that that's going to make this a data source in my power app and now that it's a data source now what i want you to do is copy this out ctrl c and then just delete this button bye bye button because what it did by putting that button and saying you had had a flow there is attach video as a data source so now we can go to the real button we're gonna go down here we'll go to a new line so shift enter paste that in and look it wants four things for me title favorite color add attachments and add attachment file content perfect that's what i want to give it so for our title what was our title our title is input t right so inp t dot text comma favorite color value that's going to be drop down f dot selected dot value so that will pass whatever color you've chosen pretty straightforward for the attachment file name so this is one piece that will vary depending on how you're inputting this but since we're using the attachment control it knows the name of the attachment that we just did so we're going to do that same thing and last uh what was our attachment control it was attacher right weird name i made up last attach your dot attachments that same formula again but this time instead of dot value which was the guts of the file dot name is the name of the file third piece last but not least we need to do the file contents which is this far base64 only that we just did ctrl c ctrl v boom so that should create our item and attach it so let's try we'll make we'll name it please work we'll set the favorite color to green we'll just rock with chewy's nose looks good we'll press the button and we'll hope so if we go over here sharepoint real quick and go to employees scroll to the bottom there's poise work i like that and there's green i like that and so last but not least let's click on it and make sure that the file attachment actually works so we'll go over here and click on chewy nose and there's our adorable pup yay [Music] all right now we've got the adorable pup we know that this works so what i owe you now right because you all were doubting me still that this will work with real file so we'll get rid of that one we'll say uh please work excel we'll change excel i guess i should use green for excel excel can be teal teal tail i don't know whatever that color is we'll say attach file we will look on my desktop i think i have an excel file a different name very complicated excel file we'll say open notice that the image control is still here it doesn't show anything because there's nothing to show but so now we'll press the button and then if we go back over here and x out of this one we'll do a little refresh scroll to the bottom please work excel teal all right those two pieces work we'll click on it and then finally we'll say a different name excel this works with any type of attachment we just use images because they're easier to visualize so if you are building this app though right you don't want your users sometimes to see the attachment sometimes not so what i would do is i would just take this control and make the visible false and so then that way they would never see what they had attached there you go that's how you attach a file now you're thinking okay shane that was a long time you're going to spend another half hour to teach us how to do the other two no no i'm not so if you wanted instead of attaching using an attachment control you want to use um the pin input let's do it we're going to delete that out lots of errors that's okay insert input pin text pin input put it right here okay step one is we got to make the image control happy right so edit the formula bar there is no more attacher to attach so that's why it doesn't work so then we'll just delete that out and what would we use here we would say i want you to be pin input 2 right which is the pin input we just added dot image and so then now if we kind of scribble it should show up oh let's make this visible again right this is why you like to have you use images so you can see that your things are working there you go dot's connected we go over here it's mad what is it mad about the image control didn't change so it's not mad about that it is mad because it doesn't have the file name to reference anymore oh so then we'll just hard code the file name to be signature dot png just like that hit play hit the button oh it's called please work excel sorry there'll be two of those over here no big deal right you understand we'll refresh this page scroll to the bottom there's a second please work excel it is also teal and now if we go oh it's probably the red one i don't know it's this one i think i don't know we'll click on it we'll find it and this says attachment signature.png and there is my lovely scribble there you go that's how you do a pen input and then you also wanted me to do a camera control fair enough delete oh this is matt again we'll go up here to media camera we want it to use camera one which is that one hi okay so then now we need to take the picture with the camera control so i'm going to just throw a little icon an ad and then we'll go right here and we'll search for a camera we'll use a camera aperture this time yeah whatever um before we set that one we're going to go here to the camera control and say hey your stream rate is 100 and then we'll go right here and say set var camera yeah sure to a camera 2 dot stream this will create a variable that has the camera image in it pink go to the image control and say hey you use var camera there you go and so then now we'll just go change this i'd probably change this instead of signature.png to be camera.png and if you want to have a text input for them to provide a file name great right all that needs to go between these two commas is a string that matches that you'll use for the file name so whether it's computed like or it's hardcoded like this or it's an input you take from them or you use a formula to concatenate it i don't care just needs to be a file name there you go so let's take a better picture i am ugly no two ways about that let's change this to please work camera and let's set the color this time to be blue i'm wearing a blue shirt today we'll say button and as you can probably guess if we go over here down at the bottom please work camera blue click on that scroll to the bottom camera.png oh my gosh that's ugly all right let's get away from there so there you go you right that's the beauty of this technique right like once you understand how to use that ad attachment control how you send it base64 it doesn't matter you can massage it however you see fit and it will be happy with you so whether it's pin input camera control an attachment control you're referencing some file you're picking out of a document library it doesn't matter if you can generate the base64 and send it over flow will get that into attachments for you so i'll get off the screen where i'm seeing myself duplicate so there you go so that is all of the pieces remember if you want to download this you can just go to training.powerapps.com and sign up for the youtube library speaking of training.powerapps.com will you humor me for a second so if you go out here um right so this is where you can sign up for the youtube library to download the recordings of all these and all the apps that i upload with them yay and then these are the live courses so this is all the schedules always changing um but we can see here in a couple weeks we've got the february class uh there's power platform for sharepoint powerapps power bi power automate all of those so and if you're like months from now like february 2022 that's like last year it's okay we have new more live classes check out the page cool okay so that's everything i've got for today um you know hopefully this helps if you've got more questions more ideas i know you do i know there's more things you want to do with attachments but we kind of ran out of time today um but there's a lot more fun that you can have once you understand these basic mechanics of them so leave me ideas below for the follow-up attachments video we'll make sure that we get those out and i guess with that i'm going to say thanks and have a great day hey me again before you go click on the subscribe button right join the list of hundred thousand plus people that subscribed already or if you need any help right check us out at powerapps91 we do big projects little projects we do training we do everything and we can help you or if you want to see more videos you probably do then just click on the playlist above cool thanks and have a great day

Channel: Shane Young

Views: 86,563

Keywords: Shane Young, powerapps911, PowerApps, Power Apps, powerapps sharepoint attachments, powerapps sharepoint attachment image, powerapps attachment control sharepoint list, powerapps attachment sharepoint list, powerapps add attachment to sharepoint list, powerapps attach file to sharepoint list, powerapps upload attachments to sharepoint list, power automate sharepoint attachment, flow sharepoint attachments, power automate add, power automate add attachment to sharepoint list

Id: K74UFYgrKB4

Length: 29min 6sec (1746 seconds)

Published: Mon Jan 24 2022