Finding the SharePoint Site Collection URL on the Client

Little tip - if your client-side code needs to know the URL of the site collection hosting a SharePoint page, have a look at the properties of the _spPageContextInfo object in the HTML source of the page.

This JavaScript object is written into each page, and contains useful information about that page. For my requirement, the _spPageContextInfo.siteServerRelativeUrl property contains the value I needed.

jQuery in SharePoint Example - Rounded Corners

A recent project involved the branding of MOSS to incorporate custom design elements as supplied in a PhotoShop page mockup. One of these design requirements was rounding the external corners of the quick launch menu.

Hmmm, what to do. There are plenty of techniques discussed on the web for achieving this outcome, but often the basis for these techniques is to start with clean, web-standards compliant HTML. That's certainly not what SharePoint provides - I needed to work with the HTML that is created by the mixture of master pages and user controls, and did not want to override standard elements for this styling exercise. One aim was to minimize the changes, if any, to the master page.

Many of the rounded corner approaches use JavaScript. And I was, at the time of this project, starting to see the potential of jQuery combined with SharePoint. So a little more research located a neat way forward - the jQuery.Round plug-in.

After a few minutes (hours?) experimentation I derived the jQuery statements to apply rounded corners to the menu. This of course also required adding references to the jQuery and jQuery.round libraries in the master page - so it was necessary after all to change that page!

The statements were:

function AddQuickLaunchCorners()

{

    $(".ms-quicklaunchouter").corner("10px");

    $("div.ms-quickLaunch h3.ms-standardheader span div.ms-quicklaunchheader").css("background-color", "#c1ecff").corner("top 7px");

    $("table.ms-recyclebin:last td").corner("bottom 7px");

}

Note the assumption in the last JavaScript statement that the recycle bin will be the bottom row in the quick launch menu.

These statements, together with modifications to some of the other CSS styles, resulted in the following look for the quick launch menu:

But then I came across a very annoying behaviour. Imagine the following scenario:

• I view a page containing this menu in one tab in IE7
• Then I open another tab in IE7 and navigate around any page in that second tab

Not an unusual behaviour really. But on returning to the first tab displaying the SharePoint page with menu, this is what the menu then looked like:

Yeuch! More "minutes" of investigation lead to the inclusion of the following code in the JavaScript file applying the dynamic styling to the page:

window.onfocus = ReapplyQuickLaunchCorners;

function ReapplyQuickLaunchCorners()

{

    RemoveQuickLaunchCorners();

    AddQuickLaunchCorners();

}

function RemoveQuickLaunchCorners()

{

    $("div.ms-quicklaunchouter>div:not(.ms-quickLaunch)").remove();

    $("div.ms-quickLaunch h3.ms-standardheader span div.ms-quicklaunchheader>div").remove();

    $("table.ms-recyclebin:last td>div").remove();

}

Not a nice solution (OK, it's a hack!) but it works and I ran out of time.

So where am I leading with this post - well, just to illustrate the great things you can do with jQuery to mould SharePoint. Sometime I'll blog about using jQuery for AJAX calls to the MOSS profile search web services, but that's for another time.....

Why does my modal dialog box open another browser on submit?

Currently I am creating an application where a modal dialog box opens when the NewForm.aspx page for a WSS list is opened, to search against an external data source and pass the results back to the form (I'll let you know if this proves to be a viable design pattern!).

The default behaviour of the modal dialog has been driving me a little crazy - when the form in the ASP.Net page in the modal dialog box is submitted by clicking on a button in that page, that same form was opening in a new browser window. The dialog was also remaining open.

Finally came across the solution tucked away in a forum answer by Ken Dopierala Jr. His tip:

Remember, when you post back to a Modal page you must put: <base target="_self"> in the <head> section of the HTML on that page.

And that is all it needed to take the nastiness away, just adding that simple tag into the PlaceHolderAdditionalPageHead placeholder of the WSS page being presented in the dialog. Thanks, Ken!

Javascript in the Onload Event for a SharePoint Page

The simple way to add JavaScript behaviours to a SharePoint page is to add a script block with the for and event attributes set to the relevant object and event.

For instance, to insert a value from the querystring into the page title, add the following script to the top of the PlaceHolderMain Content Place Holder block:

    <script type="text/javascript" language="javascript">
    function getQueryStringValue(qsName) {
        var querystring = window.location.search.substring(1);
        var qsPair = querystring.split("&");
        for (var i=0;i<qsPair.length;i++) {
            var pair = qsPair[i].split("=");
            if (pair[0].toLowerCase() == qsName.toLowerCase()) {
                  return pair[1];
            }
        } 
        return '';
    }    
    </script>
    <script type="text/javascript" language="javascript" for="window" event="onload">
        document.title = 'Details for ' + getQueryStringValue('supplier') + document.title;
    </script>