Power Apps SharePoint Document Library Browser

in today's show we're going to talk power apps and document libraries so we're going to do is we're going to take a sharepoint document library and we're going to put that into a gallery inside of a mobile app and a tablet app probably and then we're going to go in there and we're going to talk about filtering the data sorting the data viewing the files using the thumbnails of the files adding editing we're just going to kind of go through all that i know there's a lot of questions out there about them so i thought this was a good base video to get us going with those document libraries but first here's our intro hi my name is shane young with powerapps 911 those guys and today we're going to talk about powerapps with document libraries so what i want to do is i'm going to kind of dive in and explore this and to do this we're going to build like a complete document library recreation management app inside of powerapps not because it's really something you would do though we have had customers do it what i'm really going to get after those is trying to show you how to recreate some of that functionality so you can better understand the pieces so when you do have challenges with document libraries and sharepoint with your mobile apps or other types of issues or you want to browse files or all that fun stuff you'll have all the pieces of the puzzle here with this video and of course i also fully expect that when you leave this video you'll be like oh but wait i still want to know this or that that'll be fair if that's the case then yell at me tell me what you got to know down in the comments below and of course hit the subscribe button while you're down there okay anyway let's switch over to my desktop and take a look actually before i go to my desktop let's just go look at the sample app i built so here i am in the new powerapps i turn on the preview experience because i'm crazy i don't know let's load in here oh we gotta allow that sharepoint connection no big deal so hit allow and so here you can see this is my app right this is a gallery we you know i made a little custom folder symbol there for my folders but i'm like all right pretty cool let's go in here let's click on one of the folders look at that so i can actually see the children folders i can see a file i can say oh you know what i want to do i want to uh preview that file with that so there's chewie and his file some different um metadata about it i just kind of pulled some of that in for fun there you go i could delete it hey you really want to delete this no and then i can even open the file directly into sharepoint and so keep in mind that like the first time i did that it prompted me to authenticate with my you know mfa and all that fun stuff but all that's not here but there you go so a fully working app you'll notice also the little arrow up here at the top so i can move back up a folder i could also go back into that class folder real quick let's add a file and then we'll just take a photo oh look we'll find chewie sitting on the floor take a picture and we'll say use a photo and so then that's going to go out and upload itself into my document library and as soon as this thing finishes it should all refresh and there's our file woohoo right we can even check it out let's zoom in yep that's my fat dog sleeping right there awesome but you know what i get in trouble for too many chewy pictures so now we'll just delete it out and go awesome right so that's what we're gonna build today we're not gonna build all of this but i'm gonna we're going to do two things right first we're going to switch over we're going to understand the principle so we're going to start with a blank screen pull in the pieces and get the main framework done right and the new things that are going to be using the document library talk a little bit about the insides the outsides of that and then once we've kind of done that then we will come over to this app and i'll just kind of point out how we did some of the different pieces also keep in mind if you're like man shane i really just want that app on my phone i can totally get that if that's the case remember you go to training.powerapps911.com you can sign up for the curated library and you can just download this working app right just get it you don't have to build it yourself okay all right so that's enough of demo for my phone oh chewie has moved it's hilarious i was hoping he'd be sitting there whatever you don't care okay we'll get out of this and let's return over here to our friend powerapps there's the app we're gonna demo it here we're gonna go over here and we're gonna start with a blank app and so here i'm gonna a demo from a tablet app because it's a bigger interface but i demoed that from a mobile app so that way you could see that it was truly working on my in my case an iphone right but it should work exactly the same way on an android device all right and so here we can see that you know we're gonna first off we're gonna need to add a data source so i'm gonna go over here and say add data we're gonna search for sharepoint we'll be annoyed that this doesn't show up we'll back up now it will and there we go so then this is going to show me all my sharepoint sites and we'll choose powerapps videos and then we're going to go down here and we're going to find my document library and i believe it's called shared documents nope i lied to you is going to be called documents there you go so click on that and say connect boop okay so that adds that to our environment over here in sharepoint you can see like it's just a regular good old-fashioned document library i've added some metadata columns along the way for other um demos i've done but these are not really important what's important is we have files all right so now what i want to do is i'm going to throw a gallery in here but this to me makes the most sense for how i'd browse files you don't have to use gallery but this makes the most sense because i want to add my data source which is documents now when you drop it in you'll start to see stuff but it probably won't make a lot of sense which is totally fair but we could go here to fields like hey you know i could use this i i never use this i'm just going to change real quick to view to item subtitle body and so what i'm going to do up here at the top is we're actually going to use the name and remember because we're after right now is we're trying to figure out what there is to figure out right so that's where i'm like all right so name so i immediately know that that's my folder names and if i kind of go down here those are folder names but then now that i'm down here a little bit further these are actually starting to be like files and stuff so then maybe what's probably easier is in the second spot we're going to do how about file name and its file name with extension and so for the folders you just see their name but if we scroll down to the actual file sections wherever they are oh my goodness there you go so camera for jpeg camera three pick jpegs you can see uh different ones and i realize that you only see photos right there but i promise oh there you go there's a word document you know all the all the files are there okay so that's second um for this third spot what i want to do is there is a special property in here you might not have ever seen called is folder and so that is going to be true or false that is going to help us in a moment as we start to kind of sort this thing down you know being able to see is it a folder or not is helpful and there's actually one more thing i want to add in here and so for that we'll just kind of pull this one out of the way we'll insert another label in here and so for this one i'm going to do a folder path because that's going to be part of the equation for us as we build out our solution all right now over here on the side of the pictures maybe you knew maybe you didn't but if you do this item and then dot thumbnail and notice it's with a capital t i accidentally built a folder or af i accidentally built a column called thumbnail the lowercase t right you can see it over here you know let's just get rid of that that's confusing so what are we going to do we're going to library settings and go down here to thumbnail i was experimenting with something else and i left that piece of trash there so delete it delete it now once we delete this from sharepoint remember powerapps is still going to see it but since we changed our data source just go back over here do a refresh and now as we do dot th we no longer see that bogus one that we just had so i'll get rid of the confusing piece instead of explaining it so if you do thumbnail this is a system generated one and you see there it's a record so if you do a dot it actually sharepoint when you upload a file to sharepoint it automatically generates thumbnails for you large medium and small and so in some of our client projects we have done things like show them like i'm about to do here but we've also used it in other cases where we wanted the thumbnail generated so we could use that in another data source so we let sharepoint create it and then we stole it that'd probably be a good video for me to make in the future but right now i'm just going to grab the small thumbnail because we're not looking for high resolution we're just kind of looking for some visualization you're like wait a minute i don't see anything but if you hit play let me scroll down here to where we get to the actual files where are files there we go so we can see there's a thumbnail for a word document there's a thumbnail for image and so as we just kind of go through here we can see those and that's why i have lots of images because they're very visual but it actually generates thumbnails for hundreds of file types um so you know there's a pdf one being generated there's a text file being generated so kind of cool all right so that gets us enough of the pieces here to kind of sort it out a little bit so now you're like shane wait a minute that's everything yes so when you connect to the documents data source it's like any other sharepoint list or any other data sources list or table it would just give you everything but i don't want that right i want to start to build this experience where i only see things in tiers right so like if we're in this top tier there's only about eight different folders here so i won't only see those eight folders so what i figured out was that we want to use filter so we'd say filter documents and so then we're going to say where um path remember that's when we had a that out there so folder path is equal to and i believe it is shared documents with a forward slash oh like so we'll close this and now we're going to give it a second see if it processes it does and look now we just have one two three four five six seven we just have the eight folders and then we get into the files okay so that's giving us exactly what we want now we're only seeing things in the top level the root now you might notice right away i hope you noticed that there is a yellow triangle here there is a blue line and so this is not delegable this is the real bad news right this is the reason i didn't make this video about six months ago i was really kind of annoyed that it wasn't delicable but as matthew reminded me on twitter like it's not my fault so why should i be sad about it i am still sad about it whoa i almost just fell over standing still is apparently hard anyway so what i want you to do know is that this is not delegable and so if you don't know anything about delegation right check out the video i'll put a link up there you need to understand delegation like even not in this context you just need to understand delegation in life um it's like you know death taxes and delegation like they're the most important things but so what this is going to tell me is that by default or not yeah by default only the first 500 files are going to be shown now in the case of my document library it only has like 380 files so this is not a problem now remember over here on this side you could go over here and say oh i want to change the delegation limit you could increase that all the way up to 2000 and so then you could have a document library that would work in this set up to 2000 but you're going to have to plan for this so you can't point this at a document library with 10 million items it's not going to work right well it'll work for the first 2000 items but not the rest of them so this is not the world's most perfect solution because of this issue but i can't do anything with it so hopefully you don't have giant document libraries you're trying to work with in this case okay so that's the delegation problem now if you're like wait shane i'm not sure if delegation's really causing me issues i mean the blue line should make it obvious for you the other thing that i was reminded to tell you guys here is if you don't believe me right you're like hey delegation whatever right set this thing to like 10 okay so this says if something's not delegable which just does not only get the first 10 items that match not the first 500. so if i set that to 10 and then we refresh our data over here look we literally only got so we got these handful of folders and then maybe some of these folders have some data in them but we only got 10 records so we're going to see a lot less data and that's going to tell me that truly i wasn't delegating so remember the delegation we always talk about increasing this value but we should also talk more about turning it down to help you kind of validate whether or not you're running into delegation challenges okay so now we've refreshed that we're back to normal we're gonna ignore delegation as much as it paints my heart we're gonna do one more thing later in the video that also pains my heart so just be ready for it now over here as well you notice that these things are not um folders don't have thumbnails so what i wanted is i wanted a way to show um something here i showed that cute little folder icon so what i did is i went out to a third-party website called pixabay they had like a royalty-free image of a folder so i downloaded that so then now we're just going to upload that into our app so if we go here and then we go to downloads so there's a little icon that i stole from them and so then for this image i ended up just doing something like this i said hey if this item dot is folder then show that folder file and if not share the thumbnail and so then now i get that cute little folder look here and then we get straight into thumbnails now down here you're like hey shane those are not showing thumbnails so that is because there's something wrong with those files it is not um right there like that file is blank is honestly the reason it's not showing a thumbnail that jpeg is corrupt that's why it's not showing so every all the other file types you know i mean videos everything else i've tested they all get thumbnails so but i want to have my folders have thumbnails okay so that's one so now you're okay all right so how do we get to the next level right what if i want to go down a level so i did this a couple of different ways i'm gonna save you guys all the ways i did that i didn't like and just go straight to the one i did so what i'm going to do is i'm actually going to change my query right so right now we say folder path equals shared documents so what i'm going to do is i'm going to start keeping that in a variable first off we'll go up here to app on start remember these are things that happen when you're at first start and i'm going to say set var file path or it should be folder path not file path folder path and set it to that so when the app first loads i'm going to give it the root folder path so just right click on that run on start and so then now i'm going to change this and say you use that folder path nothing changes same data but what we're going to do now is if you click on this arrow to go down i'm going to say set var folder path it is going to be var folder path and then we're going to concatenate or add to the end of the string um the name so this i oh it's not that it's this item dot name because remember name right now you can see the name of this folder is test so that is what we're going to do here and then we need a slash on the end of it to tell powerapps we're done and so now if we press this it's going to set that variable and when it sets the variable because the gallery is filtered by the variable now it is showing us that sub path right i did a couple different ways and then i finally found the one i liked and that was it and so up here what i'm going to do is i'm going to say far var folder path just so we can kind of always see and so now if we click on sub 1 right now we are into this you can see that there's the matching that's happening so that's why we're only seeing that one file and if we went over here and said go to test and then go to sub 1 we should see one file wow so that is how i was filtering down the pieces now you also might notice over here that when we went into so at the same place so test and then i went to sub 1 so now i have this up arrow that takes me back so how does that thing work well actually we're going to go over here and look at it real quick but what we're going to do is we'll just steal this because i don't think i can rewrite it off the top of my head um so we're going to let's give ourselves a little up arrow so we'll just insert an icon over here we'll get an arrow that points up no we'll use that one this time so there's our up arrow and so we're going to paste in here we're going to say set var file path right remember it's all about fixing the um or var folder path it's all about fixing that variable so i'm going to paste this code in i got to change these i used a different variable name over there that i didn't like and then we'll talk through how this works okay so what we're going to have to do is we're going to use a couple of different functions but if we look at var folder path it is going to be folder forward slash folder forward slash folder forward slash so in my code what i'm going to need to do is i'm going to say hey i'm missing a closing parenthesis i think it to me okay so what we're going to do here is we're going to start kind of from the inside and we're going to say i want to split this thing so i'm going to split var polar path on the slash so if we do that you get shared documents test sub one and a blank row this blank row is important right this is the stuff that's at the end which there is none but because it ends in a slash it's always going to have a slash or a blank row so that's important okay so that's first thing we're going to split that then i'm going to say i want to use this function called first in first in says give me x number of rows give me the first number of rows out of a table remember this just produced a table with four rows so give me the first rows out there and how many do i want i want the current count so count up the number of rows which is four right which we just said that's cool and subtract two because i want to delete out of there if we look again i don't want oh let me get the split i don't want this row and i don't want this row right because we're trying to get out of sub we're trying to go straight to test so give me the first two rows in this case give me the shared documents row and the test row so pass that data set so if we highlight all this you can see it right it gives us a single column table called result with shared documents and tests it gives us our two pieces and then it says concat these two so make a string right text string that is shared documents right that's results and then out of slash so share document slash and then test slash so this is what puts the variable or rebuilds the whole thing back into our concatenated piece and then last but not least we need that trailing one at the end so we put it on the end so if we put this and press this button success right it got us in there and you're thinking well shane is that you know is there anything about this that is hard-coded no that's the beauty of this formula is because you always just want to split whatever's in there so you can be 75 layers deep you're going to split that out you're going to drop the last two rows like the blank row and the row that you're currently in and then it would put the other 73 pieces in right this formula is perfect the way it is technically it's not perfect i see at least one way i would change it to make it better but we're not going to get down that we kind of feel like we're too nerdy as it is but that formula is the key to making all this work that does what it needs to do and now we can navigate up again yay now we do need to make this go away when we're at the top so how did i do that over here because i like to steal i'm gonna go here and say well look i had the visible property set to if only show this if the number of rows is greater than 2 because remember if we so let's just uh let's just copy this go put it over there and talk about it so we'll go to this up arrow we'll say visible and then in here we're going to paste this we got to change this back to my new variable i wish i hadn't changed the variable mid-flight but i did because the var path was really confusing because there's a function called var p and i kept like getting the two intermix so that's why i changed it to var folder path but so if we look at this right now because we're at the top there are two rows all right there's shared documents and then there's the blank row and so what we're saying is hey if this is greater than two so anytime you go to a subfolder then like when we go to test there's three three rows right so we only want this arrow to show up if there are three rows or more so in this case right now right we're at the root we shouldn't see an uproar there's nowhere to go up to but if we go into folder i don't know what this is there we go it shows back up we go back it disappears class oh yeah we got some sub sub oh yeah we're like four layers deep now right shared documents class sub one sub underscore one boom and we can look at all that all right so that is how you navigate through keeping in mind that this is not delicable when you start introducing the whole folder concept unfortunately it's just not delicable not my fault okay so then that is pretty good stuff um so then in here as well you know you might say well shane like how did you open this file directly well good question so what i did was i said hey i only want to show this forward arrow if it is a folder right so i'm going to say visible this item oh this item is folder so then notice now all of the these guys don't show the arrow because there's no folder to dive into that makes sense to me and so then now and here i'm going to say all right i want to have another one for uh opening the file so we'll go here to icons you know you can use whatever you want i don't remember what i ended up using i think i had found a document one down here document with content seems great so i'm gonna throw this over here and i'm gonna say hey document content all right two things one is your visible is just going to be not this item is a folder right so only show up if it's not a folder that makes sense and then on select we're going to take advantage of the launch function to say launch this item dot oh i think it's link link to item and so that functions does it says hey browser operating system wherever you are here's a link do whatever it is you want to do with that link but so now if we go down here and we scroll like oh well you know what i want to check out this deploying sql server 2016 power i don't know what this is click on it it opens up a new browser tab it's taking me straight into word and now i can read about whatever this is i do not know why this is on my machine but whatever there you go or it's not on my machine it's on sharepoint whatever the file is there so it launched the file and if we had given it a like if we go in here and click on let's find a jpeg that actually has one so there's the this so then it would launch in there and so this took me straight to the file url inside of sharepoint it didn't prompt me to log in or anything because on my machine there's already a cookie for sharepoint but this is just like we talked about over on your mobile device the first time that i clicked on it it said hey do your mfa stuff so we know that you know how to get into sharepoint you have permission we had to get authorized to be inside of sharepoint and so i just did my normal login and it opened the file up it opened the word document straight up on my mobile device as well so very cool stuff there all right so that is how we do that um let's go over here and let's take a look now that i think we've covered i think we've covered all the things i wanted to talk about here if not we'll come back let's go back to this one and so over here let's see we had the plus so the plus was letting us upload a file or on my phone even let us take the picture of chewie so that is a different video right we're not going to go over that that is how to upload a sharepoint file right i literally just copied the code out of that one and dropped it into this app so i'll put a link to that video up there that is just your standard uploading to a document library process nothing special there like in the video i even do it with a plus so literally the same thing so we're gonna talk about that again on the um so i think open file here is going to be let's see we'll go over here to the gallery so icon open yep launch link to item just like we did i also did the icon preview so remember that's where i went down here and i'm like hey i want to preview i don't even know what this is let's just be brave and click on it so looks like some turkey treats for chewy i don't know um but so you can see that when i click on this i got this fun little preview experience so this is just our standard pop-up um but the way that i wrote this one let's go look and see how i did that just so you get an overview of it so i put the variable i set var record to be this item so that way i knew what it was and then i did a pop-up var show preview and but before we leave this thing before we look at the preview we also are going to see here in the visible i said only show this that's what it was i only wanted to show the preview if they were jpegs or pngs so i set the visible property to be like hey look at the file name extension if the right three characters are jpg show it or if they're png show it now you could write as many of those as you want maybe you want to show it for all files but just keep in mind that when we look at the preview the way that i wrote this preview and you can do it differently let's click on one so it's easier to see go back to this one so inside this preview so i had a label and so here i'm just showing the different file properties of var records so this is how i was able to show the file metadata right who created it when they created all that fun stuff i had an icon up here at the top this icon right here is for far show preview false so this is what makes the pop-up go away i did the cute little circle because i want a circle background i don't know i just want to do something different and then i'm using an image control here and i'm saying hey you use gallery2.selected.thumbnail.large so show the file thumbnail now this could be important right because especially like when you get onto mobile devices and stuff if you put the file link in there the only way the file link is going to work is if the user has authenticated already and i'm not even sure it would work in that case right so this is why we're talking about using it from a document library because we want to look at these files but i didn't want to like try to show the actual file here i'm just doing this now you're saying shane i want to embed a word document well you can show the words thumbnail here no problem but if you want your users to interact with a word document from their mobile device like powerapps doesn't have a way to edit office documents so you're going to have to use launch right that's why i showed launch first you have to use launch to get over there and do you know launch it into the browser and then you're using the word version or whatever or you can you know open on the word on your phone but but basically powerapps isn't going to handle anything facilitating for you other than either showing a thumbnail or launching the file so that they can interact with it so that's where a lot of people have a hard time but by using the document library and the thumbnails we get through probably the most common issues i run into people right there okay so there's that so then we also here so that was the preview we've opened right that's the launch we also have the delete icon so let's see what happens it was press delete and so here i also just oh i guess i should show you how i show delete cancel so for the delete icon what we did is we're just saying set var delete to true so i have a variable for tracking that and then i have the visible only show show if the open icon is visible what was the open icon remember that one was only visible if it was not a folder so i just didn't want to write the formula twice i could have written it twice i just referenced one from the other pretty typical my style all right so then now icon delete so let's click on wise delete icons um so this opened up my delete confirmation and so then over here you're going to see that i've got a button that just cancels which just changes the variable back i've got a button that does a delete and so that's going to do a remove document and the selected one so remove the selected document and then set delete whatever and just another reminder right i have a delete video i made last week two weeks ago so i'll link to that if you want to learn more about delete popups this is the image once again showing the thumbnail and then this label is are you sure you want to delete and then the selected file name with extensions that way it could be really sure right as i talked about in that other video i'm really scared of deletes um another fun thing i did here so in my two pop-ups the overlay background is not in either one i said hey it's the same exact thing so whether they're doing show preview show spinner or show delete just use that same background so that way i didn't have three of these same exact overlays different i don't know i usually don't do that i usually just have three copies of it but it does seem more correct so i thought i'd show you that all right so that is all those pieces yeah i think i think that's everything what do you guys think what other questions you have about this i'm certain that you do it's just fair leave in the comments below maybe it'll make a future video because you know i know that documents are kind of a little overwhelming but since we learned to upload those a couple years ago i think november of 2019 is when i finally figured that out for us um ever since then we've used more and more documents inside of there so if you have any questions comments any of that leave them below if you want to just download this full working app and you just want to support the channel and you just want to be emailed by me every sunday when i'm like hey here's this week's videos um sign up to the uh training.powerapps911.com you can sign up for the curated library and then you get all these fun things you can sign up for the office hours so you can meet with me once a week i think wednesday is this month's office hour so pretty cool stuff all right and with that i'm gonna say thanks and have a great day before you go be sure to click on the subscribe button over here so that way you'll be notified when new videos come out if you need any help or you want to work together whether your problem is big or small check us out at powerapps911 we do it all i rhymed or if you're looking for more formal training offerings we have those linked up here somewhere so check them out thanks and have a great day

Channel: Shane Young

Views: 21,331

Rating: 5 out of 5

Keywords: Shane Young, powerapps911, PowerApps, Power Apps

Id: u-b8w9ea1kk

Length: 31min 16sec (1876 seconds)

Published: Mon Mar 15 2021