none
show blogs in excerpt format RRS feed

  • Question

  • I'm so far really impressed with the new SharePoint 2013. One thing I was hoping they would have expanded on was the blog feature. it's pretty functional for the most part but one feature that is missing that drives me crazy is the option to just show the excerpt of the blog entry on the main page rather than the user having to scroll through entire posts when accessing the blogs.

    Is this possible without having to do too much customization?

    Thursday, January 17, 2013 10:49 PM

Answers

  • So the full JS should look something like this (I used the 3rd sample from the blog referenced above and modified it):

    (function () {
    //   Initialize the variables for overrides objects
    	var overrideCtx = {};
    	overrideCtx.Templates = {};
        /*
         * Using the Fields override leaves the rest of the rendering intact, but 
         * allows control over one or more specific fields in the existing view
         */
    	overrideCtx.Templates.Fields = {
    		'Body': { 'View' : CustomField }
    	};
    		
        /*
         * Register the template overrides.
         */
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    
    function CustomField(ctx) {
        // Really basic field-level conditional formatting
    	var ret
    
    	ret = ctx.CurrentItem.Body;
    	if (ret.length > 400)
    	{
    		ret = ret.substring(0, 400) + '&nbsp;&nbsp;&nbsp;<b><a href="/Blog/Lists/Posts/Post.aspx?ID=' + ctx.CurrentItem.ID + '">More ...</a></b>';
    	}
    
    	return ret;
    }

    And the JS link must be "~site/_catalogs/masterpage/blogexcerpt.js" (not "/blogs/PWA/_catalogs/masterpage/blogexcerpt.js"). You will know if your javascript file is loaded properly if you View Source and see something like this:

    <script type="text/javascript" src="/sites/topblog/_catalogs/masterpage/blogexcerpt.js?ctag=0$$15.0.4420.1017"></script>

    Thursday, January 24, 2013 8:51 PM

All replies

  • Depends on what you mean by "too much customization"?  However, the best way to do this in SharePoint 2013 is to use the new JSLink property of the list view web part to override the display of one or more properties of a list item in a list view.  This blog (http://www.idubbs.com/blog/2012/js-link-for-sharepoint-2013-web-partsa-quick-functional-primer/) gives a good step by step introduction to modifying a list display.

    If you want to just show the first 400 characters of a blog entry, you can use his 3rd example to use a CustomField function that does something like this:

    function CustomField(ctx) {
    	var ret
    	
    	ret = ctx.CurrentItem.Body;
    	if (ret.length > 400)
    	{
    		ret = ret.substring(0, 400) + '&nbsp;<b><a href="/Blog/Lists/Posts/Post.aspx?ID=' + ctx.CurrentItem.ID + '">More ...</a></b>';
    	}
    	return ret;
    }

    This sample uses pretty simplistic logic which needs to be a bit more sophisticated to deal with HTML content as it can break in the middle of an HTML tag (e.g. "<p " which will then show in the excerpt).  Or you can have a custom "Excerpt" column with plain text that you display in place of the Body field.

    Regards
    -mfharvey


    • Edited by mfharvey Tuesday, January 22, 2013 4:03 PM
    Tuesday, January 22, 2013 3:46 PM
  • forgive my ignorance as this is a little new to me, but I follow the blog you posted, and uploaded the code you posted as directed by the post. At this point I'm confused, when I try to apply this JSlink to the Posts webpart, the post content turns from rendered html to plain text, and then when I stop editing the page, it just goes back to normal with no changes. What am I doing wrong?

    I think this will be the best route to go (wasn't aware of this new JSlink feature, it's pretty cool!) I may just need to understand this better?

    Thursday, January 24, 2013 5:39 PM
  • Hi,

    It's new for all of us!  I had to play around a bit to figure it out myself before I replied.  What that behavior indicates, I think, is that your JS file is not being loaded on the page.  View source or if you have a developer tool (e.g. F12 in IE 8+) you can go to the script tab and drop down the list of scripts to see if yours is included on the page.  If it is not, or if it cannot be found, here are a couple of things to note:

    1. Make sure the JS file is loaded into a master page gallery either in that site or the top level site collection.

    2. Make sure the reference to the JS link starts with ~site (or ~sitecollection if at the top level).  I only tried this in the blog site iteself so I am not absolutely sure about the site collection reference.  But I missed that from the blog the first time.  The JSLink should look something like:

    ~site/_catalogs/masterpage/truncateBlog.js

    -mfharvey

    Thursday, January 24, 2013 5:47 PM
  • So I doubled check the links and just to be on the safe side I added the full URL to the link. i'm not sure if I can see anything on the scripts tab in developer mode, but only time I get any type of result is when I use the full URL in the scope for the js file, and in the JSlink field. The result is that the webpart doesn't load and nothing is clickable.

    just to confirm the content type settings this is what I have the JS file set to:

    Content Type: JavaScript Display Template

    Target Control Type: View

    Standalone: Override

    Target Scope: http://sp.domain.com/blogs/PWA/ (also tried /blogs/PWA)

    Target Template ID: I first tried 301, but right now it's blank.


    I should also add that this blog is a sitecollection and has a managed path of /blogs
    Thursday, January 24, 2013 8:03 PM
  • Hi,

    So it is weird, but I discovered that using a fully qualified or relative URL will not work.  You have to use the ~site or ~sitecollection reference or your script will not be included in the HTML source.

    Because you were prompted for content type, etc. it looks like you uploaded your script into a top level master page gallery.  So make sure the javascript file is published if necessary - if that button is enabled in the Files in the ribbon then it needs to be published.  You shouldn't need a Template ID in the content type settings.  And I found that it didn't matter what put in the Scope property.

    Then enter this in the JS Link field in the Posts display web part:

    ~sitecollection/_catalogs/masterpage/[yourfile].js

    mfharvey


    • Edited by mfharvey Thursday, January 24, 2013 8:32 PM
    Thursday, January 24, 2013 8:26 PM
  • so I reset the  value on the JS file to the target scope of "/blogs/PWA"

    the JS link for the posts webpart now show "/blogs/PWA/_catalogs/masterpage/blogexcerpt.js"

    when I do this the webpart fails to load.

    is the JS correct?


    function CustomField(ctx) {
    	var ret
    	
    	ret = ctx.CurrentItem.Body;
    	if (ret.length > 400)
    	{
    		ret = ret.substring(0, 400) + '&nbsp;<b><a href="/blogs/PWA/Lists/Posts/Post.aspx?ID=' + ctx.CurrentItem.ID + '">More ...</a></b>';
    	}
    
    	ret = "<div>" + ret + "</div>";
    	return ret;
    }

    Thursday, January 24, 2013 8:38 PM
  • So the full JS should look something like this (I used the 3rd sample from the blog referenced above and modified it):

    (function () {
    //   Initialize the variables for overrides objects
    	var overrideCtx = {};
    	overrideCtx.Templates = {};
        /*
         * Using the Fields override leaves the rest of the rendering intact, but 
         * allows control over one or more specific fields in the existing view
         */
    	overrideCtx.Templates.Fields = {
    		'Body': { 'View' : CustomField }
    	};
    		
        /*
         * Register the template overrides.
         */
    	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    })();
    
    
    function CustomField(ctx) {
        // Really basic field-level conditional formatting
    	var ret
    
    	ret = ctx.CurrentItem.Body;
    	if (ret.length > 400)
    	{
    		ret = ret.substring(0, 400) + '&nbsp;&nbsp;&nbsp;<b><a href="/Blog/Lists/Posts/Post.aspx?ID=' + ctx.CurrentItem.ID + '">More ...</a></b>';
    	}
    
    	return ret;
    }

    And the JS link must be "~site/_catalogs/masterpage/blogexcerpt.js" (not "/blogs/PWA/_catalogs/masterpage/blogexcerpt.js"). You will know if your javascript file is loaded properly if you View Source and see something like this:

    <script type="text/javascript" src="/sites/topblog/_catalogs/masterpage/blogexcerpt.js?ctag=0$$15.0.4420.1017"></script>

    Thursday, January 24, 2013 8:51 PM
  • looks like it works now! probably should have clarified the whole "~sites" part I think that was throwing me off. Thanks for your help this is definitely a clean solution to getting blogs to post in excerpt format!

    Thursday, January 24, 2013 8:58 PM