Lab 9: Designing InfoPath 2007 Form...

Community Content

In this section

Statistics Annotations (0)

Lab 9: Designing InfoPath 2007 Forms for Mobile Web Browsers

Learn how you can create an InfoPath 2007 form template that can be filled out by using a Web browser on a mobile device and then submitted to an Office SharePoint Server library. (7 printed pages)

February 2007

Applies to: Microsoft Office InfoPath 2007

Contents

Lab Objectives
Lab Setup and Requirements
Scenario
Exercises
Conclusion
Additional Resources

Lab Objectives

After completing this lab, you will be able to do the following:

Create a Microsoft Office InfoPath 2007 form template that can be filled out by using a browser on a mobile device.
Enable the form template to be submitted to a Microsoft Office SharePoint Server library.
Publish a form template to a server running InfoPath Forms Services.
Test and debug a mobile form template by using a device emulator.

Lab Setup and Requirements

To complete this lab, you will need the following:

Office InfoPath 2007
Microsoft Visual Studio 2005
Active Sync 4.2
A server running InfoPath Forms Services, either as part of Microsoft Office Forms Server 2007 or Microsoft Office SharePoint Server 2007
Administrator privileges on the server running InfoPath Forms Services

Scenario

Contoso Corporation maintains a warehouse in which it periodically inventories its stock (SKUs) for spoilage. Employees initially input all SKU parameters by using InfoPath, storing the data in Office SharePoint Server 2007. Contoso deploys a wireless fidelity (Wi-Fi) network in its warehouse to ensure mobile connectivity, and provides its employees with personal digital assistants (PDAs). Once a week, the employees take inventory, manually entering each item’s SKU and current count into a mobile Web-based InfoPath form that Contoso designed to be compatible with InfoPath and InfoPath Forms Services. This form updates the existing SharePoint Server data with the most recent count for each SKU.

Exercises

Creating the Form Template

First, you will design the InfoPath form template, edit the form’s business logic and data validation, and then enable the form template to work in a mobile Web browser.

To design the InfoPath form template

Start Office InfoPath 2007.
In the Getting Started dialog box, click Design a Form Template.
In the Based on section, click Blank, ensure that Enable browser-compatible features only is selected, and then click OK.
In the blank form, type Today’s date:.
In the Design Tasks task pane, click Controls.
Drag a Date Picker control from the Controls task pane onto your form next to Today's date:, and then press ENTER.
Type SKU data:, and then press ENTER.
Drag a Repeating Section onto the next line.
In the repeating section, type SKU:.

Note:

You should always use descriptive text as the first column in the repeating section.
Drag a Text Box control onto the form, and then press ENTER.
In the repeating section, type Count:.
Drag another Text Box control onto the form.
Below the repeating section, press ENTER to create a new line.
Type Total count:.

Note:
You should always use descriptive text as the first column in the repeating section.

The form should be similar to the example in Figure 1. The text box containing the total count will be inserted in the next exercise.

Figure 1. Creating a SKU tracking form

To edit the form’s business logic and data validation

On the form, double-click the Data Picker control.
Under Default Value, select the function button to the right of the text box.
In the Insert Formula dialog box, click Insert Function.
Click the Data and Time category, and then click the now function.
Click OK three times to close all dialog boxes and return to the form.
Double-click the SKU: Text Box control, click Cannot be blank in the Validation and Rules section, and then click OK.
Double-click the Count: Text Box control. In the Field name text box, type myCount.
In the Data type drop-down list, click Whole Number (integer).
Click Cannot be blank, and then click OK.
To open the repeating section properties, double-click the border of the Repeating Section control.
In Field or group name, type Item.

This enables the repeating section to display a button to add another item to the section in a mobile device.
Drag an Expression Box control from the Controls task pane onto the form next to Total count:.
Click the function button to the right of the XPath text box.
On the Insert Formula dialog box, click Insert Function.
Click the Math category, click the sum function, and then click OK.
Double-click the underlined double-click to insert field section of the sum function.
On the Select a Field or Group dialog box, expand the group to find the myCount element in the Data source tree.

Click myCount to select it, and then click OK three times to close all dialog boxes and return to the form.

To enable the form to be submitted

Browse to the SharePoint Server site where the form will be located.
On the home page, click View All Site Content, and then click Create.
Click Document Library, and type MobileDocLib.
Change the Document Template to None, and leave all other settings unchanged.
Click Create.
Switch back to InfoPath, click the Tools menu, and then click Submit Options.
Select the Allow users to submit this form check box.
In the Send form data to a single destination list, click SharePoint document library.
Click Add to add a new data connection.
In the Document Library text box, type http://<ServerName>/MobileDocLib/Forms/AllItems.aspx, where <ServerName> is the name of the SharePoint server running InfoPath Forms Services.

Note:

If the document library is not located on the root site, you must insert the site name in the URL.
Click the function button to the right of the File name text box. The Insert Formula dialog box is displayed.
In the Insert Formula dialog box, click Insert Function.
In the Text category, click the concat function, and then click OK.
Click the first occurrence of the text "double-click to insert field" in the Formula box to highlight it, and type 'form' enclosed in single quotation marks.
Click the second occurrence of the text "double-click to insert field" in the Formula box to highlight it, and click Insert Function.
In the Date and Time category, click the now function, and then click OK.
Delete the remaining "double-click to insert field" items in the Formula box.
Ensure that the formula box contains the formula concat('form', now()), as shown in Figure 2.

