Tuesday, December 2, 2014

How to change the Web Part Title URL behavior

With my morning cup of coffee I decided to start with something fairly simple (as a requirement) - it's in fact quite fresh as I had to do it for a client yesterday. It sounded like a 5 minute job, at the end it turned out more interesting. I've done this on 2010 and tested on 2013 as well - same behavior.

The requirement is to make just one specific webpart title URL to open in a new window while keeping all others (if any) loading in the same browser window. I am referring to the "Title URL" property, that is set in the Advanced section when you edit the web part.


There's no out of the box option to configure that, you could remove the URL, or point it to the page itself by changing it to #, but no way to make it open in a new window by adding "_blank" or something.

We can, however use a tiny piece of JavaScript to achieve that (tell SharePoint to do a specific thing when someone clicks on a specific URL) and we have a couple of options doing that thanks to jQuery.

Depending on whether that webpart is reused in many sites or web apps, you need to decide which method is the right one for you, You can do it globally with a full trust solution. That would have a wide impact on all web apps that have the solution deployed.
Let's assume you already have some branding solution in place which has a ccustomizations file in a .js format, you can add that piece of code in there. We are using the onload function here to ensure the site has fully loaded. If you have other JavaScript / jQuery customizations in the site that's the preferred method of calling jQuery to avoid any conflicts. The downside is that it will load only after all images are fully loaded, including some banner ads, etc.

In those example scripts I'm using the Microsoft CDN hosted version of the jQuery library, you can, however download a copy and store it locally on your site. Please make sure you use the https:// prefix in the reference if your site is accessed through SSL.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"</script><script>
window.onload = function() {
    if (window.jQuery) {
        jQuery(document).ready(function () {
                                jQuery('a[href^="http://www.contoso.com (replace with your URL)"]').click(function () {
                                jQuery(this).attr("target", "_blank");
                                });

                });
 </script>

The second way (more granular) is to store the script as a .js file in SharePoint and apply that on the page level by using the Content Editor webpart to call it. Here we're using the statement known as the ready event. This ensures that the code will run as soon as the document is ready for manipulation. Preferred method if we don't experience any conflicts with other customizations when trying to load it that way. Executes straight away without loading all the images first.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"</script><script>
$(document).ready(function(){
  $('a[href^="http://www.contoso.com (replace with your URL)"]').click(function() {
    $(this).attr("target","_blank");
  });
});
 </script>

You can also do that for all web part title URLs, the script will look like this:

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"</script><script>
$(document).ready(function(){
$("h3.ms-WPTitle a").attr("target","_blank");
 });
 </script>

That's it. You can then export/import your CEWP and reuse it on any other page quickly. Don't forget to set its Chrome type to None so you don't actually display it on the web page.

4 comments:

  1. Not able to get this to work. My ExcelWebpart is on a WebPart page, single column. Tried placing it in page itself, placing code in Content Editor and calling code from Content Editor. Nothing has worked

    ReplyDelete
    Replies
    1. Hi James,

      Thanks for your comment.

      Please try and save one of the scripts as a .js file and upload it to your SharePoint farm. Ideally in the same site collection where it will be loaded. Then call it from a Content Editor Web part.

      If that does not work, use Developer Tools in your browser to see if the .js is trying to load at all.
      Might be wrong method of calling it, or a setting in the browser (much less likely though).

      Cheers,

      Dimitar

      Delete
  2. It is one of the best stages for intense and full-included versatile application advancement for Smartphones like IPhone,java

    ReplyDelete