This article demonstrates how to use the REST API connection to display only the folders from a Document Library.

NOTEIf you want to showcase both folders and files, check out the following articles:
>How to Show a Mixed View of Files and Folders from a Document Library Using REST API
>How to Show Both Files and Folders of the Document Library in a ShortPoint Element
>How to Show Top-Level Folders and Files from a Document Library Using REST API

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Copy and Prepare the REST API URL
  • Step 4: Edit the File List Design Element
  • Step 5: Paste the REST API URL and Connect
  • Step 6: Map Items
  • Step 7: Preview and Save

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. 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:

• If you are using the root site collection and the root site document library:

https://tenant url/sites/site collection name/_api/web/GetFolderByServerRelativeUrl('/Library Name')/Folders?$filter=not substringof('/Forms', ServerRelativeUrl)

• If you are using a different site collection and its document library:

https://tenant url/sites/site collection name/_api/web/GetFolderByServerRelativeUrl('/sites/site collection name/Library Name')/Folders?$filter=not substringof('/Forms', ServerRelativeUrl)

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/sites/marketingmaterials/_api/web/GetFolderByServerRelativeUrl('/Guide')/Folders?$filter=not substringof('/Forms', ServerRelativeUrl)

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 and Connect

Switch to the Connect tab:

Select REST API:

Paste the REST API URL you prepared in Step 3 in the field provided:

Click Connect:

Step 6: 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 folder name as the title, the date created as the subtitle, and leave the description blank:

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  #ServerRelativeUrl as the Link:

Scroll down until you see the icon field and set any folder icon as the default icon:

Step 7: 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! Your Document Library folders are now shown in your SharePoint page.

Related articles:

• How to Show Files and Folders from a Document Library Using REST API
• How to Show a Mixed View of Files and Folders from a Document Library Using REST API 
• How to Show Top-Level Folders and Files from a Document Library Using REST API
• How to Connect to a Specific Folder Inside a Document Library Using REST API