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>
<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.
When Pigs Fly 
I cannot get this code to work at all in SharePoint 2010. I am applying it to an announcements list preview pane. Any suggestions?
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
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
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
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
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
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
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.
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
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?
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
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.
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
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
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
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)?
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”);
}
)
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
I know I pull this out from dust, but this is really useful. Thank you very much on this.
Is it possible to show first two items on page load?
Sorry for the very delayed response. I assume you already figured out a solution to your problem but at the end of the day this solution just brings focus to a link in the default SharePoint view. If you wanted to pull the first two items you would need to get the HTML via jquery for those items and replace the HTML in the div that displays the results. You could try to trigger the first and second instead but my guess is that the OOTB SharePoint code would replace one with the other. You would probably be better served writing a custom control that reads from the REST API and displays the data the way you want it.
-d
The code below works fine if I use Google Chrome browser, not IE 11. Any suggestions?