SharePoint 2013 Add Read more link in Announcement web part each list items

Question

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;
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);

})();

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:choose>
   <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:call-template>
          </xsl:variable>
          <xsl:value-of select="concat(substring-before($string, '&lt;'), $nextString)" />
   </xsl:when>
   <xsl:otherwise>
          <xsl:value-of select="$string" />
   </xsl:otherwise>
   </xsl:choose>
</xsl:template> 
<xsl:template name="ReadMoreAnnouncements" match="Row[@Style='ReadMoreAnnouncements']" mode="itemstyle">
<br />
<div class="RMAnnouncementsTitle">
    <xsl:value-of select="@Title" />
</div>
<div class="RMAnnouncementsBody">
    <xsl:variable name="body">
        <xsl:call-template name="removeMarkup">
            <xsl:with-param name="string" select="@Body"/>
        </xsl:call-template>
    </xsl:variable>
    <xsl:value-of select="substring($body,1,190)" />
    ...
    <br />
    <a>
        <xsl:attribute name="href">
            /Lists/Announcements/DispForm.aspx?ID=
            <xsl:value-of select="@ID">
            </xsl:value-of>
        </xsl:attribute>
        <xsl:attribute name="class">
            RMAnnouncementsMoreLink
        </xsl:attribute>
        read more
    </a>
 </div>
</xsl:template>

Answer 1

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:

<script>

(function () {

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

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

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

    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(viewCtx);

})();

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>",
    ctx.CurrentItem.ID,ctx.CurrentItem.Body,ctx.listUrlDir,ctx.CurrentItem.Title);
}

</script>

3)Save the page.

That's it.

Result

Update

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>",
    ctx.CurrentItem.ID,headline,ctx.listUrlDir,ctx.CurrentItem.Title);
}

Answer 2

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!