Connecting a ShortPoint Design Element to a SharePoint Document Library is a simple task. But what if you want to connect the Design Element to a folder inside the Document Library to show the files contained there? Like this one:
To complete the task, we will be using the REST API connection type. Please follow the steps below.
TABLE OF CONTENTS
- Step 1. Insert a ShortPoint Design Element
- Step 2. Build your REST API link
- Step 3. Set up the connection
- Step 4. Map the Items
- Result
Step 1. Insert a ShortPoint Design Element
In the edit mode of the page, press the ShortPoint Insert button on the top to open the Page Builder:
For this example, we will be using a Simple List - but as always, feel free to choose any Design Element you want.
Choose the Simple List Design Element from the Page Builder grid:
The settings of the Design Element will open.
Step 2. Build your REST API link
Here is the URL we will use:
https://site url/_api/web/GetFolderByServerRelativeUrl('Document Library Name/Target Folder Name')/Files
You will substitute the items highlighted in red with your actual website url, document library name and folder name.
Here is an example of what the URL could look like:
https://mycompany.sharepoint.com/_api/web/GetFolderByServerRelativeUrl('Shared Documents/Target Folder')/Files
In the above example:
- mycompany.sharepoint.com is the URL of my site;
- Document Library with Folders is the name of my Document Library;
- and Target Folder is the name of the folder inside the Document Library to which I want to connect.
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 3. Set up the connection
Switch to the Connect tab of the Design Element settings and select REST API connection option:
Paste the URL you have created in Step 2 into the REST API URL field and press the green Connect button:
Step 4. Map the Items
Switch to Items tab.
Here, by using the chain icon button, select the columns of the list that you would like to display.
For more information please check our article: ShortPoint Connect: Basic Tutorial.
Here is an example of Items Mapping:
Note: If you are using an image-based Design Element, you can use the following format in the Image field: https://mycompany.sharepoint.com/Document Library Name/Folder Name/#name Please be sure to change the values in red, as before.
Result
Here is what the result will look like:
Related articles: