Power Apps Navigating Folders & Subfolders In A SharePoint Document Library

Power Apps Navigating Folders & Subfolders In A SharePoint Document Library

Power Apps can be connected to a SharePoint document library to view folders, subfolders and files. You may already know how to work with SharePoint lists but document libraries present new challenges. How can you show a hierarchy of files, navigate up and and down the folder structure and open files in a web browser?

This article gathers all the answers into one place. I will show you a complete example of how to navigate SharePoint document library folders, subfolders and files in Power Apps.

Table Of Contents:
• Introduction: The Customer Files AppSetup The SharePoint Document Library Files & Folders
Create A List Of Files And Folders Using A GalleryDisplay File and Folder Icons In The GalleryShow Only Files & Folders In The Current SharePoint Document Library LocationOpen Files And Folders In The SharePoint Document LibraryCreate A Breadcrumbs Navigation Menu To Show Current Folder LocationGo Back To Previous Folder Using A Breadcrumbs Navigation MenuWant To Learn More About SharePoint Document Libraries?




Introduction: The Customer Files App

The Customer Files app is used by employees at a software development firm to view project files. Employees can browse through all files and folders stored within the SharePoint document library and open any files in the web browser.




Setup The SharePoint Document Library Files & Folders

Add a new SharePoint document library called Customer Files. Then upload files and create folders to browse while using the app. The example in this tutorial uses the following files & folders but you can substitute another set of files & folders if you like.

Customer Files
├───Fresh Bread Bakery
│   ├─── Inventory App Contract - FBB.docx
│   ├─── Inventory App Data Model - FBB.pptx
│   ├─── Inventory App Estimate - FBB.xlsx
│   └─── Inventory App Functional Design - FBB.docx
├───Greendale Lawncare
│   ├─── Images
│   │    ├─── greendale-lawncare-1.jpg
│   │    ├─── greendale-lawncare-2.jpg
│   │    └─── greendale-lawncare-3.jpg
│   ├─── Sales App Contract - GREENDALE.docx
│   ├─── Sales App Data Model - GREENDALE.pptx
│   ├─── Sales App Estimate - GREENDALE.xlsx
│   └─── Sales App Functional Design - GREENDALE.docx
├───Mega Corporation
│   ├─── Inventory App Contract - MEGA.docx
│   ├─── Inventory App Data Model - MEGA.pptx
│   ├─── Inventory App Estimate - MEGA.xlsx
│   └─── Inventory App Functional Design - MEGA.docx
└───Smith Ironworks
    ├─── Images
    │    ├─── smith-ironworks-1.jpg
    │    └─── smith-ironworks-2.jpg
    ├─── Inspection App Contract - SMITH.docx
    ├─── Inspection App Data Model - SMITH.pptx
    ├─── Inspection App Estimate - SMITH.xlsx
    └─── Inspection App Functional Design - SMITH.docx




To help visualize the files & folders structure above here are a few screenshots. When opening the Customer Files SharePoint document library it shows these 4 folders.



The Greendale Lawncare displays two Word documents, an Excel spreadsheet, PowerPoint slides and another folder called Images.



Additionally, the Images folder within the Greendale Lawncare folder has 4 image files. The other customer folders have some variation of the setup shown in these screenshots. We should have enough of an understanding now to build the rest of the directory.

Open Power Apps Studio and create a new tablet app from blank. Insert a label to be used as a titlebar at the top of the screen with the text “Customer Files”. Then connect the Customer Files SharePoint document library to the app as a datasource.



Next we will create a gallery to display the list of files & folders within the SharePoint document library. Create a gallery and place it in the the empty space directly below the titlebar.



Use this code in the Items property of the gallery to connect it to document library.

'Customer Files'



Then use this code in each of the properties below to style the gallery with white rows and a light gray background.

Fill: RGBA(245, 246, 247, 1)
TemplateFill: White
TemplatePadding: 3



To display the file names/folder names, modified date and modified by add 3 new labels to the gallery as shown below…



and use this code in the Text property of each label.

ThisItem.Name
ThisItem.Modified
ThisItem.ModifiedBy

Employees can quickly understand whether they are looking at a file or a folder by glancing at the icon to the left of the file name/folder name. Insert a new icon into the the gallery…




…and input this code in the Icon property to display an image showing a document. All rows in the gallery will now have a document icon beside the file name.

Icon.DocumentWithContent



However, we want a different image to appear in the row when looking at a folder.



We can do this by updating the Icon property to the following code. Each object (files & folders) in the SharePoint library has a yes/no field called IsFolder included by default. We don’t have to edit this value – it is automatically generated by the SharePoint document library.

If(ThisItem.IsFolder, Icon.Folder, Icon.DocumentWithContent) 



To make it even easier for employees to tell the difference between files and folders we will give each icon a different color.



Use this code in the Color property of the icon to make folders yellow and files gray.

If(ThisItem.IsFolder, RGBA(227, 184, 11, 1), DarkGray)




Show Only Files & Folders In The Current SharePoint Document Library Location

Employees use the Customer Files app to open files and folders stored in the SharePoint Document Library. Right now the list simply displays files and folders. To start building this feature we must create a variable to store the current location we are looking at inside the directory.



Open the OnStart property of the app and write this code.

Set(varFolderPathCurrent, "Customer Files/")



Then Run OnStart to update the variable to the main folder location – “Customer Files/”.



