Power Apps for SharePoint Document Library

hey guys i'm deepak srivastav and welcome to my channel in today's video i'm gonna show you how you can create a fully functional power app for the sharepoint document library we will also fix the problem of delegation yes so now you can have many files and folders in your document library and it will still work without delegation issue in the powerapp we will also add a feature of uploading the file to a given folder or subfolder [Music] [Music] before i start showing you how you can build the app let me show you the final result first okay so so what i did i created a document library in my sharepoint site as you can see here it has many folders around 73 items or folders at the top level but i have also created subfolder under these top label folders so if i click on to the power platform i have many subfolder under this or platform folder and also under that also there are some other folders so yes it's like a very complex folder structure i have created every folder has some files documents underneath it or in total this library has around 2000 plus items that including files and folders and this is the power this is the result what we are going to create today so as you can see here i am seeing all of my folders listed here what you have seen in the sharepoint i can from here i can click on power platform as we did i'll go to the next layer of polar structure i can see all of these different folders i can see the file i can again keep going to the last label of the of the folder and i can see all of these files together from here i can open the file i can also click on the back button from here so if i click on the back button i'll just immediately go to the previous folder and i can keep going and go to the top label i have also added the functionality of uploading file so if you see here i can click on upload file i can select one file from here click on the upload icon and then what it's gonna do it's gonna upload the file and then you will see that file here here you go okay so are you ready so what we're gonna do we're gonna start creating an empty app okay so app is created as you can see here i'm gonna rename this to home now the first thing that we need to do we need to connect to our sharepoint document library so i'll make the connection so i connected to my sharepoint site and i'm going to connect to the documents library okay so the connection has been created now let's see what we are getting so what i'm going to do i'm going to insert a gallery okay and set the data source for this gallery as the document and as you can see here we are start getting the results let me play this app for you so now as you can see these are the different folders that we have in our document library pretty much good no problem so let me change this to the folder path and the folder path is going to tell me what is the path for this particular folder subfolder or file okay so now let's play this now if you notice this i'm getting the shared document that is the top label folders that i have created but i'm also getting the second level of folders in this uh top view or the first screen so what does that mean it means that when you connect your document library to the power app as a data source powerapp doesn't understand the grouping it just get all the items from your uh from your sharepoint and start displaying them irrespective of where they are actually right as you can see i'm getting all of these different documents all listed at the top level this is not how we want because if we are creating a power app for the document library it should be showing as we are seeing in the sharepoint in the folder structure way right okay so to achieve what we want here that is displaying only the top label folders at first and then from there user can go to the or drill down to the other folders but just to show the top level folders at the first screen what we need to do we need to somehow filter this data that we are seeing right now and just showing anything that where the folder path is shared documents forward slash right so let's use filter here so we are going to say filter documents where folder path okay so now if if i run this app now if you look at the folder path everything that is at the top level is showing up but the challenge is this small little yellow triangle and we all know this is the delegation warning so powerapps telling me that yes you wanted to filter for the folder path but i am sorry because i cannot pass this filtering to the sharepoint because there's a delegation issue here and to prove that this is not going to work if you have more than 2000 item in your document library so what i'm going to do i'm going to go to the settings advanced settings and change this 500 value for the delegation to one okay i'll click save now if i refresh the data source and now you are only seeing first result and that's the reason because now we said that okay the delegation limit is one item so powerapp is gonna filter the document only on the one item so it's just gonna give you the one item so if you use this only this function with delegation warning you are limit to 2000 total number of item including folder subfolders and files ah not gonna work right so how we can solve this problem so instead of folder path if i type title here and say equal to sharp and document library yes it's not going to work it's not going to give you any result because title is not shared documents but what i'm trying to show you there is no delegation warning here now and the reason because text columns in sharepoint are delicable so if you have a text column that can give you this information we can actually use this filter very easily and without having a delegation warning so what i did or what we can do go back to the sharepoint and i created a text column for this document library and i'm calling it path we can call it anything it doesn't need to be a path but this is a plain text column no fancy thing going on there right but the information that this column is going to store is the key because the information that this column is storing is the same information that we are getting in the folder path okay so the information that path text column will have whatever information we have in the folder path the concept is very simple now the challenge is how we can make this column populated with the correct value so for this what i'm going to use i'm going to use a flow so i'm going to go to floor.microsoft.com and we are going to create a flow that is automated flow so whenever new file or new folder created in the document library this flow should run okay so the name of the flow and the trigger that we are going to use when a file is created this one the property only okay we will select our sharepoint site library folder you don't need to because it doesn't matter and the next step that we go we are going to do is very simple update property so update file properties select that again similarly select the site address library name and the id we know id what we are getting in the file or folder this will trigger also by the way when the folder will create it so the id of the item that is just created and as you can see here this is the text column that i have created the path and what we are going to save here is the folder path and that you can find somewhere down the line there you go and save and that's all this flow will do so we have we have our flow ready now if i'm going to create a new file here it is going to update the path okay and let's check if that flow is working or not so i'm going to what i'm going to do i'm going to create a new folder here and as you can see here the folder was created and the path also updated so it's very simple this flow is only triggering when the new file is creating so if i am going to update the existing file that i have created or rename the folder the flow will not trigger so you are not uh running your flow n number of time when the file is updating so this is just when the new file is created and we are even going to avoid that also once we actually go to the power app so just hold on that thought i need to run too many flows okay so once we have this path the text column ready to go let's go back to our power app and this time what i'm going to do i'm still going to do the filter but instead of using folder path i'm going to use the path column equals to and now you will see there is no delegation warning and if i run this app i am still getting all these shared documents also if you notice we still have the delegation set it to one so that's prove that the delegation is not an issue anymore for us okay so now we have done the most important piece of this app we have solved the problem of the delegation so now the next step and the next step is we don't want this to be hard coded right because we want someone to click on these folders and see what is inside this those folders so what i'm going to do i'm going to create a variable okay so the variable is where current path and i'm setting by default it to share documents and i'm going to use this variable or my logic here right so very simple path equal to variable current path now the next step is let's make it look like a document library right so number one thing that i need to do i don't need this icon here and then what i'm going to do i'm going to change the wrap count to six okay and then what i'm going to do in the image i'm going to write a quick logic if if you don't know there is a there is a flag that we get from the document library it's called is folder it's going to tell it's going to give me true or false so if the current item is folded it's true and if it is not then it falls so if the current item is folder what i'm going to do i'm going to use an image so i'm going to use this folder image so if it has a folder that i'm going to show my custom image if not then again from the sharepoint we get something called thumbnail so this item dot thumbnail dot medium so this thumbnail is going to give me the image of that actual file okay so as you can see here now i can see all of my folders but i think our title is lost somewhere deleting the separator deleting the subtitle also and title is okay so i made some changes i aligned the title under the image and now as you can see here our document library is looking pretty nice and if i scroll down i can see all of these different files and all of the folder at the top level right so look and feel is done now let's work on the drill down so let's say once i click on any of these folders or the file let's start with the folders what i want i want to show anything or any folder subfolder files under that given folder so as you know we have the current path so only thing that we need to do we need to go to the unselect property so we are going to on select property of this item and what we are going to do we are going to set the variable that is variable current path now this is another key point that we need to remember let me show that quickly so if i create another text column here right and if i say folder path so the folder path is the path of this folder right and that is actually the parent folder path when we click we don't need the parent folder path we need the path for this folder so if i go to the full path and as you can see here the full path is actually giving me the path for this particular folder share document forward slash.net or other tip card so we need to use this and we need to add a forward slash at the end of it so when i do this on click and set current path so what i'm going to do i'm going to use the function here and i'm going to set this item dot full path and combine it with end with forward slash okay so and now if i play this and if i go to the power platform now if i click on this it's working the drill down is actively working now okay so to implement that back functionality so that user can click on the back button and they can reach to the previous folder what we are going to do we are going to use another collection okay so what i'm doing here like app on start i'm creating a collection that is the very variable previous folders we have a path column in this collection and we are passing the sharepoint documents forward slash that's the default one so we will use this collection to store all the previous path that user clicked so for an example if i'm on the top level folder it will have the top label information when i click go to the next level it will have two item if i click again then it will have three item and keep going right so this is the collection that we're gonna use now how we can use this collection to go back so for that let me first drop a label here and this label will show me the current path okay right now share documents as we know and then i'm going to add an icon also okay so now on click what i will do i will get the current path whatever current path it is so we know wherever the user click and adding that current path to this previous folder collection and then updating the current path to the next drill down path okay now similarly on click on this icon we just gonna do the reverse of what we did on the item select so we are going to set the variable current path to the last of variable previous folders whatever the last item is dot path so when someone click on this back button we will check what is the last item on this video variable previous folders and get the path for it just set it to the variable current path and remove the last one because user has already clicked back so we don't want to keep it so we'll use the remove so remove from the previous holders and what we wanted to remove we want to remove the last item whatever is the last item now let's see if this work so again i'll go to my power platform click on back so the back button is working as expected now one thing that we don't need uh we don't we don't need to show this back button and the label when we when we are at the top label so just very simple logic you just need to update the visible property of these two with if the variable current path equal to share documents that's the root then false as true so now we won't see this at the top level now if we click on the dotnet it's working pretty much as expected now let's make the last update what we're gonna do we're gonna check if the current item is a folder or not if it is a folder then we are going to do everything that we are doing before so if this item is folder so if it is a folder then we are going to collect and do all that folder magic else we gonna use a function called launch so launch this item dot link to the item okay yeah so let's do some formatting so you can easily read it right so the logic is very simple if it's a folder then we are going to do all that or the formula that we need for folder to work if it's not folder then we are just going to open that document into the new window okay so now if i play this yes we are going to go to the power platform and if i go to powerapps click on any of these item and as you can see here so this is working as expected so far now the next thing that we need to do the upload now let's say if you want your user to upload the file from this power app so how you can do that so as we know in powerapp there is no direct method to upload a file to a document library so what we need to do so i'm going to add a blank screen here and what i'm going to do i'm going to insert a form and connect to a sample list you can connect to any list it just has to be a sharepoint list that's what we need so i created one task list again you can connect to any list that you have already in your sharepoint environment we are going to delete it we are not going to use it you just need a temporary and what i'm going to do now i'm going to set this form data source as for this list and what we need from this form the small attachment control because we are going to use this control to enable the upload functionality in our document library powerapp so select this unlock it so you can easily copy it ctrl c go to your library screen and paste it there okay once you copy paste you will get some errors update those this is for the border color so make it black and we're going to keep finding those error there's no item for this one so i'm going to keep it nothing here and the tooltip also i'm just keeping it for nothing right now okay right so now there is no error everything looks good you can actually go ahead and delete the new screen that we have created so there are a couple of things that you need to do in this attachment so if you go to the advanced property there are two functions that we are going to use on add file and on remove file so on add file what we are going to do we are going to use a clear collect function okay and i'm going to create a collection upload docs dot attachments okay so what we are doing we are just clearing a collection and collecting all the attachments those are right now available in this attachment control on add file copy this formula go to the on remove file and just use the same formula there so if i click on attach file and let's say i select one file i'm going to cancel it okay now this part is good so we have attachment control where user can associate any file but if you look at this value it's an url so the attachment control is just giving you a reference this is a reference for the actual file it is not giving you the actual content of the file so when you try to upload this file to the sharepoint document library you can't just keep this reference you need the actual content of that file so how we can get the content of the file you can only get the content of the file if you display that file in the power app and how we can do it we can do it using image control so if you use the image control and you give this url to that image control the power app will automatically fetch the content and give you the content because this is a collection the attachment itself can have more than one file what we are going to use we are going to insert a gallery that we will keep hidden so what i am going to do i am going to drop a gallery here and this gallery data source will be the collection document that we are collecting from the attachment control and the image is going to be this item dot value and as you can see here the image is displaying here so we can use this to get the content and send it to the flow okay so this part is done pretty much good and what i'm going to do i'm going to hide this gallery because just adjust we needed to get the content off the image the next what i'm going to do i'm going to add another icon here and now the all the logic that we need to write on this click of this button or the icon so the first function that we want we want to use a function called clear and what we are going to clear we are going to clear a collection collection upload documents you can use any name we have not defined this collection so you are getting the error but we are going to define it in in like next step then we do the for all function and for all and we are going to use the gallery the the new gallery that we have just added so again we three dot all items that's the new gallery that we added that's showing all the attachment files so for each item in that gallery what we are doing we are collecting and what we are collecting in this one title colon title three dot text and title three is is the title that we are using in the new gallery and this is nothing but the name of the file okay the second information that we are collecting is the data stream and the data stream is the image that we have in that gallery is image three dot image okay so this will give me the data stream and then the path so we will we will be able to upload this given file to the right folder so part colon is our variable current path okay so let's see if the name is correct yep okay so we clear this collection first before uh going through and for each item in that new gallery we are collecting that item information into this collection the next thing that we need click on action and power automate it will ask you if you have already created any uh flow if you're not then you can start from new we're gonna start from new so create click on create new okay there is another quick tip once you come to this screen it is saying powerapps button and you will see only these four options add a space and then search you will get the one that we need rename this flow and then the next step what we are going to do here we will initialize a variable type string and before you click on the value make sure that you rename the name of the variable and after you rename click on the value and click ask in powerapp okay so what we are doing here we are saying that we need this variable in string format from the powerapp and in this variable only we are going to send this new collection that we have created okay so we're going to collect that the next step what we are going to do we are going to use a parse json function so what i am parsing i am parsing the this variable that i am getting from the power app and then the schema so what should be the schema that's parsing so i'm going to click on generate from the sample and the schema is nothing but this so i'm going to copy this these three lines paste it here and then close it in the bracket and then just put the double quotes after each information here okay and click done and then it will actually give you the schema the next step that we are going to do we are just going to use the sharepoint action and if you know what we are going to do we are going to use the create file because we are uploading a file select the site address folder path i'm going to select the path and as soon as you select that it will automatically add that apply to each because as you know it's a collection we can upload more than one file so this will run for each file so path file name we are getting in title the content so again we are getting the data stream but we are going to use another expression that is data uri to binary okay and then what we are going to do we are just going to use this data stream there okay so data uri to bind binary item apply to each data stream click okay okay so file content folder path and file name so this will create the file the next what we need to do update the property so we are going to use another sharepoint update file properties again select the site address library name is your library name id is the id of this newly created file so create file item id and you still remember the path column that we have created the text you need to update that right so the value of this path column is going to be the path that we are sending from the powerapp and click save and that's the flow okay so once you come back to your uh your powerapp if you don't see your flow here don't worry cancel this go back to the power automate and then it should show you yeah so this is the flow name right pa upload flow yep so click on that and as i said remember to copy all the function that you've already wrote otherwise it's gonna delete everything so i'm gonna just paste what i have already copied and now what i'm gonna pass i'm gonna use a function called json the collection that we have created for the documents and using include binary data okay now this is going to give me a true or false so if this is i'm just going to write a logic here simple so if this is true so i'm going to clear the collection docs and also reset the actual attachment control that is upload docs and refresh the documents actual documents connection that we have for the library right okay so we are ready to go so let's try that okay and i just drilled down to one particular folder click on attach file and let's pick this file click on these icons and as you can see here the flow is running give it give it some time maybe we can check also like if i go back to the flow as you can see it's run three seconds ago open that it's running still it's completed completed successfully as you can see here i have that here and the last thing that i'm gonna add i'm gonna add another icon just in case if the data source not refreshed i wanted to add a icon on the top here so user can actually manually refresh the document library and this is nothing but refresh documents the last thing you don't want this to be always visible because if there is nothing attached to the control you want to make this disable so on the display mode okay so i'm going to say if count rows of the gallery that we are using to collect all these different attachments that is gallery 3 dot all items is greater than zero so it has more than one item then the mode should be added else disabled okay fair enough so now if i run it now you don't see it as soon as i'm gonna attach a file i can see that button available last thing that i need to do so you remember this is the flow that we wrote initially if on the file create if someone is creating file from the sharepoint we need to update that text column so what we are going to do here because we are also managing this information from the power app so if i am uploading a file from the power app the power app taking care of updating that path column so in that case the file is still still going to create in the document library so this flow will may trigger and we don't want this flow to be triggered all the time so what we are going to do in this flow go to the settings on this trigger when file is created and we are going to use a trigger condition and we are only going to run this flow f we are going to use equals trigger output body path that's the name of the column so if you are using some other name in your case it may not be part it may be your name of the column is null okay so if this is null that means it doesn't have the information provided yet then only run this flow so if i'm uploading the document from the powerapp this flow will not run and that's what i was saying earlier that this flow is not going to run all the time this flow will only run if someone is trying to upload file or creating a folder in the sharepoint but if they are doing this in powerapp then this flow will not run okay so perfect so we have created the fully functional document library go ahead and give a try let me know if you have any comment thanks for watching and keep learning thank you

Channel: Deepak Shrivastava

Views: 4,598

Rating: 5 out of 5

Keywords: power apps, powerapps upload file, powerapps document library, power apps for document library, learn powerapps, power automate, document library in powerapps, document library sharepoint, power apps ideas, powerapps upload multiple files to sharepoint, document library, SharePoint, powerapps upload file to sharepoint, powerapps upload file to sharepoint document library, power apps delegation, power apps delegation workaround, Power apps, deepak

Id: Cfj413tc3Dw

Length: 33min 7sec (1987 seconds)

Published: Tue Apr 13 2021