Build a File Explorer for SharePoint Document Libraries in Power Apps

When you need to let users browse files stored inside a SharePoint document library directly from a canvas app, you face challenges that go beyond simple list integration. The app must distinguish files from folders, support drilling into nested folders, offer a clear indication of the current location, and let users open files in a new browser tab. This article walks through a complete implementation of a file explorer that does all of that, using a realistic project library as an example.

All code is kept deliberately short and functional, and every step is explained so you can adapt it to your own document library.

Prerequisites

• A SharePoint document library (any modern team site or communication site).
• Power Apps Studio with a Premium or per‑app license that allows SharePoint integration.
• Basic familiarity with galleries, variables, and Power Fx formulas.

Set Up the Document Library and Sample Files

Create a new document library called ProjectDocVault. Inside it, create the following folder and file structure so you can test every navigation feature:

ProjectDocVault
├── 2024 Projects
│   ├── Client Alpha
│   │   ├── Proposal.docx
│   │   └── Contract.docx
│   └── Client Beta
│       └── Report.xlsx
├── 2025 Projects
│   ├── Client Gamma
│   │   └── SOW.pdf
│   └── Client Delta
│       └── Images
│           └── mockup1.jpg
└── Archived
    └── Client Epsilon
        └── Notes.txt

You can of course use your own files and folders; the important thing is to have several levels of nesting so you can verify that the drill‑down and breadcrumb navigation work correctly.

Connect Power Apps to the Document Library

1. Open Power Apps Studio and create a blank tablet app.
2. From the Data pane, add the ProjectDocVault document library as a new data source. Power Apps will create a connector called "ProjectDocVault" that you can reference in formulas.

Design the Main Screen

The screen will contain three elements:

• A header label that shows the app title.
• A horizontal gallery at the top for the breadcrumb trail.
• A vertical gallery below that displays the files and folders of the current location.

Create the Header

Add a Label at the top of the screen, set its Text to "Project File Explorer", and style it as your app’s title bar.

Add the Breadcrumb Gallery

Insert a Blank horizontal gallery and place it below the header. You will later set its Items and OnSelect properties.

Add the File Gallery

Insert a Vertical gallery under the breadcrumb gallery. This gallery will be the main file browser.

Initialize the Current Path Variable

Open the App.OnStart property and enter:

Set(varCurrentPath, "ProjectDocVault/")

This path always ends with a forward slash. Later, when you navigate into a subfolder, you will build a new path like "ProjectDocVault/2025 Projects/Client Delta/Images/".

After adding the formula, click Run OnStart to initialize the variable.

Populate the File Gallery

Select the file gallery and set its Items property to the following expression:

SortByColumns(
  Filter(
      ProjectDocVault,
      'Folder path' = varCurrentPath
  ),
  "{IsFolder}",
  SortOrder.Descending,
  "{Name}",
  SortOrder.Ascending
)

This does two things:

• Filter – keeps only items whose 'Folder path' matches the current location. (Folders and files inside deeper subfolders are excluded.)
• SortByColumns – places folders first (because IsFolder is a yes/no field and the descending sort puts “yes” before “no”) and then orders the items alphabetically by name.

Format the Gallery Rows

To make files and folders visually distinct, add an Icon control inside the gallery’s first cell and use these properties:

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

Change the icon colour to help users differentiate at a glance:

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

Add three Label controls to show the item’s Name, Modified and ModifiedBy values. Simply set their Text properties to the corresponding ThisItem. fields:

ThisItem.Name

ThisItem.Modified

ThisItem.ModifiedBy

Navigate Folders and Open Files

The core navigation logic goes in the OnSelect property of the gallery’s icon (or of the whole gallery row if you prefer). For each item, the code checks whether it is a folder or a file:

If(
  ThisItem.IsFolder,
  Set(varCurrentPath, ThisItem.'Full Path' & "/"),
  Launch(ThisItem.'Link to item', Blank(), LaunchTarget.New)
)

• If the item is a folder, varCurrentPath is updated to its full path. Because the gallery’s Items property depends on varCurrentPath, the gallery automatically refreshes to show the contents of that folder.
• If the item is a file, Launch opens its direct URL ('Link to item') in a new browser tab.

Build the Breadcrumb Navigation

The breadcrumb trail lets users see where they are and jump back to any parent folder.

Items Property of the Breadcrumb Gallery

Set the breadcrumb gallery’s Items property to:

AddColumns(
  Split(
      Left(varCurrentPath, Len(varCurrentPath) - 1),
      "/"
  ),
  "Idx",
  Sequence(CountRows(Split(Left(varCurrentPath, Len(varCurrentPath) - 1), "/")))
)

This takes the current path (minus the trailing slash), splits it into folder names, and adds a sequential index using Sequence. Each row will contain two columns:

• Value – the folder name.
• Idx – its position (1 for the root, 2 for the first subfolder, etc.).

Inside the breadcrumb gallery, add a Label and set its Text to ThisItem.Value.

Navigating to a Specific Breadcrumb

Set the OnSelect of the label to:

Set(
  varCurrentPath,
  "ProjectDocVault/" &
  Concat(
      FirstN(
          Split(Left(varCurrentPath, Len(varCurrentPath) - 1), "/"),
          ThisItem.Idx
      ),
      Value & "/"
  )
)

The formula rebuilds the path from the root up to the folder the user clicked. Because varCurrentPath changes, the file gallery and the breadcrumb gallery both update immediately.

Performance and Delegation Considerations

The Filter on 'Folder path' is fully delegable, so it scales well even when the document library contains thousands of items. However, SortByColumns with "{IsFolder}" may not be delegable on all SharePoint connectors; if you experience performance issues, consider removing the sort or pulling only a limited set of items. For most libraries with a few hundred items, this combination works without noticeable delay.

Using Launch with 'Link to item' is a direct call to SharePoint’s file URL and does not impact app performance.

Common Pitfalls

Missing trailing slash in the path – The 'Folder path' column always expects a trailing slash. Always append "/" when setting varCurrentPath, and use Left(varCurrentPath, Len(...)-1) before splitting.

Case sensitivity – Folder and file names in SharePoint are case‑insensitive, but the path values returned by the connector match the original case. If your path string has mismatched casing, the filter will not find the items. Use the exact values from the data source.

Breadcrumb clicking does nothing – Make sure the Idx column is populated correctly. The FirstN function requires a numeric count; Sequence inside the AddColumns formula provides that. If the formula is mis‑typed, the breadcrumb gallery may appear empty or clicking may cause an error.

Opening files in Internet Explorer or legacy browsers – LaunchTarget.New tries to open a new browser tab, which can be blocked by pop‑up blockers. Encourage users to allow pop‑ups for your Power Apps domain.

Conclusion and Next Steps

You now have a reusable file‑explorer component that connects any SharePoint document library to Power Apps. The app displays files and folders with clear icons, supports unlimited nesting through drill‑down, shows the current location with clickable breadcrumbs, and opens files directly in the browser.

To extend the app further, consider:

• Adding a search bar that filters the gallery across the entire library.
• Inserting a “Go Up” button that moves one level up using Set(varCurrentPath, Left(varCurrentPath, Len(varCurrentPath) - 1 - Len(Last(Split(Left(varCurrentPath, Len(varCurrentPath)-1), "/")).Value & "/" ) ) ).
• Using Power Automate to generate thumbnails for image files or to trigger approvals when a file is opened.

References

• Original inspiration for this technique: Power Apps Navigating Folders & Subfolders In A SharePoint Document Library by Matthew Devaney.
• Microsoft Learn: SharePoint integration with Power Apps (place official link when available).