PowerApps Attachment Control - Upload All Files not Images Only to Azure Blob Storage

in today's show we will learn how to hack the attachments control so you can use it to save files so in the demo we're going to save our files off to Azure blob storage but the idea is by using the attachments control there's some things we can get away from like the fact that the add media control only shows image files pretty fun stuff but first here's our intro hi my name is Shane young with power apps nine-one-one those guys and today we're going to talk about the power apps attachment control but we're not gonna use the attachment control to attach to list items like you've known loved it for we're actually going to look at how we're going to pull it out and we're going to use it to make a better upload experience or saving files off to other locations like the azure blob storage it's a pretty fun little trick I've kinda come up with here we're also going to use this to lay the foundation because in a second video that we're going to do on the attachment control I'm going to show you how to use it even replace the gallery and how you can really get in there and understand the nuts and bolts of it but that's for another day today let's just talk about the basics and I thought to do it what we'll do is we'll switch over here to our normal app and right here you can see that we have the expense report out that we've used for a long time and so if we could even create a new expense report well in a previous video we talked about how to add your seat and so when you did this the number one complaint we get from customers because we use this concept for literally dozens and dozens of customers that this exact app what happens is that when you click on the add receipt you only have the option to do image files so you have to teach your users to click this and then do all files if they want to be able to grab a spreadsheet or some other type of file other than an image file which causes a lots of confusion and grief so after lots and lots and lots of work I've been working on this thing for months believe it or not I have this attached any file watch this we're gonna click on this little critter and now we get defaulted into all files so what we're really gonna do here is that this is actually a attachments control right because if you go over here to SharePoint and so if we go under like one write customize SharePoint list items write this as long as we customize power apps we scroll down here the attachment control is already here so we set edit all and scroll down and say attach file this one does exactly what I wanted so I was like I I know the pieces are here I'm just got to figure out how to make this sharepoint attachment control work outside of a sharepoint scenario so that's what we're going to do today lots of fun little stuff and i think to do that let's just jump back over here let's go right here and what we're going to do is we'll say zoom back out I'm going to delete all the pieces off of here so you guys go away now we're going to put them back in here together now if you're look at this expense report and the add receipt button you're like oh I don't know what that is I'll put links below to all the videos that made up that series before or remember if you're one of our trad video subscribers you can just download the app and you wouldn't have to rebuild it all yourself but so we're going to recreate this functionality with an attachment control and the first thing that you need to do is you need to get the attachment control so it does not show up if you go up here to inserts and input the attachment control is not available where because they didn't really intend for people to do what we figured out here but that's okay so we're gonna do is we're gonna say do a new screen blank and then we're going to insert a form edit and so for your data source you're going to add a SharePoint list so add a data source and you can pick any SharePoint site with any SharePoint list so I'm just gonna go right here a search for SharePoint there we go and so then after second there's my power opps videos and so we're just going to choose we choose this company's one it doesn't matter any SharePoint custom lists to work because once they connect and when you do this SharePoint or power opps is gonna go ahead and build this form out for you and you get this attachment control this is the thing we want this attachment control so I'm gonna right click on it now that that works very cool we're gonna say copy I'm gonna go outside the form and paste boom there it is it is outside the form now it's safe to delete the form if you wanted to delete the data source right so if you want to view data sources we can get rid of that company's data source right we don't need to keeping that these other ones are part of the apps we're not gonna delete those but you don't need sharepoint connect to the app anymore you just needed SharePoint in here long enough to grab this control now you notice the control is immediately mad that's alright we're gonna make it happy so gonna hit the little thing edit the formula bar oh the function for border colors wrong well you know what I just want the border color to be black who cares easy enough click on again oh the items property well we don't have any items get rid of those boom let's go in the tooltip yeah we don't have one of those either some put some double quotes that's to be good and then the display mode oh you do have to get this one right you want display mode edit yay we have a happy control right happy control happy life mmm don't that how the saying goes but either way so now we have in attachments control so let's just copy it ctrl C let's go back over here to our new item screen and let's paste it on the screen nope I think I missed on my copy let's go back over here oh let's try it again let's go back to our screen oh you know what before and we'll do it over there so we're gonna right-click on just to make sure I get it right click copy I know what you guys it's not ctrl C doesn't work for me there we go we paste it in the happy ctrl and so we're gonna put it over here so that it fits you know in the style or form so then now we need to do is we need to start manipulating this control to I guess the first thing we do is to add the functionality so if we go back up here to add your receipt you've already worked out all the code so in our code for this what do we say on select we sorry for the cut cheers trying to say hi to you all and I want to edit that out so my bad okay so then this is the code that we used in the previous video I'm gonna walk through how this works because we've already explained that functionality but what we want to do is we're gonna grab this code and we're gonna reuse it in some form so copy this and so then down here on our attachment control first thing we do is I'm going to rename it so rename we'll just call this attachment control so we're not confused there we go and so on the properties for the attachment control there is on add files whenever they attach a file what do you do well we want to do this code but not exactly so what is this code say it says set var as your file so we're going to save the file we upload an azure blob storage into a variable we're going to go and run the function Azure blob storage create file this is where the folder is cool and then for the filename I made it a grid and the media buttons file name so the file name from above well that is not exactly what we want here so we need to get the file name that they put in the attachments control so the first thing we probably want to learn about there now let's attach a file and see what happens so we will let's just undo this ctrl Z so if we go down here and we hit play we now have the ability to attach a file dupe and we'll take this picture cheese knows and so we've attached a file right yay that is all happened but if we go we want to understand is how you get the data out there and so we'll go back to our other screen we'll get rid of this one we're going to insert a gallery real quick because what I want you guys to see is that if you set the items up here you can set it to attachment control dot attachments oh look Chuy's knows and there is the the URL so there's actually a name field that gets the file name that they actually attached and then the encoded version of it is in this item dot value so that's the two things we were after there itís so there's a name column and a value column so if we go back over here and look at our code on file add for the file a name we're going to make it the grid and we want to make it the record that they just attached so the code that I probably is the most correct would be to use the function called last and say I want the last record from the attachments control dot attachments right that's the table of data and what value do you want out of that last record I want the name so last attachments name if we hover or highlight it here you can see it is Chui nose dot JPEG is right they're staring at me I keep saying my name dude I can I'm the I'm the owner be quiet not true Chuy's in charge um but so with the chewy nosed JPEG so we know that that's getting us the the value out there and the last function if you haven't seen it before that looks at a table of data and pulls the last row so I'd be the last uploaded file but in reality we're not gonna have to worry about that problem but this function is still the correct thing and so then now for the actual file we want to upload what I'm going to do is I'm going to copy this because this gets us the record that we need so we're going to replace the add Media button with that code and then we're going to do a dot and we're going to do a dot value and so the right value is where we're storing the actual file that is being saved so that looks correct to me for the process of creating a very or creating a file in the azure blob stop the storage with the values from here and saving them into the azure file variable so we can reuse it so then I'm going to collect collect receipts this is something we're just showing in a gallery we're going to say for the file name it is not going to be that it's going to be our same last dot name like that and then they link to the file looks like all this code is right right we're going to use the path from the file we just did up here and then the file ID there and so the file idea was so we can delete everything and so then on the media button we were resetting that control so it was back to blank every time we're back to start we want to do the same thing here for our attachment control because I don't want it to store all the attachments I just want to use its upload capability so we're not using it as a attachments control we don't want its table of data we just want one record at a time pumping through there so then now if we go in here and say play and we say attach file what we should see we'll grab an Excel spreadsheet this time final registration report XLS up here boom that would download it so that is all working but it says hey there's nothing attached because we reset the control so that wiped out saved content so the controls always empty so that's actually exactly the way I want this to work so now what I want to do is I'm going to make it look a little a little nicer and this as well as places you know that you guys know I'm not great at making nice but I can show you enough to help you get started so for example I'm gonna go up here I'm like a will attachment control I want your border color remember I made it black earlier I should have just made it transparent I don't want to see it boom no border can no border and then there is additional things around add attachment text so this is where earlier I said attach any file that's changing that text very cool then it looks like there is also I believe down here a no file no attachments text I like it there is nothing attached we're just going to get rid of that and so now we're a little bit closer to it just says attach any file um I would probably take the font here let's make it like an a20 font that seems like an awesome number oh well too big maybe yeah that's okay so make it so the scroll bars not there and then last but not least I can set like the fill color of it so right I think earlier we did the whole blue thing so we'll say hey your fill is not that code it's blue oh so then I probably want to change the color to be white we're almost done with all its formatting I promise there's one more thing I wanna show you here it's important so then now that makes it look all nice and big now if that is off-putting to you I can oh that doesn't look good you could try to shrink it but if you shrink it you get scroll bars so that doesn't look good so what I have been doing in customer apps is I am then just taking a icon of a rectangle where you got rectangle OOP bringing you down here I'm just kind of setting it on top like this and then I am setting its color to white so then now from a user interface it doesn't look so weird anymore right it still has the hover color so you go change all that you can manipulate this thing all you want but the key thing that really were just we made our own attachment button here it allows us to save these files back out there you know if we attach another file and it says all files now instead of previously where it said the whole idea of it was only image files right when we use this button it was an add your seat it's only image files so that's the big win of this control and this is really a foundational thing because you guys were a little preview right so if we jump over here I have another app so in this particular app my attachment control is actually allowing me to use it as a gallery so these are files that have been attached if I attach another one all right we'll grab Chuy's Twitter image it's going to save it watch the status is going to go from saved unsaved who so user knows it's out there and saved I have loaded this data out of a sequel database and if I delete test capture I don't want it it will actually go and remove that file from my azure blob storage and remove the record in sequel so then that way I don't have that file out there anymore it's pretty cool so but this one this requires a little bit more work because we have to go in there and we have to create a collection we have to manipulate the connection collection and then it turns out that this control has a super-secret column that it never shows this never tells us about but I figured out by putting it in there it fixed the problem so but that's the next video we're going to go super nerdy on this particular control all right and I think that's it for today that you know the whole reason I finally made this video is right here you can think Sharon so go follow Sharon out on Twitter but she said hey where's that video she's been hounding me I mean look at her how demanding is she she even said please oh so Sharon this video is for you and all the people that you told I was going to make this so I've made this video also remember if you want to download this app or any of my other apps or you can add free versions of all this go over to training dot power apps nine-one-one comm we have this whole section called curated content that allows you to get all the videos I've grouped them by different topics and organize them better I've added No I've added downloads I've had a whole bunch of cool stuff just for you guys I think we all that I'm just gonna say thanks and have a great day before you go be sure to click on the subscribe button over here that way be notified when new videos come out if you need any help or you want work together whether your problems big or small check us out at power apps 9-1-1 we do it all i ron't or if you're looking for more formal training offerings we have those that lean to up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 115,516

Keywords: Shane Young, powerapps911, powerapps attachment control, powerapps attachment upload, powerapps attachment gallery, powerapps attachment link, power apps, shane young, shane young powerapps forms, powerapps expense report, powerapps expense tracker, powerapps expense form, powerapps azure blob storage, powerapps azure blob storage connector, powerapps azure blob storage.createfile, Powerapps all files, powerapps image files, PowerApps, microsoft powerapps, powerapps tutorial

Id: Pa-pYEkLH-U

Length: 16min 2sec (962 seconds)

Published: Tue Nov 05 2019