Try ShortPoint nowThis article demonstrates how to use the REST API connection to display files from a specific folder in a Document Library.
For this guide, we want to showcase files inside this PDF Guides folder:
This is the result:
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. 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:
https://site url/_api/web/GetFolderByServerRelativeUrl('Document Library Name/Target Folder Name')/Files
Substitute the items highlighted in red with your actual website URL, Document Library name, and the name of the folder you want to connect to. Here is an example of what the URL could look like:
https://yoursite.sharepoint.com/sites/marketingmaterials/_api/web/GetFolderByServerRelativeUrl('Guide/PDF Guides')/Files
Note: You can select specific fields/columns by adding the ?$select= query string to the end of your REST API URL and including the internal names of the columns. For custom columns you created, you can use ListItemAllFields/CustomColumnInternalName Here is an example REST API URL showing some default columns, as well as a custom column called "Description": https://mycompany.sharepoint.com/_api/web/GetFolderByServerRelativeUrl('Shared Documents/Folder Name')/Files?$select=Name,TimeCreated,TimeLastModified,Title, ListItemAllFields/Description,Author/Title&$expand=Author,ListItemAllFields Check our our solution article ShortPoint REST API: Selecting, Filtering, Sorting Results in a SharePoint List to learn more.
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 file 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:
NOTEYou can also set how the file icons will look. Simply go to the Advanced tab, navigate to the File Icon Styles section, and choose how you want it to be displayed:
Step 7: Preview and Save
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 can now connect to a specific folder and showcase all its files.
Related articles:
