6

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>
  • I am not a Javascript Expert but shouldn't there be the numeral value of character limit somewhere in the JS? :-) – Tenttu Oct 14 '14 at 9:46
  • When you say something doesn't work, please describe the behaviour that seems incorrect: error message, upset expectation, etc. – Alexey Krasheninnikov Oct 15 '14 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 Oct 16 '14 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 Oct 16 '14 at 11:27
8
+50

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

enter image description here

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);
}
  • 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 – Mehdi Jalal Oct 17 '14 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. – Vadim Gremyachev Oct 18 '14 at 15:58
  • 1
    Great code thank you very much it worked prefect, thanks for your help. – Mehdi Jalal Oct 18 '14 at 18:35
  • 1
    Very nice and best code – user33502 Oct 22 '14 at 4:31
3

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. – Mehdi Jalal Oct 15 '14 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 – Mehdi Jalal Oct 15 '14 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 Oct 15 '14 at 6:26
  • I have uploaded my Javascript as a Javascript display template but it is not working – Mehdi Jalal Oct 15 '14 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 Oct 15 '14 at 7:00

protected by Community Jul 20 '16 at 6:23

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).

Would you like to answer one of these unanswered questions instead?

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