Now that we know the current folder location we can use it to filter the gallery to show only files and folders in that location.




Replace any code in the Items property of the gallery with this code instead. The Filter function includes only files and folders in the current location and the SortByColumns function orders folder 1st and files 2nd.

SortByColumns(
    Filter(
        'Customer Files',
        'Folder path' = varFolderPathCurrent
    ),
    "{IsFolder}",
    Descending,
    "{Name}",
    Ascending
)




Open Files And Folders In The SharePoint Document Library

Next we need to implement a way to open files and folders in the document library. When an Employee selects a folder the gallery should display a new set of files & folders in that location. Or if a file is selected it should be opened in a new browser window.



Write this code in the OnSelect property of the icon.

If(
    // checks whether the gallery item is a folder or file
    ThisItem.IsFolder,

    // get the current location for the selected folder
    Set(
        varFolderPathCurrent,
        ThisItem.'Full Path' & "/"
    ),

    // open the file a new browser tab
    Launch(
        ThisItem.'Link to item',
        Blank(),
        LaunchTarget.New
    )
)



Go ahead and give the app a test. Here’s a short demonstration of how the app should work.




Create A Breadcrumbs Navigation Menu To Show Current Folder Location

The Customer Files app still requires a way for users to understand the current location within the SharePoint document library hierarchy and the ability to up one or more levels to a previous folder. We can solve these issues by building a common UI element called breadcrumbs.

Insert a new blank horizontal gallery between the titlebar and file browser gallery.



We want to load the gallery with a table of all the folders in the current folder path. Use this code to split the variable varFolderPathCurrent into one row for each folder

Split(Left(varFolderPathCurrent, Len(varFolderPathCurrent)-1), "/")



For example, if varFolderPathCurrent is set to this path:

Customer Files/Greendale Lawncare/Images/




The Items property code would change it into this single-column table.

["Customer Files", "Greendale Lawncare", "Images"]



To display the folders as “breadcrumbs” create a new label inside the gallery…




…and use this code in the Text property. We reference the Result column which was created as the output of our Split function in the gallery Items property.

ThisItem.Result



Awesome! We can now directly view the SharePoint document library folders, subfolders and files in Power Apps.




Go Back To A Previous Folder Using The Breadcrumbs Navigation Menu

As Employees click through the folder structure their selections will be added to the breadcrumbs gallery. We should also give them the ability to go back to a previous folder when they click on the folder name.



To do this, put the following code in the OnSelect property of the gallery. It returns the new folder path by taking the selected folder name and shortening the current folder path with a combination or the Left function and Find function.

Set(
    varFolderPathCurrent,
    Left(
        varFolderPathCurrent,
        Find(
            ThisItem.Result,
            varFolderPathCurrent
        ) + Len(ThisItem.Result)
    )
)



Make sure this code is in the OnSelect property of the label. It should be there by default.

Select(Parent)



Then go ahead and give the breadcrumbs navigation menu a try.



We’re done. That’s all for now folks!





Questions?

If you have any questions about Power Apps Navigate Folders, Subfolders & Files In A SharePoint Document Library please leave a message in the comments section below. You can post using your email address and are not required to create an account to join the discussion.

Matthew Devaney

Subscribe
Notify of
guest
15 Comments
Oldest
Newest
Inline Feedbacks
View all comments
foued
foued
7 months ago

hi ,
thank you for this article .
 but i think the flwo have a probleme :” the flow may result in an infinite trigger”

Jay
Jay
6 months ago

Mathew!!

This was exactly what I was looking for, however, my document library have more than 2000 items which represent a delegation issue when using the Folder Path filter. Any idea how to fix this??

delegation error.jpg
SaranyaSudharsan
SaranyaSudharsan
6 months ago

Hi,
I am (including few others i believe) are waiting for the delegation removal because, I am simple unable to perform the other tasks that are further below that point! 🙁

Thanks!

Last edited 6 months ago by SaranyaSudharsan
ManishM
ManishM
5 months ago

Hi Matthew, for some unknow reason, I do not see list of files inside a SP folder. In some placed I do not see certain folders to start with. What might be going on?

Matthew Contri
Matthew Contri
27 days ago
Reply to  ManishM

@Manish,
I am having the same issue as you are. It shows only the folders and not the files. @Matthew Devaney would you have any insight as to why?

Matthew Contri
Matthew Contri
27 days ago
Reply to  Matthew Contri

Nevermind, it was that dang delegation issue

Enrico Terranova
Enrico Terranova
4 months ago

How can I not show the folders in which they do not have files?

Ken Warthen
Ken Warthen
4 months ago

I would like to see an example where a gallery is populated with documents from a Sharepoint document library where the file name contains a specified value, for example, show all documents in any folder where the file name contains the string “CC19035”.

Gunasekaran Seshachalam
Gunasekaran Seshachalam
3 months ago

Hi Matthew, i feel something wrong this flow or steps, I got an error, however, in the same order, can we bring this this below option

Kindly support this one this, How to Upload \ View\Download\Delete Files from Share point Document in Sub Folder.
 
1. User Need to upload Multiple Files in SubFolder
2. User Need to view the Files in Subfolder
3. User Need to Download the Files in Subfolder
4. User will delete the Files in Subfolder ( Flow i was created for this Deletion Request, because User Don’t have Edit\Contribute Access, only have Read\View Access)
 
Kindly support this easiest in this Same Power Apps