[SP2010] - Open InfoPath 2010 form template in Modal dialog window

When publishing a custom InfoPath 2010 form template (using either the form template or blank form template), it is set to open in the browser by default.

The instructions below will take you through the steps of and opening a custom form template in a modal dialog window using HTML and JavaScript.

Step 1:  Create JavaScript file to open form in Modal dialog

• Using SharePoint Designer 2010, create a new folder in your Style Library called "js"
• Open the js folder and create a new JavaScript file from the Ribbon menu called "OpenModalDialog.js"

• Add the code below to your JS file

 function openMyListDialog()   
 {  
  var options = {  
    url: '/blog/Lists/MyList/item/newifs.aspx',  
    title: "MyList - New Item",  
    dialogReturnValueCallback: function (dialogResult)   
    {  
       SP.UI.ModalDialog.RefreshPage(dialogResult);  
       if(dialogResult==1){     
       }  
    },  
    allowMaximize:false  
  };  
  SP.UI.ModalDialog.showModalDialog(options);  
  HideRibbon();  
 }   
 function HideRibbon()  
 {  
      $('.ms-dlgFrame').load(function () { $('.s4-pr.s4-ribbonrowhidetitle', frames[1].document).hide();});  
 }  

• Replace the url value to point to your InfoPath form
• If you reference a Form Template then the HideRibbon function can be used to hide the ribbon in the Modal Dialog

Step 2: Add hyperlink to open form to page

• Add a content editor web part to your page
• Add the code below to the content editor web part

 <script src="/Style%20Library/js/OpenModalDialog.js" type="text/javascript"></script>  
 <a onclick="javascript:openMyListDialog();return false;" href="#" target="_self">Open My List in Modal Dialog</a>  

The snippet above reference the JavaScript file on your page and also add a hyperlink to the page.  The hyperlink calls the openMyListDialog() function that will open in a modal dialog.

The end result: