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 App
• Setup The SharePoint Document Library Files & Folders
• Create A List Of Files And Folders Using A Gallery
• Display File and Folder Icons In The Gallery
• Show Only Files & Folders In The Current SharePoint Document Library Location
• Open Files And Folders In The SharePoint Document Library
• Create A Breadcrumbs Navigation Menu To Show Current Folder Location
• Go Back To Previous Folder Using A Breadcrumbs Navigation Menu
• Want 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.

Create A List Of Files And Folders Using A Gallery

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

Display File and Folder Icons In The Gallery

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 Value column which was created as the output of our Split function in the gallery Items property.

ThisItem.Value

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.Value,
            varFolderPathCurrent
        ) + Len(ThisItem.Value)
    )
)

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.