If you would like to show the file type icons in your File Lists design element, while connecting to a specific folder inside your Document Library, this solution article is for you.

To complete this task we are going to use the REST API connection type. Please, follow the steps below.

Step 1: Add ShortPoint File Lists Design Element to the page

The File Lists Design Element can be easily added to your pages using ShortPoint Page Builder.

• Modern experience:

You can start with adding a ShortPoint web part to your page by clicking the plus sign and selecting ShortPoint from the list of the web parts.

Then, click the blue Insert button to open the ShortPoint Page Builder.

Note: If adding the ShortPoint web part for the first time, Info Design Element will be added automatically. Click the cross icon to remove it. Then, click the blue Insert button to open the Page Builder.

• Classic experience:

1. Choose the Insert tab in the Ribbon.

2. Click the blue Insert button.

Then, choose the File Lists element from the Page Builder grid: 

Step 2: Prepare your REST API URL

Here is the URL we will use:

https://YourSiteName/_api/web/GetFolderByServerRelativeUrl('DocumentLibrary/TargetFolder')/Files?$orderby=Name

Here, you will need to substitute the item highlighted with red, with your actual website URL, the item highlighted in green, with your document library name, and the item highlighted in yellow with your target folder name.

For example, here is how our URL looks like:

https://mycompany.sharepoint.com/sites/HR/_api/web/GetFolderByServerRelativeUrl('Policies/HR')/Files?$orderby=Name

where:

• mycompany.sharepoint.com/sites/HR is the URL of our site;
• Policies is the name of our Document Library;
• HR is the name of our target folder.

Step 3: Connect your File Lists to the target folder

Switch to Connect tab of the element settings and choose REST API from the connection options:

Paste the URL you have created in Step 2 into the REST API URL field: 

Click to Enable Advanced Settings:

Scroll down to the Map results section and paste the following piece of code there:

var resultsWithType = data.d.results.map(function(item) {    
    if(item.Name != null) {        
        var lastDotPosition = item.Name.lastIndexOf('.');
        item['Type'] = item.Name.substring(lastDotPosition + 1, item.Name.length);        
    }
    return item;
});

return resultsWithType;

Step 4: Map the Items and save your page

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.

For the File Type you will need to choose Type option from the drop-down:

After the items are mapped, you may click Preview to check how it will look like:

Then, click Update and save your page. 

Result

Ready! Here is what the result will look like:

Related articles:

• Connection Types: REST API
• Folder inside a Document Library: How to Connect?
• How to show both Files and Folders of the Document Library in your ShortPoint element
• How to Show Only Folders of your Document Library in a ShortPoint Element
• How to Map Document / File Type Icon when Using SharePoint Document Library REST API