Figure 2. Inserting a formula to give each submitted file a unique name
Click OK.
Click Next, and then click Finish.
Click OK to return to the form.

Note:
If the document library is not located on the root site, you must insert the site name in the URL.

To enable the form to work in a mobile Web browser

In InfoPath, on the Tools menu, click Form Options.
In the Browser category, in the Toolbars section, select the Update check box and the Submit check box.

This enables the mobile toolbar to display the Update button and the Submit button.
In the Mobile Devices section, click Enable rendering on a mobile device.

The final options should look like Figure 3.

Figure 3. Enabling form options to display
Click OK.

Publishing the Form Template

Form templates that are enabled to display on a mobile device require administrator approval before they can be accessed. The steps to publish the form template are different from the steps that are required to publish a form template directly to a SharePoint Server library. This is the same process used to publish form templates that contain managed code.

To publish the form template

In InfoPath, on the File menu, click Publish. If prompted, save the form template.
Click To a SharePoint Server with or without InfoPath Forms Services, and then click Next.
In the Enter the location of your SharePoint or InfoPath Forms Services site box, type http://<ServerName>/MobileDocLib, where <ServerName> is the name of the SharePoint server running InfoPath Forms Services.

Note:

If the document library is not located on the root site, you must insert the site name in the URL.
Click Next twice.
Next to the Specify a location and file name for the form template box, click Browse.
Click the Desktop icon and type MyFirstMobileForm.xsn.
Click Save.
Click Next twice.
Click Publish, and then click Close.

Note:
If the document library is not located on the root site, you must insert the site name in the URL.

Note:
You must have Farm Administrator privileges to perform the next procedure.

To upload and activate the form template

On the server running InfoPath Forms Services, open the SharePoint 3.0 Central Administration Site from the Start menu, or browse to the Central Administration site by using the server name and port number.
Click Application Management.
In the InfoPath Forms Services section, click Manage form templates.
Click Upload form template.
Next to the File Name box, click Browse, select MyFirstMobileForm.xsn on the desktop, and click Open.
Click Upload, and then click OK when it is uploaded.
Move the pointer over MyFormMobileForm.xsn, click the drop-down arrow, and then click Activate to a Site Collection.
Select the site collection that contains the MobileDocLib library created previously.
On the Activate Form Template: MyFirstMobileForm page, click OK.
Browse to http://<ServerName>. On the left side of the home page, under Documents, click MobileDocLib.
On the menu in the library, click Settings, and then click Document Library Settings.
On the Customize MobileDocLib page, click Advanced Settings.
For the Allow management of content types? option, select Yes, and then click OK.

This returns you to the Customize MobileDocLib page.
Click Add from existing site content types.
In Available Site Content Types, click MyFirstMobileForm, click Add, and then click OK.
In the Content Types section, click Document.
Click Delete this content type, and then click OK.

Testing and Completing the Form in a Device Emulator

A simple and inexpensive way to test and debug an InfoPath mobile Web browser-based form without using an actual device is by using a desktop emulator. Emulators are available on the Internet for a variety of device form factors and operating systems.

To test your form in the Microsoft Pocket PC 2003 SE Emulator or Smartphone 2003 SE Emulator, use the Microsoft Device Emulator Manager and ActiveSync 4.2. If you install Visual Studio 2005, the emulators and Device Emulator Manager are installed by default. ActiveSync 4.2 is a separate download, which you can obtain from the Microsoft Download Center. You might have to restart your computer to see the Active Sync icon in the Windows Taskbar.

To use a device emulator to open your form

Start Visual Studio 2005.
On the Tools menu, click Device Emulator Manager.
Right-click the Pocket PC 2003 SE Emulator, and click Connect.
Right-click the Pocket PC 2003 SE Emulator again, and click Cradle.
Click Guest Partnership, and then click Next.
Start Internet Explorer in the emulator from the Start menu.
In the Address bar, enter http://<ServerName>/_layouts/mobile/mobileFormServer.aspx?xsnlocation=/FormServerTemplates/MyFirstMobileForm.xsn, where <ServerName> is the name of the SharePoint server running InfoPath Forms Services.

Note:

If the document library is not located on the root site, you must insert the site name in the URL.

Note:
If the document library is not located on the root site, you must insert the site name in the URL.

The emulator and form should look similar to Figure 4.

Figure 4. Viewing a SKU Tracking Form in a Mobile Browser

The Form in a Mobile Emulator

Note:
You can test the mobile rendering of your forms on your desktop Windows Explorer using the same URL. This will give you some idea of what the mobile user experience will be, but it will not enable you to see device-specific layout issues as an emulator does.

Conclusion

In this lab, you learned how to create a form template that can be rendered in a Web browser on a mobile device. You also learned how to enable a form to submit data to a SharePoint Server library, how to publish a form template to a server running InfoPath Forms Services, and how to test and debug a mobile form template using a device emulator.

In Lab 10: Creating and Inserting InfoPath 2007 Template Parts, you can find out how to create an InfoPath template part and insert it into a form template.

Additional Resources

For more information about developing with InfoPath, see the following resources: