Working with SharePoint Dialog Box various operations sample code

InfoPath alternatives for form designing SharePoint

In this article we will discuss about how to work with dialog box in SharePoint. We will discuss about the below point:

1. Open SharePoint dialog
2. Close SharePoint dialog from server side button click(button in the dialog)
3. Close SharePoint dialog from client side click event
4. Pass value from SharePoint dialog to parent page
5. Refresh the parent page after closing the dialog
6. Don’t refresh the page after closing the dialog

Open SharePoint Dialog and pass value from SharePoint dialog to parent page:

The below code is to be placed on the page on which you are going to open the SharePoint dialog. It means the parent page is going to contain the below code.



//The below function will open the SharePoint Dialog for you

//Call the function on the button click or any other event you want with teh required parameters

//pageUrl : The page url that you going to show in the dialog

//popupTitle : Title of the dialog

//width : width of the popup(an integer value)

//height : height of the popup(an integer value)

function OpenStartDateDialog(pageUrl, popupTitle, width, height) {

var options = {

title: popupTitle,

url: pageUrl,

width: width,

height: height,

dialogReturnValueCallback: DialogClosedWithData

};

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);

}

//Below function gets called when the SharePoint dialog box is closed, as we have mentioned it in the previous function

//buttonValue – This parameter contains the value to identify whether OK/Cancel button clicked(can be 1 for OK and 0 for Cancel)

//passedValues – The values passed from the parent function, here I have passed in an array

function DialogClosedWithData(buttonValue, passedValues) {

if (buttonValue == SP.UI.DialogResult.OK) {//If OK button is clicked

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.Status.removeAllStatus’, true);

var value1 = passedValues[0];

var value2 = passedValues[1];

var value3 = passedValues[2];

}

else if (result == SP.UI.DialogResult.cancel) {//If cancel button is clicked

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.Status.removeAllStatus’, true);

}

}

Close SharePoint dialog from server side button click (button in the dialog):




1. Keep the below code in the page, which you are going to show in the SharePoint dialog box

//The below function closes the dialog and passes the values to the parent page

//value1,value2,value3 – Values that I want to pass from the dialog to the parent page

function CloseDialogWithDataPassed(value1, value2, value3) {

var values = [];

values[0] = value1;

values[1] = value2;

values[2] = value3;

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.commonModalDialogClose’, 1, values);//1 for ok button click

}

//Below function closes the dialog without any data passed to parent page

function CloseDialogWithoutData() {

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.commonModalDialogClose’, 0, ”);//0 for cancel button click

}

In the above code block, we have 2 functions the first function closes the dialog with data passed to parent page, however the second function simply closes the dialog, without passing any parameter.

2. Now the above function can be called from an ASP.NET button click event like below:

protected void btnClose_OnClick(object sender, EventArgs e)

{

try

{

string name = txtName.Text;

string age = ddlAge.SelectedItem.text;

string dob = dtDob.SelectedDate.ToString();

this.Page.ClientScript.RegisterStartupScript(this.GetType(), string.Empty,

“CloseDialogWithDataPassed(‘” + name + “‘,'” + age + “‘,'” + dob + “‘);”, true);

}

catch(Exception)

{

throw;

}

}

Close SharePoint dialog from client side click event:

The HTML is below which to be placed in the Dialog page:

<p id=”closeDialog”>Close the dialog</p>

The Script is below which to be placed in the Dialog page

$(function () {

$(“#closeDialog”).click(function () {

CloseDialogWithoutData();

});

});

Refresh parent page after closing SharePoint dialog:

1. Below script is to place in parent page

//The below function will open the SharePoint Dialog for you

//Call the function on the button click or any other event you want with teh required parameters

//pageUrl : The page url that you going to show in the dialog

//popupTitle : Title of the dialog

//width : width of the popup(an integer value)

//height : height of the popup(an integer value)

function OpenStartDateDialog(pageUrl, popupTitle, width, height) {

var options = {

title: popupTitle,

url: pageUrl,

width: width,

height: height,

dialogReturnValueCallback: DialogClosedWithData

};

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);

}

//Below function gets called when the SharePoint dialog box is closed, as we have mentioned it in the previous function

//buttonValue – This parameter contains the value to identify whether OK/Cancel button clicked(can be 1 for OK and 0 for Cancel)

function DialogClosedWithData(buttonValue, passedValues) {

if (buttonValue == SP.UI.DialogResult.OK) {//If OK button is clicked

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.Status.removeAllStatus’, true);

location.href = location.href;

}

}

2. Below script for the page , which we are showing in the dialog

//The below function closes the dialog and passes the values to the parent page

//value1,value2,value3 – Values that I want to pass from the dialog to the parent page

function CloseDialog() {

SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.commonModalDialogClose’, 1, values);//1 for ok button click

}

3. Below button click is for the button present in the page, which we are showing in the dialog
protected void btnClose_OnClick(object sender, EventArgs e)

{

try

{

this.Page.ClientScript.RegisterStartupScript(this.GetType(), string.Empty,

“CloseDialog();”, true);

}

catch(Exception)

{

throw;

}

}


Read SharePoint 2013 tutorials:

Hope this will be helpful.


You May Also like the Following SharePoint Online Tutorials:

Leave a Reply