Installation manual

Last updated April 19, 2017.

Compatibility

The current version of CommentBox for SharePoint will work with SharePoint 2010 and 2013. If you are stuck in SharePoint 2007 you find an older version here (please note that this one will not receive any updates).

Updating from another version

The current version (v2.6.3) requires a few changes to the setup in the CEWP-code. See below for details.

The license handling has been updated so any existing license codes can be updated free of charge. Please e-mail me the old key to request a new one.

Quick start guide

  1. Download the files from here. The jQuery, fontawesome and tinyMCE resources are loaded from a CDN by default. If you prefer to have these locally, follow the above links to download them.
  2. Upload all the files to a document library named “SPJS” and a folder named “cBox” in the site where you want to use the solution.
  3. Open the file “spjs-cBox_CEWP.js.txt” and verify all the <link> and <script> tags have the correct “href” or “src”.
  4. If you are updating an existing comment box instance you must ensure you use your existing “placeholderID” in the “cBoxArg”. If you fail to do this, you will not see your old comments.
  5. Add a ContentEditorWebPart in the page where you want to include the cBox solution. Enter path to the file “spjs-cBox_CEWP.js.txt” in the “Content link” field in the CEWP. You should copy it from the document library to ensure it is correct.

Video installation guide

Configuration options

  • placeholderID: This is the unique identifier for this instance. You must have a placeholder in the page with this ID – like the div in the top of the code example above. To use multiple instances, change the placeholderID and add placeholders in the page.
  • threadID: This is by default the relative URL of the page or list item. Change this if you like, but remember that you must use an unique identifier for each thread.
  • blogMode: Set this to true if you use this with a blog. This lets you show the comment count for each blog post. Follow these instructions to set up the connection.
  • multiInstanceMode: Set this to true if you want to have multiple instances in one page. For users upgrading from a previous version this must be “false” for the comments to show up.
  • text: These are the text used throughout the cBox solution.
  • textareaVisible: This setting specifies whether the textarea should be visible initially, or to display a button to show it.
  • containerWidth: The width of the comment box in pixels.
  • replyLevels: How deep can the replies go in one thread.
  • pageSize: How many root comments to show in each page. The more the comments, the longer the page takes to load.
  • threadInitiallyCollapsed: true or false to specify whether or not threaded comments should be expanded by default.
  • threadedCommentsIndent: Indent in pixels.
  • textareaHeight: Height of the textarea in pixels.
  • showProfileImage: true or false to control whether or not to show the profile picture.
  • showUserEmail: true or false to control whether or not to show the e-mail address of the comment author.
  • richTextInputUsingTinyMCE: If set to true you must refer the TinyMCE solution.
  • sendToRecycleBinWhenDeleting: true to use recycle bin, false to permanently delete.
  • sortAscending: true or false to control the sort order.
  • colorMyComments: Add a special css class “cBoxMyComments” to the comments created by the logged in user. You can edit this class in the file “spjs-cBox.css”
  • authorCanEdit: true to let the author edit their own comments. Delete is for moderator only.
  • moderatorGroupIDorUserID: Comma separated list of group ID (number) or user ID (number). To find the group ID go to “People and Groups” and click on the group you want the ID of. Look at the URL for this string: /_layouts/people.aspx?MembershipGroupId=5. To find the user id use the same approach by clicking on a user and looking for “ID=123” in the URL.
  • restrictWriteAccessToGroups: Comma separated list of group ID for the groups that is allowed to comment. Leave blank for no restrictions.
  • enableAttachments: true or false to control whether or not to enable attachments.
  • attachmentSizeLimit: The maximum allowed attachment size in MB. Default is 50.
  • hoverToShowIcons: true or false to control whether or not you must hover over a comment to show the edit and reply icons.
  • showCommentCount: true or false to control whether or not to show comment count.
  • autoSubscribeToRootComments: true or false to control whether or not to automatically subscribe the use  to replies to the recently added topic. New in v2.6.3

Use a button to toggle the comments

In the code example in the file “spjs-cBox_CEWP.js.txt” the comments will automatically load when the page has finished loading. If you want a button to toggle the visibility of the comments, edit the top of the file – where you see this line:

<div id="commentBoxInstanse_1"></div>

Replace this line with this code snippet:

<input type="button" style='margin-left:0px;' onclick="cBox_toggleComments(this,'commentBoxInstanse_1')" value="Toggle comments">
<script type="text/javascript">
function cBox_toggleComments(btn,id){
 /* Uncomment to make the toggle button disappear when clicked
 $(btn).remove();
 */
 if($("#cBoxOuterWrap_"+id).length === 0){
 spjs.cBox.init(cBoxArg);
 }else{ 
 $("#"+id).toggle()
 }
}
</script>
<div id="commentBoxInstanse_1" style="display:none;"></div>

Comments or questions

Please use the forum