How can we help you today?

How to Display Attachments as Links on the ShortPoint Toggles Design Element

If you would like to display attachment files from your SharePoint list as links, this article is for you. It is possible to achieve that using ShortPoint REST API connection type.

Note: For the purposes of this article, we are going to use Toggles Design Element, so the attachments will be available to open when the toggle item is expanded. However, you may use any Design Element to your liking.

Here is how it may look like on your page:


And a closer look at the attachments in Toggles:

Toggles example

NoteShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.




  • You have a SharePoint list with an Attachments column, and the items added to the list:

Attachments column in the List

  • You have ShortPoint Design Element (Toggles in our example) added to the SharePoint page.

Step 1: Edit Toggles Design Element

In edit mode of the page, open the settings of your Toggles Design Element.


Currently, configuring ShortPoint connections is only supported in the Grid Mode. Make sure to switch to it, if you are in the Live Mode:

Switch to the Wireframe Builder

Click the cog wheel icon as shown below: 

  • New ShortPoint Page Builder Grid Mode:

Edit Toggles - New Wireframe Builder

  • Legacy Page Builder:

Edit Toggles - Legacy Wireframe Builder

The Items tab will open.

Step 2: Configure the REST API settings

2.1 Set up the REST API connection URL

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

REST API from Connect options

In the REST API URL, paste the following URL (items highlighted with red and yellow require editing):

https://siteURL/_api/web/lists/getbytitle('listTitle')/items?$select=Title, Modified,Attachments,AttachmentFiles&$expand=AttachmentFiles

  • siteURL- should be replaced with the site URL (root site, site collection, subsite) where the SharePoint list is located;
  • listTitle  - should be replaced with the title of the SharePoint list, you would like to connect to.

For example, our REST API URL looks like this:'Company Announcements')/items?$select=Title, Modified,Attachments,AttachmentFiles&$expand=AttachmentFiles


  • is the site collection URL where our SharePoint list is located;
  • Company Announcements  is the title of our SharePoint list.

REST API URL example

Hint: If you need to retrieve more properties from the list, make sure you add them into the $select parameter. 
For example, we would like to also display the Description of our announcement items, that is why our REST API URL will look like this:'Company Announcements')/items?$select=Title,Modified,Attachments,AttachmentFiles,Description&$expand=AttachmentFiles

2.2 Prepare the Mapping Function

In order to compound a property with the links of the attachments, you need to use this mapping function:

var formatter = shortpoint.core.util.string.args;
    var results = data.d.results;
    var linkTemplate = "<a href='#' onclick='\"[0]\");return false;'>[1]</a></br>";
    for (var i = 0; i < results.length; i++) {
      if (results[i].Attachments) {
        var attachments = results[i].AttachmentFiles.results;
        var attachmentsHtml = '';
        for (var j = 0; j<attachments.length;j++){
          attachmentsHtml += formatter(linkTemplate, attachments[j].ServerRelativeUrl, attachments[j].FileName);

        results[i].AttachmentsHtml = attachmentsHtml;

    return results;

Info: This mapping function will generate a new property called 'AttachmentsHtml' with the attachment links concatenated one after another with a line break between them. The 'Attachments' property will hold a flag if the item has any attachments (true or false).

Please copy it to the clipboard.

2.3 Update the Advanced Settings

In the same Connect tab, Enable Advanced Settings:

Enable Advanced Settings

Scroll down to the Map Results section and paste the code from the step 2.2:

Map Results

2.4 Connect to the REST API

Click the Connect button:

Connect button

After you see that the connection is successful, proceed to the next step to map the items:

Connected successfully

Step 3: Map the Items

Switch to the Items tab:

Items tab

Press the chain icon on the right of the Design Element field (for example, Title) and select which column of your SharePoint list/library correspond to it:

Chain icon - mapping items

Note: To know more about items mapping, please check our ShortPoint Connect: Basic Tutorial.

In our case, we are mapping Title to Title and Toggle Content will contain our announcement Description and AttachmentsHtml

Important: If you don't see the AttachmentsHtml property available in the dropdown, please type it in manually, like this: #AttachmentsHtml.

Also, we are making the toggles opened by default:

Example mapping

Info: If you have some items in the list that do not contain attachments, this field will simply be empty for the item.

You may click the Preview button to check the results:

Preview button

Then click Update to save your changes:

Update button


Here is how it may look like on your page:


Happy REST-connecting!

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