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).

  • Did you add jQuery before running this script? You might also check whether you should run it on document.ready – Lucas Rodrigues Dec 24 '15 at 14:42
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");
       }
| improve this answer | |
  • 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. – Thomas Mathew Dec 24 '15 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")'). – Atish Dipongkor - MVP Dec 24 '15 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? – Thomas Mathew Dec 24 '15 at 16:00
  • 3
    No, CSR governs the contents of the webpart, not the webpart itself – Danny '365CSI' Engelman Dec 24 '15 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 Dec 24 '15 at 18:44
2

For targetting individual WebParts on one screen, and without jQuery

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

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.