<{{Subtitle_Weight}} class="prominent-subhead {{Show_Subtitle}}"> {{Header_Subtitle}}

How to open a Form as a modal dialog in SharePoint 2010

~~repeating-content.html~~
LEGACY/ARCHIVED CONTENT
This article has been archived, and/or refers to legacy products, components or features. The content in this article is offered "as is" and will no longer be updated. Archived content is provided for reference purposes only. This content does not infer that the product, component or feature is supported, or that the product, component or feature will continue to function as described herein.

This Knowledge Base article describes how to configure a SharePoint Page to open a Form as a modal dialog in SharePoint 2010/2013 and then close the modal dialog using another SharePoint Page and Rule created on the SmartForm.

Follow the steps below to implement the Form as a modal dialog in SharePoint

  1. Create the form you want to display in SmartForms (a basic sample form shown below)
    Image
  2. After saving the Form, note the Runtime URL used to access the Form:
    Image
  3. Prepare the script that you will add to SharePoint. Use a text editor tool and copy the sample code below, and replace the values in square brackets with appropriate values for your requirement and environment. For further information on this javascript method refer to http://msdn.microsoft.com/en-us/library/ff410058.aspx
    //SharePoint 2010

    <a onclick="javascript:
                 var options = SP.UI.$create_DialogOptions();
                 options.url = &#39;[URL]&#39;
                 options.width = [Dialog Width];
                 options.height = [Dialog Height];
                 options.title = &#39;[Dialog Title]&#39;;
                 SP.UI.ModalDialog.showModalDialog(options);" href="javascript://">
                [Link Display Value]
    </a>

    //SharePoint 2013
    <a onclick="javascript:
                 var options = {
                 url: '[URL]',
                 width: '[Dialog Width]',
                 height: '[Dialog Height]',
                 title: '[Dialog Title]'};
                 SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);" href="javascript://">
        [Link Display Value]
    </a>

    Value Description Example
    [URL] The URL of the SmartForm noted previously. http://DLX:81/Runtime/Runtime/Form/Hello+World+Form/
    [Dialog Width] Set an appropriate width for the popup in pixels 640
    [Dialog Height] Set an appropriate height for the popup. 480
    [Dialog Title] The title displayed on the dialog window. Hello World Dialog Title!
    [Link Display] The text displayed to the user for the link.

    Hello World Link Display!

  4. On the SharePoint page where you want to load the SmartForm as a modal dialog. Edit the Page and insert a new Form > HTML Form Web Part as shown below:
    Image
  5. Edit the Web Part:
    Image
  6. On the ribbon, go to the Editing Tools > Form Content Editor > Source Editor menu option.
    Image
  7. In the HTML Source window paste the script previously mentioned. Click Save and then save the Page.
  8. A new Web Part will now appear on the screen:
    Image
  9. Click on the link and a popup modal dialog will appear:
    Image
  10. Create a new SharePoint Web Part Page or Wiki page within the SharePoint site. In this example, we created one under http://portal.denallix.com/SitePages/ClosePopup.aspx
  11. View the Page and edit the Page.
  12. Add a Form > HTML Form Web Part to the Page
  13. Edit the HTML Form Web Part and click on the Source Editor button
  14. Replace the existing source with the following code:

    <script>window.frameElement.commonModalDialogClose(1, 'Close');</script>

  15. Click Save.
  16. Edit the SmartForm that is loaded in the popup in the K2 Designer.
  17. Add a Button control to the Form and rename the control to Submit.
  18. Go to the Rules and add the following Rule:
    Image
  19. Click configure to set up the rule action and specify the ClosePopUp.aspx page URL that you created above
    Image
  20. Click OK.
  21. Finish the Rule and the Form.
  22. Go to the SharePoint Page where the Hello World dialog link resides. Click on the link.
  23. The popup dialog opens as before.
  24. Now click on the Submit button and you should see that the dialog box closed.