Open a Popup Window from a SharePoint Web Part

Recently as I was creating a SharePoint web part for a DMC client I ran across a problem which really stumped me. At first, I thought what I had was an easy problem to solve: how does one open a popup window from C# in a web part? I did a lot of research regarding the popup window problem and I discovered that the problem was not addressed in the manner which I needed literally anywhere on the Internet. So after a lot of time spent, energy wasted, and coffee drank I finally was able to engineer a solution, and it is a little trickier than expected.

Now I know what you're thinking "That's easy, I have been doing that in HTML since 1999." Well, that's what I thought too, but it was not quite that easy and requires a little bit of work. Just to review, it is easy to add a hyperlink in HTML which launches in a popup window:

<a href = "http://servername.com" target = "_blank">Link to text</a>

Now that's about as simple as it gets in computers, but what about doing the same thing via JavaScript? Well, that is also pretty straightforward:

<script language = "javascript" type = "text/javascript">

    window.open('http://servername.com', 'windowname', 'width=XXX, height=YYY');

</script>

Once again, not too bad right? So if we have a click event procedure in a C# code behind file such as:

///<summary>
/// btn click handler
///</summary>
///<param name="sender">Sender</param>
///<param name="e">Event Args</param>
protected void _btn_Click(object sender, EventArgs e)
{
	//some code executes here

	//launch popup window, BUT HOW?
}

How do we launch a popup window when the web part's HTML is loaded? I tried several ideas such as rendering the JavaScript code above into the web part's HTML. However, the JavaScript was rendered well above the HTML for the surrounding SharePoint web page, which caused it to fail. So, obviously, this wouldn't work, so how exactly does one get this to work?

The answer actually is a combination of C# code and JavaScript. What we need to do is pass the web address in the query string to the page via a Response.Redirect statement, then parse the query string in JavaScript code, and launch a popup window. To do this we must first insert the following code in to our ASCX file for the web part:

<script language = "javascript" type = "text/javascript">
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        var ret = "";
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            if (pair[0] == variable) {
                ret = pair[1];
                break;
            }
        }
        return ret;
    }

    var popupurl = getQueryVariable("popupurl");
    if (popupurl != "") {
        window.open(popupurl, "mypopup_window", "width=500, height=500");

        //cleanses querystring
        if (window.location.href.indexOf("popupurl") >= 0) {
            var posqs = window.location.href.indexOf("?");
            if (posqs >= 0) {
                var refreshurl = window.location.href.substring(0, posqs);
                window.location.href = refreshurl;
            }
        }
    }
</script>

Then we need to do a redirect in the C# file this way:

///<summary>
/// btn click handler
///</summary>
///<param name="sender">Sender</param>
///<param name="e">Event Args</param>
protected void _btn_Click(object sender, EventArgs e)
{
	//some code executes here

	//launch popup window
	string URL_TO_POPUP = "http://servername.com";
        string szQSParameter = "popupurl=" + URL_TO_POPUP;
	string szRedirect = Request.Url.Scheme + "://" +
                            Request.Url.Host + ":" + 
			    Request.Url.Port.ToString() +
                            Request.Url.AbsolutePath;
	if (szRedirect.Contains('?') == true)
	{
		szRedirect += "&" + szQSParameter;
	}
	else
	{
		szRedirect += "?" + szQSParameter;
	}
	Response.Redirect(szRedirect);
}

Doing this makes it easy for our web part to pop up windows from the C# code behind file when needed.

I hope this helps you on your way to developing compelling web parts for SharePoint 2010. We here at DMC are experts with SharePoint and Microsoft technologies, and would love to help you implement whatever solution your business needs.

Don't hesitate to contact DMC if you need some help on a SharePoint project (we are especially good at helping our cllients integrate data from other systems into SharePoint dashboards).

Learn more about DMC's SharePoint consulting services.