Pimping Sharepoint without Server Side Code

Process-first, software second.
Pimping Sharepoint 2007 without Server-Side Code

Part 1

One of my biggest frustrations with Sharepoint 2007 in the corporate world is that while good-intentioned managers lock down the more interesting capabilities of Sharepoint programming in the name of sustainable code, they often kill innovation in the process.  Over the last several years, I have had the opportunity to find ways around this strict no-code policy to achieve a user experience that is reasonable while getting all the benefits of Sharepoint 2007.

In this series, I will show you how I have leveraged the existing infrastructure of Sharepoint along with the out-of-the-box  Content Editor Web Part and jquery to give Sharepoint a much nicer look and feel, users more natural access to the data, and ultimately design freedom within the walls of a Sharepoint installation.

I will be making a lot of assumptions about the reader’s experience with Sharepoint and jquery.  You should be able to make and manage lists, created libraries, and all the other “normal” Sharepoint administrative tasks that occur through the interface.  You should also have a pretty strong working knowledge of the jquery core.  If neither of those are in your wheelhouse, this article might not be for you.

Getting Started
You must have Sharepoint 2007 installed and have Full Control on a site collection.  If neither of these is true, stop reading now.  The rest of this article won’t matter to you.  

We’re going to be working with some pretty simple concepts at first.  For now, let’s create a Custom List in Sharepoint.  We’ll call it Fast Food.  This will be a simple list of Fast Food restaurants.  We’ll add a few columns to this list just to keep things interesting.
Create List
Go to Settings > List Settings > Create Column and create a Yes/No column called Favorite.
Create custom List element
This will do for now.  Let’s add a couple restaurants and take a look at the default view.
You should have a list page that looks something like this.
 our List
Creating a Content Page
Now that we have a little infrastructure, let’s create a Content page that we will actually use to interact with this list.  As the name suggests, we are not going to use any of the “standard” Sharepoint  methods of interactive with this list.  Instead, we will be building a fully custom data view and editor.  Certainly this example is trivial, but we’ll start ramping up the complexity as we go along.

Under Site Actions in the base page of your Site Collection, select Create > Web Pages > Web Part Page > Full Page Vertical.  We’ll call it FastFood.  Choose to save it in your Shared Documents list.
Create a blank Web Part Page
Add a Content Editor Web Part (CEWP)
All of the work of our customization is eventually going to be saved in this Content Editor Web Part.  So, let’s create one on the page.  Click the Add a Web Part control and select the Custom Editor Web Part.
Add a Custom Web PartSelect Custom Web Part
Adding Jquery
Nothing of interest is going to happen until we hook up our new page with Jquery.  There are a lot of way to handle this, but I’m going to take the most straight-forward approach and include the library in a script tag at the top of the CEWP.  Copy and paste the code below into your CEWP Source Editor to confirm that you are getting Jquery properly.  Do not use the Rich Text Editor.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
                      <script type="text/javascript">

Open in new window

Adding Jquery
If you’ve done this properly then you should get an alert as soon as the CEWP is saved.  Yeah, you’ll want to kill that alert right away – it will be quite annoying.  In fact, for troubleshooting I exclusively use console.log() and F12 developer tools (available in IE, FireFox, Chrome).
 Test Jquery
Adding some simple HTML
You are of course free to add as many CEWP’s to the page as you like.  And in fact you may want to use one of the columnar templates offered by Sharepoint and put them all over the page.  Since we chose for this example a single page, I will be putting everything in one CEWP and use styles to organize the page.  So, let’s get to it and add a heading and a blank list object.
Copy and paste the following directly below your Jquery include and (document).ready() section.
<h2>Fast Food Joints</h2>
                      <ul id="list"></ul>

Open in new window

Adding some HTML
Fetching the List Data
Now we get down to the good stuff.  We are going to take advantage of Sharepoint’s built in “owssvr.dll”.  This little beauty is native to Sharepoint 2007, is included with all site collections, is a part of core Sharepoint methods (that is – Sharepoint uses it itself), and therefore should be considered a stable way of working.  To be more specific, this .dll can be accessed like this:


