Modal Dialog Box

In the DVWPs we just created, notice that when you click to display or edit any item, the forms do not pop up in a modal dialog box. In SharePoint 2010 XSLT List View web parts, by default all list items pop up in a dialog box without navigating the user to a different web page. To mimic this functionality in a DVWP, we need to use some JavaScript code.

Note

There is a feature in the list and library advanced settings, called Launch forms in a dialog. This setting is set to Yes by default, but you can change it to No to turn off the modal dialog box.

Since our “test” version of the DVWP is still on each temporary web part page, we can still make changes there.

1. In SharePoint Designer, open the TestListDVWP.aspx file and click Edit File.

2. Instead of the full name field opening the dispform.aspx page, it is going to be changed to open the display form in a modal (pop-up) window. Click the Split button at the bottom of the screen.

3. Select the Full Name field. On the Insert tab, click the Hyperlink button.

4. Click the Remove Link button.

5. Click to select the Edit icon in the far left column. Click the Hyperlink button again and click the Remove Hyperlink button, shown in Figure 5-39.

   

   Figure 5-39. Remove the hyperlink

6. Click to select the Edit icon again. In the Code view, put the cursor to the left of <imgtag and add a couple of empty lines using the Enter key.

7. Enter the following code:

   <script type="text/javascript">
   function ModalPopup(url, title)
   {
       var options = SP.UI.$create_DialogOptions();
       options.url = url;
       options.title = title;
       options.dialogReturnValueCallback = function() {
       SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); };
       SP.UI.ModalDialog.showModalDialog(options);
   }
   </script>

8. Now that you have inserted the JavaScript, you can create the display form and edit form hyperlinks again. Put the cursor in front of <img alt="Edit Item". Use the Enter key to add a blank line.

9. Enter the following code in the new blank line and type </a> after the image.

   <a href="javascript:ModalPopup('/Lists/Contacts/EditForm.aspx?ID={@ID}', 
    'Edit {@FullName}');">

10. Put the cursor in front of <xsl:value-of select="@FullName" /> and insert another blank line.

11. Enter the following code in the new blank line and type </a> after the full name field:

    <a href="javascript:ModalPopup('/Lists/Contacts/DispForm.aspx?ID={@ID}', 
     'Display {@FullName}');">

The code is now complete. The following snippet shows the JavaScript and the first two columns of the table:

<td class="ms-vb">
<script type="text/javascript">
function ModalPopup(url, title)
{
    var options = SP.UI.$create_DialogOptions();
    options.url = url;
    options.title = title;
    options.dialogReturnValueCallback = function() {
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK); };
    SP.UI.ModalDialog.showModalDialog(options);
}
</script>
<a href="javascript:ModalPopup('/Lists/Contacts/EditForm.aspx?ID={@ID}',
'Edit {@FullName}');">
<img alt="Edit Item" src="/_layouts/images/edititem.gif" style="border-width: 0px" />
</a></td>
<td class="ms-vb">
<a href="javascript:ModalPopup('/Lists/Contacts/DispForm.aspx?ID={@ID}',
'Display {@FullName}');">
<xsl:value-of select="@FullName" />
</a></td>

If your links do not work, try using absolute URLs instead of relative ones in the hyperlink code.