Modal Dialog – part 1

…this post was published on 2012 February 16.

First step was to create a new example list, a custom list, which I named (what a nice name 🙂  – xxx_L_custom2). To make things easiest possible, i have hidded the “Title” column, and I added only 3 columns: Continent, Country, and Capital. (to make more easy to understand starting from post: let’s suppose: ColumnName_1, ColumnName_2 and ColumnName_3).

Next step was to populate the list, and here was a big challenge to remember these countries….:)

 Let’s go to work. I created a new page, which can be reacheable here. You can see already a hyperlink added to “continent’ column. For this I changed the code from:

     <xsl:value-of select=”@Continent”/>

to become:

     <a href=”#” onclick=”open_modaldialog(‘{@Continent}’,'{@Country}’,'{@Capital}’)”><xsl:value-of select=”@Continent”/></a>

  You can see that i called onclick() event, and in that event i called a javascript function, named open_modaldialog, but also i passed 3 params to that function –  the values for continent/country/capital.

How this function looks like? Here it is:

function open_modaldialog(continent,country,capital)
  var passed_value=continent+’^’+country+’^’+capital;
    var options = SP.UI.$create_DialogOptions();
     options.width = 500;
     options.height = 450;
     options.url =“;
   options.args = passed_value;
     options.dialogReturnValueCallback = Function.createDelegate(null, portal_modalDialogClosedCallback);

 Let me explain few things:

  First I created a var, named passed_value, containing concatenated values. This variable, will be passed to modaldialog, and there will be splitted to populate fields. Next i defined var options, which will be used on calling modaldialog proecdure.Last line, we open the modaldialog, using options already defined.

  Additional, you should have there a closing procedure for your modal dialog window, the function called is portal_modalDialogClosedCallback. Because, for the mommen ( i will come back with a new post ) we don’t need to use some values from modaldialog, this function is empty:

     function portal_modalDialogClosedCallback(result)

 In this momment we have the parent page, we called the modaldialog. Let’s say some words about thismodaldialog. It contain 3 textbox fields, and 2 buttons ( 1 was ok, but, for next examples, i will ned Ok and Cancel also ). The code for these elements is:

     <div>You selected continent<div id=”xxx” > <br />
     <input id=”continent” name=”Text1″ type=”text” />  <br /> <br />
    There, exist <br />
     <input id=”country” name=”Text1″ type=”text” /> <br /> <br />
    with capital<br />  <br />
     <input id=”capital” name=”Text1″ type=”text” /> <br />  <br />  <br />
     <input type=”button” value=”OK” onclick=”;SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK,’ppp’); return false;”  target=”_self”   />
    <input type=”button” value=”Cancel” onclick=”SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, ‘Cancel clicked’); return false;”   target=”_self” class=”ms-cui-ct-last” />
      </div>  </div>

 Each text element with his ID, which will be used to set initial values. For the buttons, came action, only result will be different, but not important in our discussion

 Now is the momment to populate the form , onload with value from variable passed_value.  The code is inserted just after

<asp:Content ContentPlaceHolderId=”PlaceHolderMain” runat=”server”>

 in the <script> code

   <script type=”text/javascript” >
     function fill_the_fields(){
      var passed_value=window.frameElement.dialogArgs.split(‘^’);

_spBodyOnLoadFunctionNames.push(“xxxx”) will load a function, in my case named fill_the_fields, just when onload page is done, and which, first -will split the passed_value from parent form in an array – in my case, same name and which values will be used to set initial values for the 3 fields.

This entry was posted in Coding, Sharepoint. Bookmark the permalink.