locked
Add a read more button for announcements list RRS feed

  • Question

  • Hi,

    So basically I have an announcements list. I added a column called Short Description which is what I want displayed in a CEWP with a thumbnail(also a column I added) and of course the title. I then want a read more link that when clicked shows(appends) the body to the short description which then makes it a full article/announcement.

    I would also settle with just having a body column without the short description and only show like 4 or 5 lines of the body with a read more link that then showed the rest of the body all with in a CEWP or if there is a better web part that can be used for doing this.

    Thank you

    • Edited by tmorel2013 Wednesday, December 11, 2013 2:11 PM updated question and title
    Wednesday, December 11, 2013 5:10 AM

Answers

All replies

  • Hi,                                                             

    From your description, you might want to add a button into your list to show the whole article in the "Body" column.

    There is an OOTB workaround like this: Set the style of current list view as "Preview Pane", then we can show/hide all the columns(including the "Body" column) by mouse hanging over the title of the items.

    To achieve the above, we need to go to the "Edit View" page first, then check to make the "Body" column to be shown in the "Column" group.

    After that, scroll down the page to find the "Style" group, select the "Preview Pane", then "Ok" to save your changes.

    Show the “Body” column:

     

    Set the style:

    Best regards

    Patrick Liang
    TechNet Community Support

    Thursday, December 12, 2013 7:48 AM
  • Hi Patrick,

    Thanks for the reply but that's not exactly what I am going for. See the image below its kind of where I am now. I have pulled the thumbnail and body and got a read more button. I have recreated the html in my javascript code to give me this look. The problem with below is one the width of as you can see the text just keeps going but that I can fix. What's not happening in the image is firstly its showing the whole body text, I need that to show only a few line and then we I click the read more button it should show the rest of the body.

    Thanks

    Thursday, December 12, 2013 8:18 AM
  • There is a similar article that describes step by step, check this out let me know if you need anything else

    http://www.learningsharepoint.com/2013/04/07/styling-announcements-with-javascript-using-js-link-in-sharepoint-2013/


    Raghavendra Shanbhag | Blog: www.SharePointColumn.com
    Please click "Propose As Answer " if a post solves your problem or "Vote As Helpful" if a post has been useful to you.
    Disclaimer: This posting is provided "AS IS" with no warranties.

    • Marked as answer by Dennis Guo Sunday, December 22, 2013 1:17 PM
    Thursday, December 12, 2013 8:53 AM
  • Hi Raghavendra,

    I have actually used that article and got it setup and working properly. The only issue with that is, it shows my title and the body and then my read more button but it is showing the full body and not just a couple of lines, the read more link button takes you to the actual list item instead of appending the rest of the body onto a shortened version of the body. Lastly I battled to get it to show the thumbnail, keeps bringing back the url of the thumbnail.

    This is all because I don't quite understand the ctx. type functions it uses. If you could elaborate on the code on how I would be able to get around the issues I mention now that would be a huge help.

    EDIT: So my code has changed since I last posted. Below I will post my jslink file code and then after that the code I have in a script editor on the page. Just doesn't seem to be doing the final part I need which is the read more part.

    jslink code:

    (function () {
       
    	var itemCtx = {};
    	itemCtx.Templates = {};
    	
            itemCtx.Templates.Header = "<table>";
            itemCtx.Templates.Item = ItemOverrideFun;
            itemCtx.Templates.Footer = "</table>";
    
    	itemCtx.BaseViewID = 1;
    	itemCtx.ListTemplateType = 104;
    	
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(itemCtx);
    
    })();
    
    
    function ItemOverrideFun(ctx) {
    
    var _announcementThumbnail = ctx.CurrentItem.Thumbnail;
    
    var _announcementTitle = ctx.CurrentItem.Title;
    
    var _announcementDesc = ctx.CurrentItem.Body;
    
    var _announcementID = ctx.CurrentItem.ID;
    
    return "<tr><td><p><b>" + _announcementTitle + "</b></p>" + "<img src='http://win-d5ebc6svm8i'" + _announcementThumbnail+ "'>" + "<div id='my_text' class='ellipsis'>" +  _announcementDesc + "</div>" + "<div id='read_more'>Read More</div></td></tr>";
    
    
    }
    
    

    Script Editor Code:

    <script src="/SiteAssets/code/js/jquery-1.9.1.js"></script>
    <style>
    
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        -moz-binding: url('http://seancannon.com/_test/ellipsis.xml#ellipsis');
    }
    
    #my_text {
        font-family:arial;
        color:#333;
        font-size:12px;
    }
    
    #read_more {
        cursor:pointer;
        color: blue;
        text-align: right;
    }
    </style>
    
    <script>
    $( document ).ready(function() {
    
        $('#read_more').click(function(){
        $('#my_text').toggleClass('ellipsis');
     });
    });
    
    </script>



    • Edited by tmorel2013 Thursday, December 12, 2013 2:59 PM
    Thursday, December 12, 2013 9:06 AM
  • Body with couple of lines, fixed

    http://www.learningsharepoint.com/2013/04/07/styling-announcements-with-javascript-using-js-link-in-sharepoint-2013/

    http://code.msdn.microsoft.com/office/Client-side-rendering-code-93e7077d

    (function () {
       
    	var itemCtx = {};
    	itemCtx.Templates = {};
    	
    	itemCtx.Templates.Header = "<table>";
    	itemCtx.Templates.Fields = { "Body": { "View": ItemOverrideFun } }; 
    	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.toString();
    
    var _announcementID = ctx.CurrentItem.ID;
    
    var bodyValue = ctx.CurrentItem.Body.toString();
    
     //This regex expression use to delete html tags from the Body field 
        var regex = /(<([^>]+)>)/ig; 
     
        bodyValue = bodyValue.replace(regex, ""); 
     
        var newBodyValue = bodyValue; 
     
        if (bodyValue && bodyValue.length >= 100) 
        { 
            newBodyValue = bodyValue.substring(0, 100) + " ..."; 
        } 
    
    
    return "<tr><td><p><H4>" + _announcementTitle + "</H4></p><div id='my_publicnews'>" + newBodyValue  +"</div>"+"<a href='/Lists/PublicNews/DispForm.aspx?ID="+ _announcementID +"'> Read More…</a></td></tr>";
    


    • Edited by etejeda Friday, April 4, 2014 6:27 PM Correction
    Friday, April 4, 2014 6:24 PM