How to Display the Number of Likes from the SharePoint List Items

If you would like to display the number of likes from your SharePoint list items, 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 Simple List Design Element. 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 likes in Simple List:

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

TABLE OF CONTENTS

• Before we begin
• Step 1: Edit Simple List 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

Before we begin

• The "Like" feature should be enabled on the SharePoint List / Library. Please note that this feature is only available for Modern Teams sites. If you are using Modern Communication Sites, this solution will not be possible.

• To enable the Like feature, open your SharePoint List / Library settings. Then, select the Rating settings:

From there, set the Rating Settings to "Yes" and choose the "Likes" option. Then, click OK. It will display “Like” button in the List / Library.

• Make sure that the Likes column is displayed in your List / Library view.

If it is not displayed, click Add column > Show/hide columns, select Number of Likes column and click Apply.

Step 1: Edit Simple List Design Element

In edit mode of the page, open the settings of your Simple List 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

• 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

Where:

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

Important: In order to filter/sort/expand results, you need to add the appropriate parameters to the URL. Make sure you add the LikesCount field in the $select clause. Check more information about it in the following article: Using REST API For Selecting, Filtering, Sorting And Pagination in SharePoint List.

In our case, to select the likes count, the REST API URL will look like this:

https://mycompany.sharepoint.com/_api/web/lists/getbytitle('Company Announcements')/items?&select=LikesCount

Click Connect: 

2.2 Prepare the Mapping Function

If you inspect the Data Example field value, you would be able to see the LikesCount field between the other properties returned by the API:

As you may see, for those items that don't have any likes, the value of the LikesCount value will be null. In order to display 0, you should update the Map Results function.

Please copy the following code:

var results = data.d.results;
for (var i = 0; i < results.length; i++) {
    if(!results[i].LikesCount)
    results[i].LikesCount= 0;
}

return results;

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

Hint: The heart icon that you can see in the screenshot is just a text character that you could copy and paste from the web (for example, from the AltCodeUnicode website).