How can we help you today?

How to Map File Type Icons for Document Library Files Inside Folders

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:


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:'Policies/HR')/Files?$orderby=Name


  • 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 = {    
    if(item.Name != null) {        
        var lastDotPosition = item.Name.lastIndexOf('.');
        item['Type'] = item.Name.substring(lastDotPosition + 1, item.Name.length);        
    return item;

return resultsWithType;

It should look like this:

Then, click Connect and wait for connection to load.

Now, File Lists is connected to REST API. Continue to the next step to complete the items mapping.

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. 


Ready! Here is what the result will look like:

Related articles:

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

World's best intranet sites are designed using ShortPoint

Get started today! Learn more
See all 31 topics

Start a trial

Ignite your vision. Install ShortPoint directly on your site, or play in sandbox mode. No credit card required.

Get started today

World’s best intranet sites are designed using ShortPoint

Thousands of companies using ShortPoint everyday to design, brand and build award winning intranet sites.

Get started Learn more