SharePoint model dialogues with Call back values using Application Page

Hello All,

Here is the simple steps to overcome post back issues with popups in SharePoint. In this post i will be describing the model dialogue with call back values. These values help to update few controls in parent page.
  • Download below JS files and to your visual web part
  • http://../../../../_layouts/15/js/jqueryCustom-1.7.1.min.js
    http://../../../../_layouts/15/js/jqueryCustom-ui-1.18.min.js
  • Create an Application page for popup and name it as for your requirement(ABC). This will be added under layouts folder of your solution.
  • Parent Page Steps to do:
  • Now add an anchor tag in parent page as shown below or you can add any control to call popup. onclick method should have path to your application page as described below.
  • <a href=”#” onclick=”openBasicDialog(‘/_layouts/your solution name here/Application Page Name.aspx’,’Tilte for PopUP‘);”>Click Here</a>
  • Now place below script tag in your header section of parent page. OpenBasicDialog function launches the popup window , onPopUpCloseCallBack function holds values from popup and writes back to specific controls in parent page. As shown below i am writing value into asp:TextBox1 control. Make sure this control has ClientIDMode=static like shown below of script tag.
  • //******** Basic Dialog Starts Here ***********/
    function openBasicDialog(tUrl, tTitle) {
    var options = {
    url: tUrl,
    title: tTitle,
    dialogReturnValueCallback: onPopUpCloseCallBackPC
    };
    SP.SOD.execute(‘sp.ui.dialog.js’, ‘SP.UI.ModalDialog.showModalDialog’, options);
    }
    function onPopUpCloseCallBack(result, returnValue) {
    if (result == SP.UI.DialogResult.OK) {document.getElementById(‘TextBox1’).value = returnValue[0];
    } else if (result == SP.UI.DialogResult.cancel) {
    }
    }

    //******** Basic Dialog Ends Here ***********/

  • <asp:TextBox ID=”TextBox1″ ClientIDMode=”Static” runat=”server”> </asp:TextBox>
  • Now we are done with parent page activities now lets do for Application page.
  • Application Page Steps to do:
  • Download and add the below JS reference in header section. http://../SP.UI.Dialog.js
  • Here is the script to pass the data to Parent page, Here i am sending one of the application page textbox value to parent.
  • function closePopupAndPassData() {
    var popData = [];popData[0] = document.getElementById(‘txtApplicationPage’).value;
    SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, popData);
    }
  • <asp:TextBox ID=”txtApplicationPage” ClientIDMode=”Static” runat=”server”> </asp:TextBox>
  • Now we need to add two buttons for success back and to cancel the popup. Here are the controls for the same.
  • <input id=”btnClientOk” type=”button” value=”Submit” onclick=”closePopupAndPassData()” />
    <input id=”btnCancel” type=”button” value=”Close” onclick=”SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel)” />
  • The popup will look like this popup

 

Happy Coding !!!

Advertisements

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