Tuesday, December 27, 2016

Working with Sitecore SPEAK dialog

In old world of Sitecore (Sheer UI), you used to work with SheerResponse to open the dialog box as shown below

SheerResponse.ShowModalDialog(new ModalDialogOptions(url)
{
  Width = "100",
  Height = "200",
  Response = true,
  ForceDialogSize = true
});

The same logic will work when you are opening a SPEAK page as a dialog from a non-speak interface

Sitecore documentation here is a good start to understand various options. This blog is not about re-iterating those options but something that is not documented (or at least i haven't seen).

I was in a situation where I had 2 SPEAK pages and I wanted to open second page as a modal dialog from the first SPEAK page. Though the last section of above documentation provides you a reference but documentation is incomplete.

When you are trying to open one SPEAK page from another in a modal form (i.e. until you respond to the dialog you cannot do anything on the parent window, either by means of taking some action or closing the window) you have to follow these steps

  1. Add a DialogWindow rendering in your SPEAK page
  2. Add Frame component in DialogWindow placeholder
  3. Set the Frame Source URL property to the second SPEAK page you want to open in the dialog window. I am doing this in code as shown below
            showDialog: function (td) {
                try {
                    //adding couple of querystrings as the dialog shows the content based on these parameters (passed from first page)
                    td = td || 0;
                    var app = this;
                    var jd = Sitecore.Helpers.url.getQueryParameters(window.location.href)['jd']; 
                    var url = "SecondPage?jd=" + jd
                    if (td != 0)
                        url = url + "&td=" + td;
    
                    app.Frame1.set("sourceUrl", url);
                    app.DialogWindow1.show();
                }
                catch(exception)
                {
                    console.log("Error occured while loading the dialog: " + exception.name + ", " + exception.message + ", " + exception.stack)
                }
            }
    
    

  4. Set the hight and width as 100% (this does not work in Sitecore 8.2) to ensure that frame occupies the whole area of the dialogwindow component

    Frame component properties

  5. Set the Background style to static (to ensure that background is greyed and you cannot do anything until you respond to the dialog window)

    DialogWindow component properties

Hope this helps