Try ShortPoint nowThis article shows how to display top-level files and folders from a Document Library using the REST API connection. Top-level means only folders and files in the root directory will be shown—files inside folders will remain hidden.
NOTEThis guide will show only top-level files. If you want to see all the files, check out the articles below: >How to Show Both Files and Folders of the Document Library in a ShortPoint Element >How to Show a Mixed View of Files and Folders 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 below:
<Your Site URL>/_api/Lists/GetByTitle('<Library Title>')/Items?$select=FileLeafRef,EncodedAbsUrl,Modified,Created,BaseName,FileDirRef,Editor/Title&$expand=Editor&$orderby=FSObjType%20desc,FileLeafRef%20asc
Substitute the items highlighted in red with your actual website URL and Document Library name. Here is an example of what the URL could look like:
https://yoursite.sharepoint.com/_api/Lists/GetByTitle('Guide')/Items?$select=FileLeafRef,EncodedAbsUrl,Modified,Created,BaseName,FileDirRef,Editor/Title&$expand=Editor&$orderby=FSObjType%20desc,FileLeafRef%20asc
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:
function getFolderFromUrl(url) {
const parts = url.split('/');
return parts.at(-1);
}
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.filter(item => (getFolderFromUrl(item.FileDirRef) === "<Library Title>"))Paste the code in the Map Results field and replace <Library Title> with the name of your Document Library:
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! Only top-level files and folders are shown inside your connected File List.
Related articles:
