InfoPath


Standard, out-of-the-box SharePoint sites are fine for document management on a corporate intranet and if you want a heavily branded public facing internet site, you can re-work the SharePoint look and feel from the ground up. But what about those needs that fall in between these two poles? A nicely re-worked, corporate site for the Xmas party, for example? A standard SharePoint site just doesn’t make the grade in terms of design, but then again the budget for designing such a site cannot really exceed the drinks budget for the event. So what can be done with minimal expense in terms of SharePoint customization?

 

Well InfoPath is a pretty powerful tool in these sorts of circumstances. The problem with InfoPath on SharePoint 2007, is that users frequently like the functionalities they are offered but not the constraints. Perhaps the most important of these, is that it is very tricky to get an InfoPath browser-enabled form to open in an integrated way within a customized SharePoint site. Let me explain. When you create a standard list in SharePoint, the newform.aspx and editform.aspx pages integrate into the standard SharePoint page layout.

 

 

However, with InfoPath, you get the standard Forms server layout page, with menus top and bottom:

 

 

And you lose the context of the site and its navigation.

 

Removing the menus is a simple step. Just disable them in the Form Options menu of InfoPath when publishing to SharePoint.

You still have no site context however and now you cannot even save the form and its data. Once you have removed the default menu items, you will have to configure a Submit button in the InfoPath form itself.

 

More importantly however, we need to find a way to encrust the InfoPath browser-enabled form into our SharePoint site. To do this you need to use an XML web part that in essence opens the InfoPath form in an Iframe in a standard web part page. You can download the XML web part here. Just configure it with the necessary details to open the InfoPath form you require. In your site navigation, you will need to call this page to fill out a new form.

 

The next challenge comes when submitting the form. Everything works, the data is submitted correctly to the form library and if you have chosen to promote columns, then information is correctly displayed in SharePoint. However, is you have use a standard source reference in your URL to go back to the home page of the site (or any other location), you will find that because the form was opened in an Iframe, your site is now displayed within the Iframe. Not great!

 

We need a means to break out of the frame and to do this you will need to use a simple redirect page which uses JavaScript to escape from the Iframe. Put the following JavaScript in the head section of the page:

 

<SCRIPT language=”JavaScript”>

<!–

top.location=”http://www.yourcompany.com/sites/yoursite/&#8221;;

//–>

</SCRIPT>

 

Put the location of the page you want to return to instead of the URL above and call this page in the source section of the URL within the XML web part.

 

Now we are getting somewhere. This is fine for opening a new form, embedded in a web part page in a SharePoint site, but what about editing an already existing xml file in a SharePoint form library? Here unfortunately, you cannot use the XML web part, because the path to the file needs to be dynamic not fixed. The only solution I have found, is to open the InfoPath form in a new window as a pop-up. In order to do this from a SharePoint view, those of you who have grappled with target=”_blank” in SharePoint views will know that this is a bit of a pain. Here you will need Christophe’s (from PathtoSharePoint) bit of JavaScript code in a Content Editor Web Part, hidden below your view. You can then use calculated fields to control what pops-up and where. (How you reference the XML file will depend on your application: I created a hidden field which picked up the user ID of the person who created the file, named the xml with this reference and then created a view in SharePoint, filtered on [Me] so users would only see their own file and thus be able to click the link to edit it).

 

You can download the code for opening links via calculated fields here.

 

So far, so good. Now however, as we are not using an Iframe but a new window to edit the xml via an InfoPath form, after submit, the new window stays open, so we again need a simple redirect page, reference in the source part of the URL which opens the pop-up. This redirect just closes the pop-up window, taking the focus back to our original SharePoint site. Again the code is a very simple bit of JavaScript, this time in the body tag of the page as follows:

 

<body onload=”javascript:window.close();”>

 

Great! So we have a functioning InfoPath form which is fully embedded in SharePoint site and uses only browser-based functionalities.

 

 

 

Advertisement

In the previous blog post, a technique was described for embedding a browser-enabled InfoPath form in a SharePoint web part page. This was done using a standard XML Form View web part and allows the navigation context of the page to be retained. The only disadvantage of using this technique is that it is not possible to close the InfoPath form and return to the original Document Library, as would be the case with a normal document library or SharePoint list.

The InfoPath forms server displays a simple message that the form has been closed, as follows:

If this behavior poses a problem to users, then an alternative XML web part is available, which allows for additional URL strings to be passed containing the address of the page which should be returned to after the InfoPath form has been saved.

Ensure that the InfoPathFormViewer web part is available in the Site Collection Web Part Gallery and insert into a basic web part page.

 

 

Set the parameters under the Miscellaneous section as follows:

 

HTML Code

 

<div class=”EForms”> <div class=”EForms2″> <div class=”EForms3″> <div style =”text-align:center;margin-top:10px;”> <iframe src=”%formurl%” width=99% scrolling=no frameborder=0 marginwidth=0 marginheight=0 height=600 >info path here</iframe> </div> </div> </div> </div>


 

 

Form URL

 

Note that to return to a specific page, it is necessary to add a Source URL parameter, alongside the Xsn and Save Locations.

This will allow the InfoPath form to close and for the default AllItems view to be loaded. However, as the form is in an IFrame, the page will load into the frame unless some JavaScript is used to escape from the frame.

This code should be entered in a Content Editor web part positioned in the All Items view page before any other web parts.

 

 

<SCRIPT TYPE=”text/javascript”>

 

<!–

if (top.frames.length!=0)

 

top.location=self.document.location;

 

// –>

 

</SCRIPT>