Audience
  • Developers
  • Form Designers
Required Knowledge
  • SmartObjects
  • Views
  • Controls
  • Rules and Rule Designer
  • Forms
  • SharePoint

Introduction

The latest How To topics are available in the K2 Five User Guide or the K2 Cloud User Guide’s How to section.

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

Implementation Details

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

  1. For purposes of this article a simple Form was created in K2 smartforms.

    Image
  2. After saving the Form, take note of the Runtime URL used to access the Form:

    Image
  3. The following script will be used to place a shortcut on the SharePoint Page: 

    <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]

    </a>

    For further information on this javascript method refer to:

    http://msdn.microsoft.com/en-us/library/ff410058.aspx

  4. Make sure to replace the placeholders for your specific scenario.

    [URL]

    The URL of the SmartForm noted previously. E.g. http://dlx:81/Runtime/Runtime/Form/Hello+World+Form/

    [Dialog Width]

    Set an appropriate width for the popup in pixels e.g. 640.

    [Dialog Height]

    Set an appropriate height for the popup.

    [Dialog Title]

    The title displayed on the dialog window.

    [Link Display]

    The text displayed to the user for the link.

    In this example the following will be changed:

    [URL]

    http://DLX:81/Runtime/Runtime/Form/Hello+World+Form/

    [Dialog Width]

    640

    [Dialog Height]

    480

    [Dialog Title]

    Hello World Dialog Title!

    [Link Display]

    Hello World Link Display!

     

    <a onclick="javascript:

                 var options = SP.UI.$create_DialogOptions();

                 options.url = &#39; http://DLX:81/Runtime/Runtime/Form/Hello+World+Form/&#39;

                 options.width = 640;

                 options.height = 480;

                 options.title = &#39;Hello World Dialog Title!&#39;;

                 SP.UI.ModalDialog.showModalDialog(options);" href="javascript://">

                                                  Hello World Link Display!

    </a>

  5. Open the SharePoint Page where you would like to add the link. Edit the Page and insert a new Form > HTML Form Web Part as shown below:

    Image
  6. Edit the Web Part:

    Image
  7. On the ribbon, go to the Editing Tools > Form Content Editor > Source Editor menu option.

    Image
  8. In the HTML Source window paste the script previously mentioned. Click Save and then save the Page.

    Image
  9. A new Web Part will now appear on the screen:

    Image
  10. Click on the link and a popup modal dialog will appear:

    Image
  11. Create a new SharePoint Web Part Page or Wiki page within the SharePoint site. We created one under http://portal.denallix.com/SitePages/ClosePopup.aspx
  12. View the Page and edit the Page.
  13. Add a Form > HTML Form Web Part to the Page
  14. Edit the HTML Form Web Part and click on the Source Editor button as discussed previously
  15. Replace the existing source with the following:

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

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

SharePoint 2013 Implementation

To implement the Form as a modal dialog in SharePoint 2013, it is very similar with a slight variation on the javascript:

<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]
</a>