Using the Dialog framework in SharePoint 2010 – Part 2

If you have not gone through Part-1 of this series, I would recommend you reading part-1 and then continue reading from here on.

In this post, we are going to see how to open built in SharePoint list page and react to Ok or Cancel button clicked on a page.

Let us enhance the example that we saw in previous post. We will add some more lines to code and this time we will bind a function that will execute after we close the window from clicking ok or cancel button.

So let’s modify the code.

<script  type="text/javascript">

    function OpenModalBing()

    {

        var options = {

            url: '/{your site}/_layouts/Upload.aspx?List={1F68B750-98D7-4523-8C3C-F662E1E2386F}&RootFolder=',

            tite: 'Add new document',

            allowMaximize: false,

            showClose: true,

            width: 750,

            height: 550,

            dialogReturnValueCallback: FunctionToCall 

           

        };

        SP.UI.ModalDialog.showModalDialog(options);

    }  

    function FunctionToCall(dialogResult, returnValue) 

{ 

        

if(dialogResult == SP.UI.DialogResult.OK)

{ 

        SP.UI.Notify.addNotification('OK was clicked'); 

        

}

if(dialogResult == SP.UI.DialogResult.cancel) 

        SP.UI.Notify.addNotification('Cancel was clicked!'); 

}

   

</script>

What we are doing here is we are opening a upload window page in model dialog and then based on a user action we display a message. If user uploads a document and click on Save or ok then dialog returns the OK status and if user clicks on cancel then it returns the cancel status that we check in the JavaScript function.

dialogReturnValueCallback is the function that executes after the model dialog closes. When declaring that function we need to define two parameters. One is the result and the other is return value.

Here in this example, we are not using the return value but checking the default button clicks.

Here is what you can see in action. When cancel clicked and when OK clicked.

In next post, we will create our own page, will deploy the page and then opens that page via dialog framework and handle Ok and Cancel button click event on our own. 


Read Part-3 of this series to explore more.