How to Show Both Files and Folders of the Document Library in a ShortPoint Element

In this article, you will learn how to connect a ShortPoint Design Element to your Document Library in order to showcase files and folders on your SharePoint page.

This is how it will look on your page:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit a File List Design Element
  • Step 2: Select the REST API connection type
  • Step 3: Set up the REST API connection
    • Option 1: Mix Files and Folders
    • Option 2: Separate Files and Folders
    • Option 3: Show Only Top-Level Files and Folders
  • Step 4: Connect to your Document Library
  • Step 5: Map items to showcase in your File List
  • Step 6: Update and Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your environment.
• You must be a ShortPoint Designer with an active license.
• You must have an existing Document Library with folders and files.
• You must have an existing File List Design Element.

Step-by-step Tutorial

Follow the steps below to get started:

NOTE: Before proceeding with the steps below, ensure that you already have a Document Library with folders and files. You must also have an existing File List Design Element on your page. To learn how to insert a File List Design Element, check out How to Insert a Design Element.

Step 1: Edit a File List Design Element

Switch to Grid Mode by selecting the Switch to Grid Mode icon in the floating bar.

In Grid Mode, look for your File List Design Element and click the cogwheel icon to open the Settings window.

Step 2: Select the REST API connection type

Go to the Connect tab.

Select REST API from the list of connection types.

Step 3: Set up the REST API connection

There are three ways to organize the files and folders in your Document Library:

Option 1: Mix Files and Folders

This option allows you to mix all the files and folders in your list:

To accomplish this, copy the line of code that fits your need:

• 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

After copying the code you prefer, paste it in the Rest API URL field:

Replace <Your Site Url> with the URL of your SharePoint page:

Replace <Library Title> with the name of your Document Library:

(Optional) You can also limit the number of files and folders shown in your list. To do this, simply add &$top=<number of items you want to show> at the end of the line of code. 

For example, we only want to show 5 items so we added &$top=5 at the end:

Then, toggle on Enable Advanced Settings:

Once you turn it on, additional settings will appear. Scroll down until you see Map Results:

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;

And paste it into the Map Results field:

Option 2: Separate Files and Folders

This option allows you to separate folders from the files in your list:

To accomplish this, copy the line of code that fits your need:

• Sort 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=FSObjType%20desc,FileLeafRef%20asc

• Sort 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=FSObjType%20desc,FileLeafRef%20desc

After copying the code you prefer, paste it in the Rest API URL field:

Replace <Your Site Url> with the URL of your SharePoint page:

Replace <Library Title> with the name of your Document Library:

Then, toggle on Enable Advanced Settings:

Once you turn it on, additional settings will appear. Scroll down until you see Map Results:

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;

And paste it into the Map Results field:

Option 3: Show Only Top-Level Files and Folders

This option allows you to show only top-level folders and files in your list. This means that files inside your folders will not be shown:

To accomplish this, copy the line of code 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

And paste it in the REST API URL field:

Replace <Your Site URL> with the URL of your SharePoint page:

Replace <Library Title> with the name of your Document Library:

Then, toggle on Enable Advanced Settings:

Once you turn it on, additional settings will appear. Scroll down until you see Map Results:

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>"))

And paste it into the Map Results field:

Replace <Library Title> with the name of your Document Library:

Step 4: Connect to your Document Library

Once you are done adding the codes, click Connect:

If your connection is successful, you will see green banners at the top and bottom of your Settings window:

NOTE: Check out Connection Type: REST API to learn more about this connection type.

Step 5: Map items to showcase in your File List

Go to the Items tab:

Delete all placeholder content:

Then, use the pin icon beside each item to customize the properties you want to display:

For this tutorial, we want to display the [1] name of the files/folders, [2] the day they were modified, and the [3] file type of our files. We also want to [4] hyperlink them to the actual files/folders:

To showcase folders, scroll down until you see the Default Icon field and select the folder icon from the drop-down.

Step 6: Update and Save

Once you are done mapping the items you want to display, click Preview to see how it will look on your page:

Click [1] Update if you are satisfied with your edits or click [2] Back if you still want to make any changes:

Then, click Save:

Click Republish:

That’s it! You now have your files and folders displayed on your SharePoint page. Enjoy trying out this trick on your sites.

Related articles:

• ShortPoint REST API: Selecting, Filtering, Sorting Results in a SharePoint List
• How to Display Page Properties with ShortPoint Design Elements
• How to Display Attachments as Links on the ShortPoint Toggles Design Element