spacer
Skip to content

@pnp/sp/comments and likes

Comments can be accessed through either IItem or IClientsidePage instances, though in slightly different ways. For information on loading clientside pages or items please refer to those articles.

These APIs are currently in BETA and are subject to change or may not work on all tenants.

Invokable Banner Selective Imports Banner

Scenario Import Statement
Selective 1 import { sp } from "@pnp/sp";
import "@pnp/sp/comments";
Preset: All import { sp } from "@pnp/sp/presets/all";

ClientsidePage Comments

The IClientsidePage interface has three methods to provide easier access to the comments for a page, without requiring that you load the item separately.

Add Comments

You can add a comment using the addComment method as shown

import { CreateClientsidePage } from "@pnp/sp/clientside-pages";
import "@pnp/sp/comments/clientside-page";

const page = await CreateClientsidePage(sp.web, "mypage", "My Page Title", "Article");
// optionally publish the page first
await page.save();

const comment = await page.addComment("A test comment");

Get Page Comments

import { CreateClientsidePage } from "@pnp/sp/clientside-pages";
import "@pnp/sp/comments/clientside-page";

const page = await CreateClientsidePage(sp.web, "mypage", "My Page Title", "Article");
// optionally publish the page first
await page.save();

await page.addComment("A test comment");
await page.addComment("A test comment");
await page.addComment("A test comment");
await page.addComment("A test comment");
await page.addComment("A test comment");
await page.addComment("A test comment");

const comments = await page.getComments();

enableComments & disableComments

Used to control the availability of comments on a page

// you need to import the comments sub-module or use the all preset
import "@pnp/sp/comments/clientside-page";

// our page instance
const page: IClientsidePage;

// turn on comments
await page.enableComments();

// turn off comments
await page.disableComments();

GetById

import { CreateClientsidePage } from "@pnp/sp/clientside-pages";
import "@pnp/sp/comments/clientside-page";

const page = await CreateClientsidePage(sp.web, "mypage", "My Page Title", "Article");
// optionally publish the page first
await page.save();

const comment = await page.addComment("A test comment");

const commentData = await page.getCommentById(parseInt(comment.id, 10));

Clear Comments

Item Comments

import { sp } from "@pnp/sp";
import "@pnp/sp/webs";
import "@pnp/sp/files/web";
import "@pnp/sp/items";
import "@pnp/sp/comments/item";

const item = await sp.web.getFileByServerRelativeUrl("/sites/dev/SitePages/Test_8q5L.aspx").getItem();

// as an example, or any of the below options
await item.like();

The below examples use a variable named "item" which is taken to represent an IItem instance.

Comments

Get Item Comments

const comments = await item.comments();

You can also get the comments merged with instances of the Comment class to immediately start accessing the properties and methods:

import { spODataEntityArray } from "@pnp/sp/odata";
import { Comment, ICommentData } from "@pnp/sp/comments";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

// these will be Comment instances in the array
comments[0].replies.add({ text: "#PnPjs is pretty ok!" });

//load the top 20 replies and comments for an item including likedBy information
const comments = await item.comments.expand("replies", "likedBy", "replies/likedBy").top(20)();

Add Comment

// you can add a comment as a string
item.comments.add("string comment");

// or you can add it as an object to include mentions
item.comments.add({ text: "comment from object property" });

Delete a Comment

import { spODataEntityArray, Comment, CommentData } from "@pnp/sp";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

// these will be Comment instances in the array
comments[0].delete()

Like Comment

import { spODataEntityArray, Comment, CommentData } from "@pnp/sp";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

// these will be Comment instances in the array
comments[0].like()

Unlike Comment

import { spODataEntityArray, Comment, CommentData } from "@pnp/sp";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

comments[0].unlike()

Reply to a Comment

import { spODataEntityArray, Comment, CommentData } from "@pnp/sp";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

const comment: Comment & CommentData = await comments[0].replies.add({ text: "#PnPjs is pretty ok!" });

Load Replies to a Comment

import { spODataEntityArray, Comment, CommentData } from "@pnp/sp";

const comments = await item.comments(spODataEntityArray<Comment, CommentData>(Comment));

const replies = await comments[0].replies();

Like

You can like/unlike client-side pages, items, and comments on items. See above for how to like or unlike a comment. Below you can see how to like and unlike an items, as well as get the liked by data.

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

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

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

// get the liked by data
const likedByData: ILikeData[] = await item.getLikedBy();

// get the liked by information
const likedByInfo: ILikedByInformation = await item.getLikedByInformation();

To like/unlike a client-side page and get liked by information.

import { sp } from "@pnp/sp";
import "@pnp/sp/comments/clientside-page";
import { ILikedByInformation } from "@pnp/sp/comments";

// like a page
await page.like();

// unlike a page
await page.unlike();

// get the liked by information
const likedByInfo: ILikedByInformation = await page.getLikedByInformation();