Introduction

Nowadays commenting or replying to a post is the most common thing in all social networks. Hence, in this article, I am going to explain how it works in SharePoint using AngularJS. With the help of this article, you will learn how to set comment or reply feature to a post in SharePoint using AngularJS.

Objective

Comments allow your website's visitors to have a discussion with you and each other. So, the main objective of this article is you to know how to set a comment feature to a post while developing your website or a page in SharePoint using AngularJS.

Overview Step1 Step2 HTML code for the above UI

  1. <div class="container-fluid" ng-app="DiscussionApp" ng-controller="DiscussionController">
  2. <div class="form-horizontal col-lg-12 col-md-12 col-sm-12 col-xs-12">
  3. <button type="button" ng-click="CreateDisc();" style="float:right" class="btn btn-primary">Create New Discussion</button>
  4. <br/>
  5. <br/>
  6. <br/>
  7. <div class="form-group" id="HideWhenNew">
  8. <br/>
  9. <br/>
  10. <br/>
  11. <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  12. <div class="comment-maincol mb5" ng-repeat="Item in myarr">
  13. <div class="discussions-details ovrh pb5" id="replyDialogContainer">
  14. <strong class="fltl col-xs-10"><a title="{{Item.Subject}}" href="javascript:(void)" class="tdn flight14 ct fbold color-liblack">{{Item.Subject}}</a></strong>
  15. <p title="{{Item.Comments}}" class="pt5 pb5 flight13 fltl clrl" tabindex="0">{{Item.Comments}}</p>
  16. <div class="replies-text cp fltr" tabindex="0"><span title="{{Item.ReplyCount}}" class="replies-count flight12">
  17. {{Item.ReplyCount}}</span><span title="0" class="replies-count flight12" ng-if="Item.ReplyCount==null">
  18. 0</span><a class="replyarrow-up flight12" ng-click="ReadComment(Item.ID)" title="replies "> replies</a>
  19. </div>
  20. <div class="flight12 fltr clrl" id="childComment"><span title="{{Item.AuthorTitle}}" tabindex="0" class="fitalic">
  21. {{Item.AuthorTitle}}</span> | <span title="{{Item.Created|date:'M/d/yyyy hh:mm:ss a'}}" tabindex="0" class="fitalic">
  22. {{Item.Created|date:'M/d/yyyy hh:mm:ss a'}}</span> | <span title="{{Item.CommentFor}}" tabindex="0" class="fitalic">For Doc:{{Item.CommentFor}}</span> <a title="" href="javascript:(void)" class="tdn curd" style="color: #008272;">
  23. </a> | <a title="Reply" href="javascript:(void)" class="tdn" data-toggle="modal" data-target="#myModal" ng-click="replyComment(Item.ID)">
  24. Reply</a>
  25. </div>
  26. <div id="showReplyBox{{Item.ID}}" style="display:none" class="showReplyBox">
  27. <div class="col-xs-12 adddiscussion-popup replycomment-popup mt10 flight12" style="display: block;">
  28. <div class="adddiscussion-fields mt5 ml15 mr15" id="ReplyTxtArea">
  29. <label title="Comments" tabindex="0">
  30. Comments </label>
  31. <textarea placeholder="Your comments here.." id="replyCommentContent" ng-model="db.Reply" rows="5" class="replyCommentContent"></textarea>
  32. <span class="ErMsg">
  33. This field is required</span>
  34. </div>
  35. <br/>
  36. <div class="footer col-xs-12 mt20">
  37. <div class="fltr mr5 mt10">
  38. <button type="button" ng-click="SubmitToReplyList(DiscussionId,db);" class="btn btn-primary">Submit</button>
  39. <button type="reset" ng-click="ForClose(Item.ID);" class="btn btn-warning">Close</button>
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12" ng-if="ActiveMe==Item.ID" id="RespReply{{Item.ID}}">
  45. <div class="replycomment-area" style="display: block;" ng-repeat="Rply in myarrs">
  46. <div class="comment-child-container" id="parent_48">
  47. <div class="replycomment-inner mt10">
  48. <p title="{{Rply.Reply}}" class="pt10 flight13 pb10 pl10 pr10" tabindex="0">
  49. {{Rply.Reply}}
  50. </p>
  51. <p class="flight12 fitalic pr10 pb10 ovrh"><span class="fltr block"><span title="{{Rply.ReplyAuthorTitle}}" tabindex="0">
  52. {{Rply.ReplyAuthorTitle}}</span> | <span title="{{Rply.ReplyCreated|date:'M/d/yyyy hh:mm:ss a'}}" tabindex="0">
  53. {{Rply.ReplyCreated|date:'M/d/yyyy hh:mm:ss a'}}</span> </span>
  54. </p>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. </div>
  62. </div>
  63. <div id="ShowWhenNeedCreate">
  64. <div class="form-group">
  65. <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">CommentFor:</label>
  66. <div class="col-lg-9 col-md-9 col-sm-3 col-xs-9">
  67. <select class="form-control" ng-model="DataBind.CommentFor" >
  68. <option value="">--select one--</option>
  69. <option value="Doc1">Doc1</option>
  70. <option value="Doc2">Doc2</option>
  71. <option value="Doc3">Doc3</option>
  72. </select>
  73. </div>
  74. </div>
  75. <div class="form-group">
  76. <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Subject:</label>
  77. <div class="col-lg-9 col-md-9 col-sm-3 col-xs-9">
  78. <input class="form-control" ng-model="DataBind.Subject" type="text" id="TxtSub"/>
  79. <span class="ErMsg" id="TxtSubMsg">Please fill out this!</span>
  80. </div>
  81. </div>
  82. <div class="form-group">
  83. <label class="col-lg-3 col-md-3 col-sm-3 col-xs-3">Comments:</label>
  84. <div class="col-lg-9 col-md-9 col-sm-3 col-xs-9">
  85. <textarea class="form-control" ng-model="DataBind.Comments" id="txtCommentFor"></textarea>
  86. <span class="ErMsg" id="CmntMsg">Please write some comments!</span>
  87. </div>
  88. <hr id="HrLine">
  89. </hr>
  90. <div class="form-group">
  91. <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"></div>
  92. <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"><button type="button" ng-click="SubmitToList(DataBind);" class="btn btn-primary BtnsAlign">Submit</button><button type="reset" class="btn btn-warning BtnsAlign">Clear</button></div>
  93. </div>
  94. </div>
  95. </div>
  96. </div>
  97. </div>

