How to Create Article Comments

When publishing pages are utilized one of the common layouts used is the Articles layout. While this comes out of the box, the ability to comment on a particular article and be brought back to that page after submitting a comment is not an out of the box feature. This is often a common request from clients. The following article is the complete solution to this request. We are going to utilize SharePoint Designer, XSL, JQuery, and the Data View web part.

In order to accomplish this task it is best to see a sample article with comments. The following image is our end product.

1. The first step is creating a location to hold all of the comments. We will use a custom list called ArticleComment. For the purpose of this solution, I am using one list hold all the comments for every article. While number of items in a list may become an issue, the Data View will be filtering by article page.

Place the following fields in the ArticleComment custom list:

1. Rename Title to PageURL
2. Add ArticleComment

The Page URL will contain the article page name (i.e. article.aspx) as it is displayed in the last part of the http address.

2. We have a list for all our comments; now we need to insert a Data View web part onto the article.aspx page. This will show all of the comments for a particular article. We will bind this web part to the ArtcleComment list we created in step 1.
1. Open SharePoint Designer
2. Open your default installation (File / Open Site)
3. Click _catalogs / masterpage
4. Check out the Articles.aspx page and open
5. Click Insert Data View positioning it properly on the page (ensure that it is under the body of the article text) as shown in the image below.

3. After inserting the Data View, the screen will look like the image below. By clicking it, we can now bind it to the ArticleComment list.

4. The fields from the list are now visible and can be inserted into the Data View web part. Insert:
1. PageURL
2. ArticleComment
3. Created By

NOTE: Styling with this web part is done in code via XSL – we will not be covering styling in this blog.

5. With the fields now showing data, we need to create a filter to show only the comments that are associated with the article that is being viewed. This is done utilizing a parameter which is part of the Data View web part.
1. Click the arrow to the right of the Data View web part that was just inserted.
2. A new menu will appear called Common Data View Tasks as shown in the image below.
3. Click Parameters.

6. We can now add a new Parameter. The image below is the screen you should be viewing.
1. Click New Parameter
2. Under the Parameter Source dropdown, choose Server Variable.
3. Use Path_Info as the Server Variable Name
4. Click OK

This is key to having this solution work. The Path_Info variable will bring the complete URL for the page. (i.e. http://contoso.com/pages/article.aspx).

7. Now the URL needs to be parsed to just get the article aspx name. To do this click Filter from the Common Data View Tasks menu show in Step 5 and the resulting screen is show in the image below.

8. Click Add XSLT Filtering and the edit button.
1. Enter [@Title=substring-after($ReferPageURL, ‘Pages/’)] as shown in the image below.
2. Click OK

This code takes the server variable that has been defined, ReferPageURL. Substring-after will then parse everything after ‘Pages/’ and assign that new value to @Title. For example:

ReferPageURL = http://wwww.contoso.com/pages/windows7.aspx

@Title = windows7.aspx

The Data View is now configured and finished. We need to write some code in the articles.aspx into order to make the rest of the solution. This is done in SharePoint Designer code view.

9. We are still in the articles.aspx page but now we need to click Code at the bottom of the page as show in the image below:

10. Navigate to the data view web part. It can be found by searching for:
1. WebPartPages:DataFormWebPart

NOTE: You will notice several lines of XSL have been added. This is all the code behind the task menu as a result of the actions we took in steps 1-8. We are now going to modify that XSL.

11. The first thing we need is the article page name. This variable (PageName) will be used later in our XSL.
1. Do a search on dvt_StyleName”>Table
2. Insert the declaration for the variable for PageName as shown in the code below (in bold)

<xsl:variable name="dvt_StyleName">Table</xsl:variable>

<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row[@Title=substring-after($ReferPageURL,'Pages/')]"/>

<xsl:variable name="dvt_RowCount" select="count($Rows)" />

<xsl:variable name="RowLimit" select="10" />

<xsl:variable name="FirstRow" select="$dvt_firstrow" />

<xsl:variable name="PageName" select="substring-after($ReferPageURL,'Pages/')" />

<xsl:variable name="LastRow">

12. The user has the ability to comment on the article through a link called 'Add Comment'. Add Comment takes the user to an input page.

The link will use PageName as a variable to be passed in the querystring. Insert the following code before the section labled dvt 1.body.

<xsl:template name="dvt_1.head">

<xsl:param name="PageName"/>

<h6 class="fl">Comments</h6>

<a>

<xsl:attribute name="href">/Lists/ArticleComment/NewForm.aspx?page=<xsl:value-of select="$PageName" /></xsl:attribute>

Add Comment

</a>

</xsl:template>

13. Save the articles.aspx page and close.

From Step 12, one can see that the NewForm.aspx page under the ArticleComment list is being called directly via a querystring. We need to modify NewForm.aspx to accept the string. We will utilize jQuery and XSL to accomplish this task. JQuery is Microsoft's fully supported open source javascript library. Please refer to www.jquery.com for more information.

When a user clicks on Add Comment they will be taken to the following screen. Upon clicking OK the user will be taken back to the original article.

The image below is a modified NewForm.aspx screen. The following steps indicate how to modify it.

14. Open up Newform.aspx for editing under the list ArticleComment as shown in the image below.

15. The page that opens will look like the following image:

Code needs to be added to the page in order to make the page perform custom actions with the querystring. Before the code is inserted several components need to added via design mode which will create XSL for us that we can then modify.

16. Adding a custom list form into the ArticleComment screen shown above will generate XSL that can be manipulated. Click Insert from the menu > SharePoint Controls > Custom List Form

17. The screen will show the PageURL and ArticleComment as seen in the image below:

18. Now the code can be added. In order to insert this code ensure you have the page open in code view (Shown in a prior step).

Using jquery, we will find the PageURL and insert the value of page as the title (which is the name of your article .aspx). Your jQuery code is as follows and will be at the top of the file:

<script type=”text/javascript”>

$(function() {

var page = queryStrVar('page'); //Return the name of the page from querystring

$('input[title=PageURL]').val(page); //Insert name into PageURL field

});

</script>

NOTE: Your master page must have a reference to the jQuery js file in order for this to work.

19. The next thing to do is hide the ‘Preview of List Form Web Part’ (Shown in the image above). Find the <IsVisible> tag and set it to ‘false’.
    
20. The last item is to ‘wire’ up the submitting the comments. The desired behavior is to click the OK button in the image above and comments will be committed into the articlecomment list with the user being redirected to the originating article page. This must be coded.
1. We need a variable containing the page name that our buttons will reference. Insert the following code after xsl:variable name=”dvt_1_automode” in the NewForm.aspx page.

<xsl:param name=”Source”>0</xsl:param>

<xsl:variable name=”RedirectLoc”>

<xsl:value-of select=”$Source”/>

</xsl:variable>

2. Insert the following code in place of the 2 current input buttons in the NewForm.aspx. They have a class of ms-toolbar. By default the buttons are called SaveButton and GoBackButton.

<input type="button" value="Add Comment" class="button" name="btnSave" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__commit;__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

<input type="button" value="Cancel" class="button" name="btnCancel" onclick="javascript: {ddwrt:GenFireServerEvent(concat('__redirect={/news/Pages/',$RedirectLoc,'}'))}" />

21. Save the NewForm.aspx and publish this.

The End. Now every time an article is created there is a spot to add comments and view those comments.