Using SP.UI.Dialog and SP.UI.Notify from code behind

SharePoint 2010 comes with the SP.UI framework. This is a JavaScript library which you can use to interact with the SharePoint UI. I wanted to use the SP.UI framework to display a dialog which is only shown when condition are met in code behind.

ValidationDialogWebPart

When I placed the JavaScript in the web part I got a null reference error. The problem originated from the SP.UI object model not being loaded. Especially because it did work when I executed the script on the OnClick event of a button.

The solution is provided by the SP.SOD.executeOrDelayUntilScriptLoaded method. It will wait to execute the function you provide until the script you refer is completely loaded.

ExecuteOrDelayUntilScriptLoaded(ShowDialog, "sp.js");

Within my project I added a JavaScript file containing my method “ShowDialog()” to show the dialog. Within my web part I perform the validation and call the CreateDialog() method.

/// <summary> /// Registers the javascript supporting showing dialog. /// </summary> /// <remarks> /// When calling this method, the dialog is shown /// to the user and blocks the page below. /// </remarks> private void CreateDialog() { // Define the name and type of the client scripts on the page. string csname = "ShowDialogScript"; Type cstype = this.GetType(); // Get a ClientScriptManager reference from the Page class. ClientScriptManager cs = Page.ClientScript; // Check to see if the startup script is already registered. if (!cs.IsStartupScriptRegistered(cstype, csname)) { StringBuilder js = new StringBuilder(); js.Append("<script type='text/javascript'>"); js.Append("ExecuteOrDelayUntilScriptLoaded(ShowDialog, 'sp.js');"); js.Append("</script>"); cs.RegisterStartupScript(cstype, csname, js.ToString()); } }

Advertisements
Leave a comment

3 Comments

  1. thaila

     /  February 28, 2013

    Hi Bram, thank you for this post.
    I used your post to try resolved my problem, but didn´t work. Could you help me?

    Server side:
    protected void btnSearch_Click(object sender, EventArgs e)
    {
    string csname = “csstest”;
    ClientScriptManager cs = Page.ClientScript;

    if (cs.IsStartupScriptRegistered(this.GetType(), csname))
    {

    StringBuilder js = new StringBuilder();
    js.Append(“”);
    js.Append(“ExecuteOrDelayUntilScriptLoaded(test, ‘sp.js’);”);
    js.Append(“”);
    cs.RegisterStartupScript(this.GetType(), csname, js.ToString());
    }
    }

    asp.net:

    function test()
    {
    alert(“test”);
    }

    When I clicked on the button nothings happen.

    Thanks,
    Thaila

    Reply
    • Bram de Jager

       /  February 28, 2013

      Thaila,

      when you set a breakpoint in the method “btnSearch_Click” at the start does it hit? If not, you need to check your control bindings and page lifecycle. If it does hit, does it show a Javascript error or something else?

      My ShowDialog() method is something different than your Test(). In the ShowDialog you call the “SP.UI.ModalDialog.showModalDialog” method. The example is below.

      //Dialog opening
      function ShowDialog() {
      var options =
      {
      url: ‘/_layouts/profiles/validatedialog.aspx’,
      title: ‘Welcome’,
      allowMaximize: false,
      showClose: false,
      width: w,
      height: h,
      dialogReturnValueCallback: Function.createDelegate(null, CloseCallback)
      };
      var did = SP.UI.ModalDialog.showModalDialog(options);
      }

      // Dialog callback
      function CloseCallback(result, target) {
      window.location = target;
      }

      Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: