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

Do you have a Document Library folder with different file types inside?

By default, when you connect to a File List Design Element using the REST API connection, you don’t have the option to map the appropriate file type icon for each document:

This article will demonstrate how you can do so using the advanced settings of ShortPoint Connect:

TABLE OF CONTENTS

• Prerequisites
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit the File List Design Element
  • Step 4: Prepare REST API URL
  • Step 5: Connect to REST API
  • Step 6: Enable Advanced Settings
  • Step 7: Map Items
  • Step 8: 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 already have a File List Design Element on your page.
• You must have a Document Library folder with different file types inside:

Step-by-step Tutorial

Follow the detailed guide below to learn how to map file type icons:

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: Edit the File List Design Element

NOTEBefore proceeding, make sure you already have the File List Design Element on your page. If you don’t have it yet, check out How to Customize the File List Design Element. 

Hover over the File List Design Element and click the cogwheel icon:

Step 4: Prepare REST API URL

NOTEBefore proceeding, make sure you have a Document Library folder with different file types inside: 

Copy the REST API URL below:

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

Replace the following items:

• YourSiteName - change to the site URL of your SharePoint site.
• DocumentLibrary - change to the name of the Document Library you’ll use.
• TargetFolder - change to the name of the folder you’ll use.

Here is an example of how your URL may look:

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 5: Connect to REST API

Go to the Connect tab:

Select REST API:

Paste the URL you prepared in Step 4 in the field provided:

Step 6: Enable Advanced Settings

Scroll down and turn on Enable Advanced Settings:

Copy the code below:

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;

Scroll down and paste the copied code in the Map Results field:

Click Connect:

Step 7: Map Items

Go to the Items tab:

Use the link icon to map the properties you want to be shown:

Below are the properties we mapped. You can map the same properties or choose your own. Just make sure to use the same property in the File Type field so that the right file format will be shown:

1. #Name - shows the file name as the title.
2. #TimeLastModified - shows the date the file was last modified as the subtitle.
3. #Type - shows the file format of the file.
4. #LinkingUri - redirects to the actual file.

Click Preview to see how the Design Element will look:

Once satisfied, click Update:

Step 8: Save

Click the eye icon to see your page in real-time:

Save your changes:

That’s it! You can now showcase the right file type icon for your connected File List Design Element.

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