Add customizable information to a library page

Hi everyone!

As you know when you add a web part to a library page, like Allitems.aspx or a page of a custom view that you’ve made, the ribbon gets wacky. That’s because it doesn’t know which web part it should have its focus on.

So what could we do if we really want some information, let’s say above the library web part?

And the information should be able to edit in an easy manner without using SharePoint Designer (SPD).

In this example I have a top site and underneath this I have some sub sites that are created from a site template I made. The things we are going to do now is made to that template so it could be reused.

First of all we have to edit the page’s code a bit, so bring up the page in your favorite editing tool SPD!

Find where the web part zone for the library begins and add two DIV’s right before it starts, like this:

PlaceHolderMain" runat="server">
<div id="success"></div>
<div id="error"></div>
<WebPartPages:WebPartZone runat="server" FrameType="None" ID="Main" Title="loc:Main">

As you can see I have added two DIV’s right after PlaceHolderMain with the ID’s of success and error. Don’t close this page, we are coming back here real soon.

What we are going to do now is to add some content to the success DIV.

First we need to have some content, right?

On the top site, let’s create a new Web Part Page, call it content.aspx and choose Full Page, Vertical.

Add a Content Editor to the page, click inside it, choose to Edit HTML Source…

…and paste this code:

<div id="<span class=">MyDiv"></div>
The content within this DIV will be shown above the document library.
<li>To think about...</li>
<li>And this as well...</li>

Ok, so now we have som content and as you can see the content is kept inside a DIV with the ID of MyDiv.

Now we are going back to the first page (where we have the library and added the two DIV’s) to add this information to the success DIV.

Let’s add som jQuery!

Find AdditionalPageHeader and add this code:

<asp:content contentplaceholderid="PlaceHolderAdditionalPageHead" runat="server">
 <SharePoint:RssLink runat="server"/>
<script type="text/<span class=">// <![CDATA[
javascript</span>" src="/sitename/Shared%20documents/jquery-1.6.2.min.js">
// ]]></script>
<script type="text/javascript">
 $(document).ready(function() {
 $("#success").load("/sitename/sitename/SitePages/content.aspx #MyDiv",
 function(response, status, xhr) {
 if (status == "error") {
 var msg = "Page is missing: ";
 $("#error").html(msg + xhr.status + " " + xhr.statusText);

As you can see, first I have a reference to my jQuery file, you should replace the URL so that it corresponds to your environment.
Then in the next section we are loading the content in MyDiv into the DIV with the ID of success.

Now we are done!

Save all pages and try it, it should look something like this:

This way you can create new sites from this site template and just by editing the Content Editors in the page content.aspx you could update the contents on all sites.

Isn’t that nice?