The above HTML includes all functionalities like “Create new discussion”, “Reply”, “replies”, count for replies etc.

Script code for the above UI

  1. var myApp = angular.module('DiscussionApp', []); //,'ui.bootstrap'
  2. var hash = [];
  3. var hashs = [];
  4. var ThisisforCommentFor = '';
  5. myApp.controller('DiscussionController', ['$scope', '$http', '$q', function($scope, $http, $q, $compile) {
  6. $scope.showModal = false;
  7. $("#ShowWhenNeedCreate").hide();
  8. GetCustListProperties($scope, "Discussions");
  9. GetReplyListProperties($scope, "RepliesOfDiscussions");
  11. GetDiscussionsItems($scope);
  13. $scope.ReadComment = function(Thissd) {
  14. // alert(Thissd);
  15. $scope.ActiveMe = Thissd;
  16. $("#RespReply" + Thissd).toggle();
  17. GetReplies($scope, Thissd);
  19. }
  20. $scope.replyComment = function(ThsId) {
  21. //$scope.showModal = true;
  22. //$("#myModal").show();
  23. $scope.DiscussionId = ThsId;
  24. $("#showReplyBox" + ThsId).toggle();
  25. }
  26. $scope.CreateDisc = function() {
  27. $("#ShowWhenNeedCreate").toggle('slow');
  28. //$("#HideWhenNew").hide();
  29. }
  30. $scope.ForClose = function(RespId) {
  31. $("#showReplyBox" + RespId).hide();
  32. }
  33. $scope.SubmitToReplyList = function(ToId, db) {
  34. if (JSON.stringify(db) === undefined) {
  35. $("#replyCommentContent").focus();
  36. $("span.ErMsg").show();
  37. } else {
  38. var Comments = JSON.stringify(db);
  39. Comments = Comments.replace(/[{}]/g, '');
  40. var datavalueOfModal = "{__metadata:{'type':'SP.Data.RepliesOfDiscussionsListItem'}," + Comments + ",DiscussionId:" + ToId + "}";
  41. //alert(datavalueOfModal);
  42. $.ajax({
  43. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('RepliesOfDiscussions')/items",
  44. type: "POST",
  45. headers: {
  46. "accept": "application/json;odata=verbose",
  47. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  48. "content-Type": "application/json;odata=verbose"
  49. },
  50. data: datavalueOfModal,
  51. success: function(data) {
  52. $scope.ReadComment(ToId);
  53. GetReplyCountOfItem($scope, ToId);
  55. },
  56. error: function(error) {
  57. alert(JSON.stringify(error));
  58. }
  59. });
  60. }
  61. }
  62. //
  63. $("#ReplyTxtArea textarea").keyup(function() {
  64. alert("textarea");
  65. if ($(this).val()) {
  66. $(this).css("border", "1px solid #ababab");
  67. $("span.ErMsg").hide();
  68. }
  69. });
  70. //
  71. $scope.SubmitToList = function(FormValues) {
  72. if ($("#TxtSub").val() === "") {
  74. $("#TxtSub").css("border", "2px solid #FF0000");
  75. $("#TxtSub").focus();
  76. $("span#TxtSubMsg").show();
  77. } else if ($("#txtCommentFor").val() === "") {
  78. $("#txtMeetName").css("border", "2px solid #FF0000");
  79. $("#txtCommentFor").focus();
  80. $("span#CmntMsg").show();
  81. } else {
  82. var data = JSON.stringify(FormValues);
  83. data = data.replace(/[{}]/g, '');
  84. var datavalue = "{__metadata:{'type':'SP.Data.DiscussionsListItem'}," + data + ",ParentId: " + $scope.MtParentId + "}";
  85. // console.log(datavalue);
  86. $.ajax({
  87. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Discussions')/items",
  88. type: "POST",
  89. headers: {
  90. "accept": "application/json;odata=verbose",
  91. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  92. "content-Type": "application/json;odata=verbose"
  93. },
  94. data: datavalue,
  95. success: function(data) {
  96. $("#ShowWhenNeedCreate").hide();
  97. $("#HideWhenNew").show();
  98. GetDiscussionsItems($scope);
  99. $scope.$apply(function() {
  100. //$scope.Items=$scope.Items;
  101. $scope.myarr = $scope.myarr;
  102. })
  103. console.log(data);
  104. },
  105. error: function(error) {
  106. alert(JSON.stringify(error));
  107. }
  108. });
  109. }
  110. }
  111. $("#ShowWhenNeedCreate textarea[id='txtCommentFor']").keyup(function() {
  112. if ($(this).val()) {
  113. $(this).css("border", "1px solid #ababab");
  114. $("span#CmntMsg").hide();
  115. }
  116. });
  117. $("#ShowWhenNeedCreate input").keyup(function() {
  118. if ($(this).val()) {
  119. $(this).css("border", "1px solid #ababab");
  120. $("span#TxtSubMsg").hide();
  121. // $("span#CmntMsg").hide();
  122. }
  123. });
  124. }])
  126. function GetDiscussionsItems($scope) {
  127. hash = [];
  128. $.ajax({
  129. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Discussions')/items?$filter=ParentId eq " + GetUrlKeyValue("itemid") + " &$select=*&$expand=Author&$select=Author/ID,Author/Title&$orderby=ID desc",
  130. method: "GET",
  131. async: false,
  132. headers: {
  133. "Accept": "application/json;odata=verbose"
  134. },
  135. success: function(data) {
  136. $scope.Items = data.d.results;
  137. $scope.MtParentId = $scope.Items[0].ParentId;
  138. console.log($scope.MtParentId);
  139. $(data.d.results).each(function(listName, currentRowForBody) {
  141. var CommentFor = currentRowForBody.CommentFor;
  142. var Subject = currentRowForBody.Subject;
  143. var Comments = currentRowForBody.Comments;
  144. var ReplyCount = currentRowForBody.ReplyCount;
  145. var ParentId = currentRowForBody.ParentId;
  148. var ID = currentRowForBody.ID;
  149. var AuthorTitle = currentRowForBody.Author.Title;
  150. var Created = currentRowForBody.Created;
  151. // console.log(currentRowForBody.Author.Title);
  152. var Mu = Subject.split(",");
  153. for (var i = 0; i < Mu.length; i++) {
  154. var smss = {
  155. Subject: Subject,
  156. Comments: Comments,
  157. ReplyCount: ReplyCount,
  158. CommentFor: CommentFor,
  159. ID: ID,
  160. ParentId: ParentId,
  161. AuthorTitle: AuthorTitle.split(",")[i],
  162. Created: Created.split(",")[i]
  163. }
  164. hash.push(smss);
  165. }
  168. });
  169. $scope.myarr = hash;
  170. //console.log($scope.myarr);
  171. },
  172. error: function(sender, args) {
  173. console.log(args.get_message());
  174. }
  175. });
  176. }
  178. function GetReplyCountOfItem($scope, DscId) {
  179. $.ajax({
  180. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Discussions')/items(" + DscId + ")",
  181. method: "GET",
  182. async: false,
  183. headers: {
  184. "Accept": "application/json;odata=verbose"
  185. },
  186. success: function(data) {
  187. $scope.ReplyCounts = data.d.ReplyCount + 1;
  188. UpdateReplyCountInDiscList($scope, DscId, $scope.ReplyCounts);
  189. console.log($scope.ReplyCounts);
  190. },
  191. error: function(sender, args) {
  192. console.log(args.get_message());
  193. }
  194. });
  195. }
  197. function UpdateReplyCountInDiscList($scope, DscId, NewRplyCount) {
  198. $.ajax({
  199. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Discussions')/items(" + DscId + ")",
  200. type: "POST",
  201. headers: {
  202. "accept": "application/json;odata=verbose",
  204. "X-RequestDigest": $("#__REQUESTDIGEST").val(),
  206. "content-Type": "application/json;odata=verbose",
  208. "IF-MATCH": "*",
  210. "X-HTTP-Method": "MERGE"
  211. },
  212. data: "{__metadata:{'type':'SP.Data.DiscussionsListItem'},ReplyCount:" + NewRplyCount + "}",
  213. success: function(data) {
  214. GetDiscussionsItems($scope);
  215. $scope.$apply(function() {
  216. $scope.myarr = $scope.myarr;
  217. })
  218. },
  219. error: function(error) {
  220. alert(JSON.stringify(error));
  221. }
  222. });
  223. }
  225. function GetReplies($scope, ThisId) {
  226. $scope.myarrs = [];
  227. //hashs=[];
  228. hashs.length = 0;
  229. $.ajax({
  230. url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('RepliesOfDiscussions')/items?$filter=DiscussionId eq " + ThisId + "&$select=*&$expand=Author&$select=Author/ID,Author/Title",
  231. method: "GET",
  232. async: false,
  233. headers: {
  234. "Accept": "application/json;odata=verbose"
  235. },
  236. success: function(data) {
  237. $(data.d.results).each(function(listName, ReplyBody) {
  238. var Reply = ReplyBody.Reply;
  240. var ReplyAuthorTitle = ReplyBody.Author.Title;
  241. var ReplyCreated = ReplyBody.Created;
  242. // console.log(currentRowForBody.Author.Title);
  243. var Mu = Reply.split(",");
  244. for (var i = 0; i < Mu.length; i++) {
  245. var smss = {
  246. Reply: Reply.split(",")[i],
  247. ReplyAuthorTitle: ReplyAuthorTitle.split(",")[i],
  248. ReplyCreated: ReplyCreated.split(",")[i]
  249. };
  250. hashs.push(smss);
  251. }
  252. });
  253. $scope.myarrs = hashs;
  254. },
  255. error: function(sender, args) {
  256. console.log(args.get_message());
  257. }
  258. });
  259. }

The above scripts includes all functionalities, validations etc.

References for the above files

Please add the following JS & CSS files to your code in the following order to make the application works.

Conclusion

Hope, I did my job well. So, with the help of this article, you have learned how to set comment or reply feature to a post while developing your website or a page in SharePoint using AngularJS. Make sure to add the all needed reference files to work this application properly.

Thank you…Happy coding.