1

I am working on CSR to add a button and change the look and feel of like and comment button for a Blog Site. Currently I am able to achieve this, and it is functional(Button).

CSR preview for custom UI

I am using the below (JSLink) code to achieve it.

(function () {
    var overrideCtx = {};
    overrideCtx.Templates = {};
    overrideCtx.Templates.Fields = { 'Body':{'View': CBody} };

    console.log("Registering CSR");
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
})(); 

function CBody(ctx) {
    var ret = ctx.CurrentItem.Body + "<b>" + 
"<button onclick='myfunc(ctx);' type='button' >Report Abuse</button>" + "</b><hr/>" ;
    return ret;
}

Now I should make it look like this.

Desired View

is there a way that i can append a button after the Comment button of Image 1, after that manipulating css will be easier.

I tried to override like below,

overrideCtx.Templates.Fields = { 'PostCategory':{'View': CDate} };

function CDate(ctx) {
    var ret =  "<br> <b>" + 
"<button onclick='func(ctx);' type='button' >One More Test</button>" + "</b><hr/>" ;
    return ret;
}

But for my luck it didn't worked at all. what field should I override in my case. CSR is under documented for SharePoint please suggest me which field/Tag/View/Whatever is need to overridden.

2

The command bar/links such as Like, Comment etc are outside the Body section of the blog. You can see the rendered HTML in firebug/IE developer tools.

Instead of overring the Body field, create a PostRenderHandler for your view and then it's all about injecting your extra HTML mark up at the correct element.

overrideContext.OnPostRender = your_function_here();

Within your postRender function, add something like this:

var ulDD = $("ul.ms-comm-forumCmdList li:last-child");
ulDD.before("<li id='liButton1' class='ms-comm-cmdSpaceListItem'><span><a class='myBtn' href='#'>Share</a></span></li><li id='liButton2' class='ms-comm-cmdSpaceListItem'><span><a class='myBtn' href='#'>Report</a></span></li>");

that would result as: enter image description here

  • Thanks Aveenav for giving the suggestion, I am sure this will work for me. – Sadanand May 9 '14 at 4:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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