Open in new window

where MySite is where our Fast Food list lives.

To use this .dll we are going to be building a query string, sending it to the server via jquery’s $.get() method, retrieving the XML response, and parsing the values to display them for mere mortals through HTML.
Before we can do any of that, we need to know the ID of the list we created and the default view that was created for the list as well.  There is an easy way to get this information.  Go to your Fast Food list and choose Modify this View (on the right-side drop-down menu).
 Finding your IDs

Now, take a look at the URI at the top.  If you cursor just past the .aspx portion, you will see the List=, and View= designation.  Mine looks like this:
These are simply two GUIDs.  %7B = “{“, %7D = “}”, and %2D = “-“.  So, the above could be expressed like this:

Now that we know our List ID’s and the View ID, we can test out our owssvr.dll by pasting the following in a browser address box:

Open in new window

If you have done everything properly, you should see the following:
 List Raw XML
Notice that this will give us keen insight in to the guts of our Sharepoint list.  We now know the name of the fields we created – at least what Sharepoint calls them.  We have ows_Favorite and ows_LinkTitle.  This is what we will use when referring to the values in our jquery to extract the “data” we just got.

Setting up the $.get()
Now we are ready to get our data using jquery’s built-in ajax shorthand - $.get().  You can of course use the full $.ajax() method, but for our purposes, $.get() will work just fine.  Here is the code.

<script type="text/javascript">
                      $.get("http://mySharepoint.com/sites/MySite/_vti_bin/owssvr.dll?Cmd=Display&List={B761EFB2-93FC-41F1-8AEC-433EB56339C2}&View={99793BF3-CECC-4868-B1F3-14AC627EB66D}&XMLDATA=TRUE", function(data,textResponse){

Open in new window

Notice how we were able to pick off the data from the <rs:data> row.  It’s a short putt now to displaying that data in a list.  Just replace the console.log line with a line to fill up our <ul> with the ID=List:
                                $("#list").append($("<li>" + $(item).attr("ows_LinkTitle")+ "</li>"))

Open in new window

And we get:
Final Result

That’s where I’ll stop for Part 1.  We have just started down the rabbit hole.  If there is enough interest I’ll continue with more advanced methods like Adding, Editing, and Deleting.  I’ll also share some of the best-methods I’ve come up with for keeping all this hacked-together code in some semblance of order.  The techniques in this post are really just a proof of concept.  Once you know how to get your hands on the data, there really is no limit to the complexity you can employ.
Process-first, software second.

Comments (9)

Thanks a lot skrille,
I replaced that with my corp URL

I get a "ERROR" page with this text. does this sound familiar, if not please reply when you have some extra time. Thanks a lot again.
Cannot complete this action.
Please try again.
Troubleshoot issues with Windows SharePoint Services.


@MSKaveti - Are you accessing this SP from inside your company, or is this a hosted version of SP?  When I'm on my corporate networks, we handle all security through windows integrated - no forms or basic auth.  If this is a hosted solution, you may need to log in and verify your credentials before pasting the .dll URL and trying to get a response back.  If you would like to send me samples off-line of what you are trying to do, I'd be OK with that.


Thanks steve thats very kind of you. I am accessing the site from inside my company. I am authorised to access the site. I'm given site collection admin access. I am not allowed to do any coding via Visual Studio because of security reasons. So i am educating myself to find a way around visual studio coded web parts to meet the requirements. Right now I am working on developing a web form to gather data and populate a table. customer is ok if he gets the data on an email as well but he prefers a DB Table getting updated. Its basically collecting the EOD sales info and the division lead needs that data for analysis.
I will get my case on an email to you.
Thanks a lot for the attention which is immense for me.

Thanks Mark,
I have posted a Question this morning and didnt get a response yet so started browsing thru the articles and found Skrile's article addressing my concern of not doing server-side code.
Thanks for your time
Have a Good Weekend!


Was just reading through this article a few weeks ago and it bothered me how aged it had become. I've learned a ton about this approach and am now using Sharepoint 365. Also, writing articles is really time-consuming so I'm switching to an episodic video format. You can check it out here.

View More

Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.