4

Is it possible to change the Title of the List View WebPart (Title property under Appearance) using JSLink i.e using overrideCtx properties? At present, I am modifying the Title using $('span:contains("<Title>")').html("<New Title>") but the styling is not retained (for both preRender and postRender method).

1
  • Did you add jQuery before running this script? You might also check whether you should run it on document.ready Commented Dec 24, 2015 at 14:42

2 Answers 2

3

According to the HTML of WebPart Title, your jQuery should not work. HTML of WebPart Title looks like.

<span title="Project List" id="WebPartTitleWPQ3" class="js-webpart-titleCell">
 <h2 style="text-align:justify;" class="ms-webpart-titleText">
   <a accesskey="W" href="/Projects/Lists/Project%20List">
    <nobr>
      <span>Project List</span>
      <span id="WebPartCaptionWPQ3"></span>
    </nobr>
  </a>
 </h2>
</span>

So now you can try something like following as it worked for me. As you want to use overrideCtx properties, so the code should go under OnPostRender

 OnPostRender: function(ctx) { 
        $('.ms-webpart-titleText a span:contains("Project List")').text("new title");
       }
5
  • Thanks, but the jQuery code $('span:contains("<Title>")').html("<New Title>") is working as it will find the <span>Project List</span> and replace the text. The problem with this approach is that the text will lose all its styling. I was wondering if we can use any of the "ctx" properties. Commented Dec 24, 2015 at 15:40
  • 1
    Did you try my code? I did not lose anything. ` $('span:contains("<Title>")').html("<New Title>")` this selector is not valid. Use mine $('.ms-webpart-titleText a span:contains("Project List")'). Commented Dec 24, 2015 at 15:43
  • Yep. you are right. The styling is intact when using your code. Thanks. Just wondering if there is no property of ctx which i can use? Commented Dec 24, 2015 at 16:00
  • 3
    No, CSR governs the contents of the webpart, not the webpart itself Commented Dec 24, 2015 at 16:06
  • if you had used $('element').text() instead of $(element).html() and selected the inner most node containing the title text you would also not have altered the styling
    – John-M
    Commented Dec 24, 2015 at 18:44
2

For targetting individual WebParts on one screen, and without jQuery

document.querySelector(["#WebPartTitleWPQ2 nobr>span"]).innerHTML="New Title"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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