Customizing SharePoint 2007 with InfoPath: a pure browser solution

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






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.





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: