Designing InfoPath 2007 Forms for Mobile Web Browsers

  • Article

This content is outdated and is no longer being maintained. It is provided as a courtesy for individuals who are still using these technologies. This page may contain URLs that were valid when originally published, but now link to sites or pages that no longer exist.

Summary: Learn how to create a mobile-friendly view of a Microsoft Office InfoPath 2007 form template, add managed code to detect the user's environment and switch views accordingly, and then publish the form template to InfoPath Forms Services.

Office Visual How To

Applies to: 2007 Microsoft Office System, Microsoft Office InfoPath 2007

David Gerhardt, 3Sharp

August 2007

Overview

The 2007 Microsoft Office system provides support for running Microsoft Office InfoPath 2007 forms in a mobile Web browser. This addition to the Office InfoPath 2007 feature set opens up a broad range of user scenarios.

Code It

There are limitations to the behavior of mobile Web browser forms. For example, formatting and layout in views are ignored, the date picker is rendered as a text box, and controls such as the rich text box, option button, section, and repeating table are not supported. Still, the effort required to render existing form templates on a mobile device is minimal.

For this scenario, you use the status report sample that is included with InfoPath 2007, create a mobile-friendly view, add a few lines of managed code to detect the current user's environment and switch views accordingly, and then publish the form template to InfoPath Forms Services.

Enabling Rendering on a Mobile Device

Start the status report sample template in the InfoPath designer, and enable mobile Web browser support.

To enable rendering on a mobile device

  1. On the Tools menu, click Form Options.

  2. In the Form Options dialog box, in the Browser category, select the Enable rendering on a mobile device check box.

  3. To prevent the Views toolbar option from appearing for browser forms, clear the Views check box, and then click OK.

Creating a Mobile-Friendly View

The default form view for the status report template contains some controls that are not supported in mobile Web browsers. As a result, you will create a mobile-friendly view.

To create a mobile-friendly view

  1. In the Design Tasks task pane, click Views.

  2. In the Views task pane, click Add a New View.

  3. In the Add View dialog box, in the New view name box, type Mobile Web, and then click OK.

  4. On the View menu, click Data Source.

  5. Individually drag the reportDate, projectName, preparedBy, emailAddress, managerName, and departmentName nodes into the form view.

  6. Expand the workItems node, drag the workItem repeating node into the form view, and then click Repeating Section with Controls.

Figure 1. Creating the mobile Web view

Creating the mobile Web view

By default, view names appear on the InfoPath View menu and as list options in a mobile Web browser. Follow these steps to remove the view options from these lists.

To remove view options

  1. In the Data Source task pane, click Design Tasks.

  2. In the Design Tasks task pane, click Views.

  3. In the Views task pane, with Mobile Web selected, click View Properties.

  4. In the View Properties dialog box, clear the Show on the View menu when filling out the form check box, and then click OK.

  5. In the Views task pane, click View 1 (default), and then click View Properties.

  6. In the View Properties dialog box, clear the Show on the View menu when filling out the form check box, and then click OK.

NoteNote
If you have not already done so, save the form template locally before you add any code.

Adding a Loading Event

To add managed code to your form solutions, you can use Visual Studio 2005 Tools for the 2007 Microsoft Office System (VSTO 2005 SE) or Visual Studio 2005 Tools for Applications (VSTA). Office InfoPath 2007 includes VSTA, which you use in this scenario to add a Loading event that switches to the Mobile Web view if the current user starts the form in a mobile environment.

NoteNote
You can set the programming language to Visual Basic or C# before you add managed code to your form template. To make this change, on the Tools menu, click Form Options, click the Programming category, and set the Form template code language list value accordingly.

To add a Loading event

  1. On the Tools menu, click Programming, and then click Loading Event.

  2. Within the FormEvents_Loading procedure, add the following code.

  3. Close VSTA, and press CTRL+S to save the form template.

Deploying the Form Template

Because the form template is enabled for mobile Web browsers, it must be admin-deployed, with or without managed code. In other words, you must first publish the form template to a network share.

To publish the form template

  1. On the File menu, click Publish.

  2. In the first page of the Publishing Wizard, click To a SharePoint server with or without InfoPath Forms Services, and then click Next.

  3. On the next page of the Publishing Wizard, in the Enter the location of your SharePoint or InfoPath Forms Services site box, type the URL for the SharePoint site, and then click Next.

  4. On the next page, note that the Administrator-approved form template option is selected, and then click Next.

  5. On the next page, click Browse, and navigate to a network share location.

  6. In the File name box, type StatusReport, click Save, and then click Next.

  7. On the next page, note the promoted columns, and click Next.

  8. On the next page, click Publish.

  9. On the last page of the Publishing Wizard, click Close.

After the form template is published to a network share, a server administrator can upload that form template to InfoPath Forms Services and activate it to a specific Windows SharePoint Services 3.0 site collection.

To upload the form template to InfoPath Forms Services

  1. Click Start, click All Programs, click Microsoft Office Server, and then click SharePoint 3.0 Central Administration.

  2. On the Central Administration Web page, click Application Management.

  3. In the InfoPath Forms Services section, click Manage form templates.

  4. On the Manage Form Templates page, click Upload form template.

  5. Click Browse, locate StatusReport.xsn, and double-click it.

  6. Click Upload, and then click OK.

    NoteNote
    Wait until the Status value for StatusReport.xsn changes from Installing to Ready.

  7. On the StatusReport.xsn menu, click Activate to a Site Collection.

  8. Update the Site Collection list value accordingly, and then click OK.

Starting the Status Report Form in a Mobile Device

To test your changes, you will need to start a browser session either on a mobile device or an emulator, such as Microsoft DeviceEmulator 2.0.

In Internet Explorer, navigate to the browser location of your form template, which will be the following:

http://[*** YOUR WEB APPLICATION URL HERE ***]/_layouts/mobile/mobileformserver.aspx?xsnlocation=/formservertemplates/statusreport.xsn

Figure 2. Viewing the form on a mobile device

Viewing the form on a mobile device

Note how the Mobile Web view is displayed in the browser, as shown in Figure 2.

Read It

There is support for rendering Office InfoPath 2007 forms in mobile Web browsers, but there are limitations to the form behavior. Fortunately, you can easily work around those limitations when you are developing a mobile form solution:

  • Use the Form Options dialog box to enable rendering on a mobile device.

  • Create a mobile-friendly form view that does not contain elaborate formatting or unsupported controls.

  • Add a Loading event that detects whether the current user is in a mobile environment, and then switch views accordingly.

 See It Designing InfoPath Forms for Mobile Web Browsers

Watch the Video

Video Length: 00:09:41

File Size: 7.44 MB WMV

Explore It