Open a SharePoint Modal Dialog from an InfoPath Form: Part 4 of 5 (Vivek Soni)

Article
05/20/2011

We are developing an example application in five steps. We completed the first step in Part 1, the second step in Part 2, and the third step in Part 3. Today we complete step four, “Create a Web Part to Host the Form.”

Here is the roadmap for the entire development process:

Create a Search Application Page. In this step, we design the user interface for the page that the modal dialog displays, and we write code to perform the search.
Add JavaScript for the Modal Dialog. In this step, we create a JavaScript file with code to open the search application page in a popup modal dialog. The function that opens the modal dialog specifies a callback function that returns information about the document that the user has selected to the page that opened the dialog.
Design the InfoPath Form. In this step, we create a form template that includes a Search button, and we write form code that notifies the form's host when a user clicks the button.
Create a Web Part to Host the Form. In this step, we write a custom Web Part that uses an XMLFormView control to host the InfoPath form.
Connect the Components. In this step, we bolt everything together. We write Web Part code that handles the NotifyHost event, code that invokes the modal dialog, and code that uses the dialog result to update the InfoPath form.

Each step is covered in a separate post.

Step 4: Create a Web Part to Host the Form

In the previous step, we created an InfoPath form that notifies its host whenever the Search button is clicked. Now it is time to create the host.

In this step, we create a custom Web Part that includes an XmlFormView control that can be configured to host a browser-enabled InfoPath form. In addition, the Web Part has a text box control for temporary storage of the value that is returned by the modal Search dialog. Because the text box is used only for storage, it is styled in a way that prevents it from rendering on the page. Finally, we want the Web Part to be reusable, so we give it a custom property that accepts the URL to a form template file.

After the Web Part is created, we redeploy the solution and add the Web Part to a page.

To create the custom Web Part

In Visual Studio, open the ModalHost.ApplicationPages solution.
In Solution Explorer, right-click the solution node, point to Add, and then click New Project. Select SharePoint, 2010, and Empty Project. Name the project ModalHost.WebParts. Click OK.

The SharePoint Customization Wizard appears.
Select Deploy as a farm solution, and then click Finish.
In Solution Explorer, right-click the node for the ModalHost.WebParts project. Point to Add and then click New Item. Select SharePoint, 2010, and Web Part. Name the Web Part InfoPathFormHost. Click OK.
In the ModalHost.WebParts project, add a reference to Microsoft.Office.InfoPath.Server.dll by browsing to the folder :\Program Files\Microsoft Office Servers\14.0\Bin.

If Visual Studio displays a warning message, click Yes to continue adding the reference to the project.

At the top of InfoPathFormHost.css, add the following using statements:

 using Microsoft.Office.InfoPath.Server.Controls;
using System.Text;

The InfoPathFormHost class contains an empty CreateChildControls method. Delete this method. Then paste the following code in the body of the InfoPathFormHost class:

 // XmlFormView control object to render the browser-enabled InfoPath form.
private XmlFormView xmlFormView = null;// Field to hold the return value from the modal dialog.
private TextBox hiddenText = null;
private string receivedValue = null;// Property to store the InfoPath XSN url.
[WebBrowsable(true)]
[WebDisplayName("Form XSN URL")]
[Description("Relative URL of the InfoPath XSN file.")]
[Category("Configurations")]
[Personalizable(PersonalizationScope.Shared)]
public string FormXSNURL { get; set; }
protected override void CreateChildControls()
{
    try
    {
        base.CreateChildControls();
        // Instantiate the XMlFormView object.
        this.xmlFormView = new XmlFormView();
        // Set the editing status to init on initial load.
        this.xmlFormView.EditingStatus = XmlFormView.EditingState.Init;
        // Add to the web part controls collection.
        this.Controls.Add(this.xmlFormView);

        this.hiddenText = new TextBox();
        // Hide the text box.
        this.hiddenText.Style.Add("display", "none");
        this.hiddenText.Style.Add("visibility", "hidden");
        // Assign a dummy class to the control so it can be found through jQuery functions.
        this.hiddenText.CssClass = "webparthiddenfield";
        // Add to the web part controls collection.
        this.Controls.Add(this.hiddenText);
    }
    catch
    {
        throw;
    }
}

This code declares the FormXSNURL property and makes it available through the Web Part’s tool pane so that the user can set it with the URL of the published InfoPath form’s XSN file.

The code also initializes an XMLFormView control and a text box control, and adds them to the controls collection. The text box is explicitly marked as hidden on the page. It will later be used to store the value returned by the modal dialog.

Just below the CreateChildControls() method, add the following code:

 protected override void OnPreRender(EventArgs e)
{
    try
    {
        // Check if the user has set the FormXSNURL property with InfoPath XSN location.
        if (!string.IsNullOrEmpty(this.FormXSNURL))
        {
            // Configure the XmlFormView control to host the form.
            this.xmlFormView.XsnLocation = this.FormXSNURL;
            // Set the editing status to ensure the control displays the form.
            this.xmlFormView.EditingStatus = XmlFormView.EditingState.Editing;
        }
    }
    catch
    {
        throw;
    }
}

This code overrides the OnPreRender() event handler in order to configure the XmlFormView control to host the InfoPath form that the Web Part's FormXSNURL property points to, and to set the control’s EditingStatus property to Editing. Doing so enables the XMLFormView control to access the InfoPath form's underlying XML data source.

In Solution Explorer, right-click the node for the ModalHost.WebParts project. Then click Deploy.
Navigate to the Web Part page that you created while testing the modal dialog.
Edit the page. Remove the previously added Content Editor Web Part.
Add the InfoPathFormHost Web Part. (Look for it under the Custom category in the ribbon.)
On the InfoPathFormHost Web Part menu, click Edit Web Part to open the tool pane.
Locate the Configurations category at the bottom of the tool pane, and set Form XSN URL to point to the location where you published the InfoPath form. (You saved the URL in a text file.)
Click OK in the tool pane to close it.
Click Stop Editing button on the ribbon to see the InfoPath form in the browser.

Next Steps

At this point we have successfully created a browser-enabled InfoPath form, a Web Part to host the form, a search application page to find a document, and a modal dialog to display the search page. The only task left is to bolt everything together. We do that in the next post, Part 5.

Open a SharePoint Modal Dialog from an InfoPath Form: Part 4 of 5 (Vivek Soni)

Step 4: Create a Web Part to Host the Form

To create the custom Web Part

Next Steps

Additional resources