Try ShortPoint nowThis article demonstrates how to use REST API to display a mixed view of files and folders from a Document Library. Rather than separating files from folders, they will be shown together in a combined list.
NOTEThis guide will show all files, including those inside folders. If you want to see only top-level files, refer to How to Show Top-Level Folders and Files from a Document Library Using REST API.
TABLE OF CONTENTS
Prerequisites
- You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
- You must have an existing File List Design Element.
- You must have an existing Document Library with folders and files. To learn how to create a Document Library, check out Create a Document Library in SharePoint.
Step-by-step Tutorial
Follow the steps below to get started:
Step 1: Edit the ShortPoint Web Part
Go to the SharePoint page you want to use and click Edit:
Close the Toolbox:
Click the Edit properties icon:
Step 2: Switch to Grid Mode
NOTEShortPoint Connect is currently only available in Grid Mode.
Click the Switch to Grid Mode icon:
Step 3: Copy and Prepare the REST API URL
NOTEBefore proceeding, you must already have an existing Document Library with folders and files. To learn how to create a Document Library, check out Create a Document Library in SharePoint.
Copy the REST API URL that fits your needs:
- Sort files and folders by name in ascending order:
<Your Site Url>/_api/Web/Lists/GetByTitle('<Library Title>')/Items?$select=FileLeafRef,EncodedAbsUrl,Modified,Created,Editor/Title&$expand=Editor&$orderby=FileLeafRef%20asc
- Sort files and folders by name in descending order:
<Your Site Url>/_api/Web/Lists/GetByTitle('<Library Title>')/Items?$select=FileLeafRef,EncodedAbsUrl,Modified,Created,Editor/Title&$expand=Editor&$orderby=FileLeafRef%20desc
Substitute the items highlighted in red with your actual site URL and Document Library name. Here is an example of what the URL could look like:
https://yoursite.sharepoint.com/_api/Web/Lists/GetByTitle('Guide')/Items?$select=FileLeafRef,EncodedAbsUrl,Modified,Created,Editor/Title&$expand=Editor&$orderby=FileLeafRef%20desc
Step 4: Edit the File List Design Element
NOTEBefore proceeding, make sure you already have the File List Design Element on your page:
Hover over the File List and select the cogwheel icon:
Step 5: Paste the REST API URL
Switch to the Connect tab:
Select REST API:
Paste the REST API URL you prepared in Step 3 in the field provided:
Step 6: Connect
Scroll down and toggle on Enable Advanced Settings:
Copy the code below:
var resultsWithType = data.d.results.map(function(item) {
if(item.FileLeafRef != null) {
var lastDotPosition = item.FileLeafRef.lastIndexOf('.');
item['Type'] = item.FileLeafRef.substring(lastDotPosition + 1, item.FileLeafRef.length);
}
return item;
});
return resultsWithType;Paste the code in the Map Results field:
Click Connect:
Step 7: Map Items
Switch to the Items tab:
Delete all default content:
Use the link icon to map what will be displayed as the Title, Subtitle, and Description. In our example, we will showcase the file name as the title, the date created as the subtitle, and the owner of the file as the description:
NOTEYou can customize what information appears in the Title, Subtitle, and Description fields. Feel free to use our example or choose your own preferred display options.
Set #Type as the File Type and #EncodedAbsUrl as the Link:
Step 8: Preview and Save
Select Preview to see how the list will look:
Once satisfied, click Update:
Click the eye icon to see your page in real-time:
Click Save to apply all your changes:
That’s it! You now have a mixed view of files and folders in your SharePoint page.
Related articles:
