Defaulting Preview Pane To First Item in List

A client of ours wanted to use the preview pane for a list view. The default view of the preview pane has the right hand pane blank. You need to select an item or hover an item from the left pane to populate the right pane. The client wanted the right hand pane to have the right hand pane default to first item in the list.

UPDATE 10/21/2013:
It looks like when people are doing a copy and paste of the code that the double quotes ” are getting converted to smart quotes. When you copy and paste make sure that you change any of the single or double quotes to plain text.

UPDATE 9/11/2013:

  • On the list view page (e.g. allitems.aspx) att ?ToolPaneView=2 to the query string. Replace ? with & if there are already properties in the query string.
  • Under the page tab click edit page
  • Add a content editor web part to the page above the list items web part.
  • Click inside the content editor web part where is says add new content.
  • From the ribbon select Edit HTML Source
  • In the resulting pop up window paste the following code.
    <script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script&gt;
    <script>
    $(document).ready(
    function ()
    {

              $(‘div.ms-ppleft table tr td.ms-vb-title’).first().trigger(‘onfocus’);
    }
    )
    </script>

  • Stop editing the page.
  • The preview pane should now default to the first item in the list.
About these ads

18 comments

  1. Alex

    I cannot get this code to work at all in SharePoint 2010. I am applying it to an announcements list preview pane. Any suggestions?

    • Derek

      Thanks for the comment. I need a little more info than that id doesn’t work to try to help. Did you add the reference to jquery to the masterpage? Is it throwing a specific error when you try to debug it?
      -dcp

  2. Krithika

    Rating(0-5) is not working in preview pane. how to enable this feature?

    Its working absolutely perfect when the list item is opened in a dialog box.

    Thanks in advance

    • Derek

      I have never tried to use the ratings in the preview pane before. I do know that the ratings uses javascript to manage the stars. Are you getting a specific error? Do the stars load on the page at all or are they hidden? -dcp

  3. Bartek

    Hi,
    Any idea how to achieve that, when you don`t have the administrators permissions nor access to the SharePoint Designer? I tried to simply add your jquery code to the CEWP, but it didn’t work.
    Any feedback would be greatly appreciated.

    Regards

    • Derek

      Bartek, Thank you for your reply. I retested my post and it didn’t work. I updated the instructions above and it should work. You can do all of this work without server access or SharePoint designer. I did it all in the browser. You will however need permissions to add a web part to the page so at least contribute permissions.
      Good Luck. – dcp

      • Bartek

        Derek, Thank you for your fast reply. I added the new code to CEWP, but it still didn’t work. I thought, that the problem may be in the linking to the jquery script. So after the first attempt, instead of giving a link to .js file, I simply inserted the entire script + the function you provided. Result remained the same and there is no change. I think the problem lays in the SharePoint server configuration. I’m afraid that I will end up with submitting a request to our IT department and let them struggle with this, unless you have any other ideas? :)

        Regards

  4. Derek

    I would need to see the error that is being generated. Use firebug or developer tools and post the error. Also check to make sure the the quotes didn’t get turned into smart quotes when you copy and pasted the code.

    • Bartek

      Derek,
      Thank you so much, now everything works perfect. You where right, SharePoint changed quotes to smart quotes. After writing entire code as it supposed to be written, the pane preview works as I want to :-)

      Regards

  5. rkelly

    When I change the ? to a & I get “The webpage cannot be found”
    I can add a content editor webpart, in the html I added your code.

    But nothing happens…. Any ideas?

    • Derek

      rkelly,
      You didn’t really give me anything to go on here so here is a stab in the dark.
      1) Check the URL. If there are no query string parameters then you need the ? If there are query string parameters then you need to add &ToolPaneView=2 to the end of the url.
      2) Read the comments to the post. You probably got smart quotes stuck in there. You are probably getting a javascript error. Use a JS development tool like Firebug or Developer tools to figure out what the error is.

      -dcp

  6. Steve

    This works great for the preview pane I have, however I have 2 preview panes and want to do this for each. How do I change the object reference to accommodate doing this to multiple Preview Panes on a single page.

    • Derek

      If you want to do this for multiple Preview Pages then i would use the JQuery Each functionality to loop through all the preview panes on the page then execute the .first.trigger().

      Good Luck, dcp

  7. rkelly

    Hi,
    I’ve created a fresh new aspx page in SharePoint Designer 2010. Created a Dataview and put it in Preview Pane.
    Again from within Deisigner I added a content editor webpart, but where abouts in the aspx page do I enter your code to get the preview pane to default to the first item when the page is loaded?

    I did try doing split design and code, clicked on the content editor part to highlight the Content Editor web part, pasted your code in, saved and try the page, but nothing happens. Any ideas?

    I need to accomplish this in Designer with code or any of the designer options, can you please help

    • Derek

      rkelly,
      I have not tried this with a dataview web part before so i can’t say why it isn’t working. I would connect to a javascript debugger like developer tools in IE or Firebug in Firefox and see if the javascript is being hit at all. If you need to do this in designer rather than the UI you might need to figure out between what tags you need to add the content in code view. It might be better to just pull in a text file. It would be easier to set that property on the web part via designer than add code that way. Also, make sure that you change any smart quotes that came in when you copied and pasted the code. My gut would say that if you are using a dataview web part that the css is different to the JQuery calls are not returning an element but Firebug will be able to tell you that.

      Good Luck, dcp

      • rkelly

        I have also tried it via SharePoint itself, adding a Content Editor and then edit HTML and pasting your code in on the same page as the list, that doesn’t work either. Checked the tags and they seem ok.

        Can I put your code in a txt file, and call it from the content edit (Content Link)?

  8. talktojeo

    If you tried it, banged your head out still not working, then try out the below code, i spend 4 hrs for this, paste it straight onto your CEWP, it will work!! –

    $(document).ready(
    function ()
    {
    $(“div.ms-ppleft table tr td.ms-vb-title”).first().trigger(“onfocus”);
    }
    )

    • Derek

      Thanks for the comment. Just be careful when you copy and paste. Other users have had an issue when they copy and paste from the blog. The text editor converts the quotes to smart quotes that javascript doesn’t know how to parse as you can see from the previous comments. You need to replace the ” with “.

      -dcp

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s