I want to add Read more link in my Announcement Web Part I followed this blog post: http://www.learningsharepoint.com/2013/04/07/styling-announcements-with-javascript-using-js-link-in-sharepoint-2013/

I created an external javascript file and put the blow Javascript code:

(function () {
var itemCtx = {};
itemCtx.Templates = {};
    itemCtx.Templates.Header ="<div><b>Announcements</b></div><table>";
    itemCtx.Templates.Item = ItemOverrideFun;
    itemCtx.Templates.Footer = "</table>";
itemCtx.BaseViewID = 1;
itemCtx.ListTemplateType = 104;


function ItemOverrideFun(ctx) {
var _announcementTitle = ctx.CurrentItem.Title;
var _announcementDesc = ctx.CurrentItem.Body;
var _announcementID = ctx.CurrentItem.ID;
return "<tr><td><p><b>"+_announcementTitle+"</b></p>"+_announcementDesc+"<a     href='/sites/testdev/Lists/Announce/DispForm.aspx?ID='+_announcementID +'>Read More...</a>   </td></tr>";

when I put the link inside JS Link it doesn't work

i have also tried another blogs post with the blow codes which I have putted in my ItemStyle.xsl but it also does not works.

 <xsl:template name="removeMarkup">
   <xsl:param name="string" />
   <xsl:when test="contains($string, '&lt;')">
          <xsl:variable name="nextString">
                 <xsl:call-template name="removeMarkup">
                 <xsl:with-param name="string" select="substring-after($string, '&gt;')" />
          <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
          <xsl:value-of select="$string" />
<xsl:template name="ReadMoreAnnouncements" match="Row[@Style='ReadMoreAnnouncements']" mode="itemstyle">
<br />
<div class="RMAnnouncementsTitle">
    <xsl:value-of select="@Title" />
<div class="RMAnnouncementsBody">
    <xsl:variable name="body">
        <xsl:call-template name="removeMarkup">
            <xsl:with-param name="string" select="@Body"/>
    <xsl:value-of select="substring($body,1,190)" />
    <br />
        <xsl:attribute name="href">
            <xsl:value-of select="@ID">
        <xsl:attribute name="class">
        read more
  • I am not a Javascript Expert but shouldn't there be the numeral value of character limit somewhere in the JS? :-)
    – Tenttu
    Commented Oct 14, 2014 at 9:46
  • When you say something doesn't work, please describe the behaviour that seems incorrect: error message, upset expectation, etc. Commented Oct 15, 2014 at 13:12
  • You can debug Javascript with IE, Chrome and Firefox. Open up the developer console (usually F12), search the javascript, set a breakpoint and refresh the page.
    – Wout
    Commented Oct 16, 2014 at 9:35
  • After adding xsl in ItemStyle, you have to add content query webpart and set presentation style to ReadMoreAnnouncement. Then only it show the custom style in your announcement.
    – ateet
    Commented Oct 16, 2014 at 11:27

2 Answers 2


The template file from the article that you mentioned in the question contains some typos and hard-coded parameters like title and list url.

Instead I would recommend you to utilize the template provided below.

Regarding template file, in fact, there are several ways how to apply custom template to List View, and not necessary only via JSLink property. Below is demonstrated probably the easiest way of customizing Announcements.

How to apply changes

1) Open the page where Announcements web part resides in Edit Mode

2) Add Script Editor web part on the page. Then click Edit Snippet in Script Editor web part and embed the following code:


(function () {

    var viewCtx = {};
    viewCtx.Templates = {};

    viewCtx.Templates.Header = "<table>";
    viewCtx.Templates.Item = AnnouncementItem;
    viewCtx.Templates.Footer = "</table>";

    viewCtx.BaseViewID = 1;
    viewCtx.ListTemplateType = 104;



function AnnouncementItem(ctx) {
    return String.format("<tr><td><p><b>{3}</b></p>{1}<a href='{2}/DispForm.aspx?ID={0}'> Read More…</a></td></tr>",


3)Save the page.

That's it.


enter image description here


function AnnouncementItem(ctx) {
    var headlineLimit = 300;
    var headline = $(ctx.CurrentItem.Body).text(); 
    if (headline.length > headlineLimit)
        headline = headline.substring(0,headlineLimit);
    return String.format("<tr><td><p><b>{3}</b></p>{1}<a href='{2}/DispForm.aspx?ID={0}'> Read More…</a></td></tr>",
  • Thank you very much appreciated. please if you help me on limiting of characters if they become more than 300 characters it should put... again thanks allot for your great code and help
    – MJ X
    Commented Oct 17, 2014 at 21:09
  • Glad it helped you. Regarding limiting of characters, see the Update section of the answer, it demonstrates how to truncate the body column. You just need to replace AnnouncementItem function. Commented Oct 18, 2014 at 15:58
  • 1
    Great code thank you very much it worked prefect, thanks for your help.
    – MJ X
    Commented Oct 18, 2014 at 18:35
  • 1
    Very nice and best code
    – user33502
    Commented Oct 22, 2014 at 4:31

You have to make some correction in your javascript mentioned in first editor. As it work fine in my case.

  1. Copy JavaScript in notepad and make below changes
  2. Replace double quotes “ and ” with normal quotes ".
  3. Replace single quotes ’ with normal single quote '.
  4. Check your list url properly ’/Lists/Announcements / DispForm.aspx?ID = ’ + _announcementID + ’. As remove spaces between them and make it as '/Lists/Announcements/DispForm.aspx?ID ='+announcementID
  5. While uploading JavaScript file in MasterPageGallery as a JavaScript Display template. Assign list id 104 instead of 107.
  6. While giving url in JSLink property in your webpart, copy url first in notepad and replace quotes with normal quotes then apply it.

Be very careful when giving url in JSlink property. In most of cases it doesn't work because of incorrect url. Your url must start with ~site/_catalogs then your javascript file name. Dont' put javascript file in any folder in masterpage gallery. Directly put in masterpage gallery then see the changes.

Your JS file seems ok, put the url in your webpart JSLink property ~site/_catalogs/masterpage/testa.js

It will work like a charm!

  • My dear friend I don't know why it is not working I followed your steps but still I can't see any read more link to be added at the end of my each Announcement list item.
    – MJ X
    Commented Oct 15, 2014 at 4:27
  • Do I need to modify the Javascript more. I have created a folder by the name of JS in my _catalog folder and created a javascript file and putted this script there and copied the link and putted in JSlink, don't know why it is not working
    – MJ X
    Commented Oct 15, 2014 at 4:33
  • @MehdiJalal, I think you need to navigate into your master page gallery and from there you can upload a Javascript Display Template as ateet said in his answer. Could you try it like that? :-)
    – Tenttu
    Commented Oct 15, 2014 at 6:26
  • I have uploaded my Javascript as a Javascript display template but it is not working
    – MJ X
    Commented Oct 15, 2014 at 6:27
  • 2
    @MehdiJalal Don't upload javascript file in folder in _catalog folder. Just simply upload it directly in MasterPage gallery as a Javascript Display template. And be care about providing links. Give like ~sites/_catalog/filename.js
    – ateet
    Commented Oct 15, 2014 at 7:00

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