0

I have a SharePoint list with reviews enabled, I am trying to patch an increment to the like count within SPFx.

What's the best way to achieve this? Can't find much info online, can anyone point me in the right direction?

UPDATE:

You can use SP PnP JS library to like/unlike list items/site pages < Seems to be broken.


When trying to do a post request using the old rest api, I get this error:

this.props.context.spHttpClient.post("https://mysite.sharepoint.com/sites/mysite/_api/Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID=%27%7B1E5C322E%2D00EB%2D4A58%2D8545%2D942D2AD5FB11%7D%27,itemID=%2713%27,like=true"  

"The expression "Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID='{1E5C322E-00EB-4A58-8545-942D2AD5FB11}',itemID='13',like=true" is not valid."

I think this only works for SharePoint server not online.


Update

Using this method worked!!!

Another Approach: Using JSOM in SPFx:

1

You can use SP PnP JS library to like/unlike list items/site pages.

Example:

import { sp, IItem } from "@pnp/sp/presets/all";
import "@pnp/sp/comments/item";
import { ILikeData, ILikedByInformation } from "@pnp/sp/comments";

// get a specific item by id.
let item: IItem = await sp.web.lists.getByTitle("My List").items.getById(1).get();

// like an item
await item.like();

// unlike an item
await item.unlike();

Documentation: @pnp/sp/comments and likes


Update:

Seems like you can also use old endpoints like:

/_api/Microsoft.Office.Server.ReputationModel.Reputation.SetLike(listID=@a1,itemID=@a2,like=@a3)

Source: Likes are not supported in this item


Also, you can try this approach of getting like count & liked by information from list item and then update list item with new like/unlike:

How to like/unlike resource via SharePoint REST API


Another Approach: Using JSOM in SPFx:

First of all, load JSOM modules in your web part as given here: Connect to SharePoint using the JavaScript Object Model (JSOM)

Then use below function to set like/unlike on list item:

export function likeUnlikeListItem(listName: string, itemId: number, isLike: boolean) {
  Promise.resolve().then(
    () => {
      sp.web.lists
        .getByTitle(listName)
        .get()
        .then(
          (data) => {
            Promise.resolve().then(
              () => {
                // eslint-disable-next-line
                SP.SOD.registerSod(
                  "reputation.js",
                  "/_layouts/15/reputation.js",
                );
                // eslint-disable-next-line
                SP.SOD.executeFunc(
                  "reputation.js",
                  "Microsoft.Office.Server.ReputationModel.Reputation",
                  () => {
                    // eslint-disable-next-line
                    const spContext = SP.ClientContext.get_current();

                    const listId = data.Id;
                    // eslint-disable-next-line
                    Microsoft.Office.Server.ReputationModel.Reputation.setLike(
                      spContext,
                      listId,
                      itemId,
                      isLike,
                    );
                    spContext.executeQueryAsync(
                      (data) => {
                        return true;
                      },
                      (error) => {
                        return false;
                      },
                    );
                  },
                );
              },
              (error) => {
                // error
                console.log(error);
                return false;
              },
            );
          },
          (error) => {
            console.log(error);
            return false;
          },
        );
    },
    (error) => {
      console.log(error);
      return false;
    },
  );
}

Usage:

To Like list item:

likeUnlikeListItem("My List", 1, true);

To Unlike list item:

likeUnlikeListItem("My List", 1, false);
14
  • 1
    Which version of PnP JS library you are using? I can see the like() function in 2.0.6 version. Oct 11 at 8:51
  • 1
    Try using updated code in my answer & see if it works for you. meanwhile I will check if there are any traditional REST APIs available for this. Oct 11 at 8:55
  • 1
    Hi @BennKingy, "Using JSOM in SPFx" approach is not working for you (I am using the same code in my current project & it works fine for me)? let me know if you need any help with this. Nov 16 at 11:41
  • 1
    Ah right. glad it is working for you now. Nov 17 at 10:09
  • 1
    Thanks for the help <3
    – BennKingy
    Nov 17 at 10:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.