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:

Note: ShortPoint Page Builder Live Mode was formerly known as Visual Builder and Grid Mode was formerly known as Wireframe Builder.

TABLE OF CONTENTS

• Prerequisite
• Step 1: Edit Toggles Design Element
• Step 2: Configure the REST API settings
  • 2.1 Set up the REST API connection URL
  • 2.2 Prepare the Mapping Function
  • 2.3 Update the Advanced Settings
  • 2.4 Connect to the REST API
• Step 3: Map the Items
• Result

Prerequisites

• You have a SharePoint list with an Attachments column, and the items added to 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.

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

Click the cog wheel icon as shown below: 

• New ShortPoint Page Builder Grid Mode:

• Legacy Page 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:

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:

https://mycompany.sharepoint.com/_api/web/lists/getbytitle('Company Announcements')/items?$select=Title, Modified,Attachments,AttachmentFiles&$expand=AttachmentFiles

Where:

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

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:
https://mycompany.sharepoint.com/_api/web/lists/getbytitle('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='window.open(\"[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).

2.3 Update the Advanced Settings

In the same Connect tab, Enable Advanced Settings:

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

2.4 Connect to the REST API

Click the Connect button:

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

Step 3: Map the Items

Switch to the 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:

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:

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:

Then click Update to save your changes:

Result

Here is how it may look like on your page:

Happy REST-connecting!

Related articles:

• Connection Type: REST API
• How to Set Connected Toggles Element to Open an Item by Default
• Map Results Function for Your Custom REST APIs