Using the SharePoint 2010 Modal Dialog in Custom Aspx Page

SharePoint 2010 provides a new dialog framework using Client OM (javascript).
You can see the following dialog when you click an item from the list.

Modal dialog is provided by SP.UI.ModalDialog class.
Today, I'd like to introduce how to create a link to show modal dialog in a custom aspx page.
The steps are here.

  • Create Empty SharePoint Project.

  • Add new Application page in the new project.

  • Open new Application page, and add HyperLink tag in "PlaceHolderMain".


  • Open code view of new Application page, and Write the code bellow.

This code indicates : 
  1. Get workflow task item's URL.
  2. Register modal dialog's script by using ScriptManager class.
  3. Bind javascript method for task url link.
StringBuilder taskUrl = new StringBuilder();

        protected void Page_Load(object sender, EventArgs e)
            SPWeb web = SPContext.Current.Web;
            SPList list = web.Lists["Announcements"];

            foreach (SPListItem item in list.Items)
                if (item.Workflows != null)
                    foreach (SPWorkflow workflow in item.Workflows)
                        if (workflow.Tasks != null)
                            foreach (SPListItem task in workflow.Tasks)
                                //create task item url.
                                taskUrl.Append("&ID=" + task.ID + "&IsDlg=1&Web=");
            //make modal dialog script.
            string script =
    var modalDialog;
    function ShowDialogTest() {
        var options = {
            url: '" + taskUrl.ToString() + @"',
            tite: 'Workflow Task',
            allowMaximize: false,
            showClose: false,
            width: 800,
            height: 600 };
        modalDialog = SP.UI.ModalDialog.showModalDialog(options);
            //register the script.
            ScriptManager.RegisterStartupScript(this, this.GetType(), ClientID, script, true);
            //bind the script for hyperlink.
            HyperLink1.NavigateUrl = "javascript:ShowDialogTest()";

The code is very simple. If there are more than two task items, the code doesn't work.

  • Deploy and access the new application page.

If you create Application page in SharePoint Empty Project, the aspx page is deployed in "_layouts" and master page tag is attached automatically. This is very nice function !! 
Sample url is here. "ShowModalDialog" is the project name.


  • Click "HyperLink" link. Modal Dialog is displayed !!

Tips :

I also created an application page in ASP.NET Web Application project. But the code didn't work even after I added the script reference. 

I got "'Type' is undefined (sp.js)" error when I clicked hyperlink to display modal dialog. I can't understand why the error appears.
I'm trying to find out why it happens.

I found tremendously beautiful movie in Vimeo !!
The movie was recorded on a mountain in Spain.


  1. well, after I complete the WF dialog stays open. Do you have the same problem ?


  2. Did you find out the reason why the function ShowModalDialog does not work in an application page? Have exact the problem you descript.

  3. Very informative post. I sometimes do presentations on SharePoint and was wondering if I could use your Print List example in my presentations and refer my audience to your website for further info.

  4. Same problem here about type is undefined

  5. try this for application page