InfoPath 2007 web services tutorial

So if you’ve read thefirst article and have your database and webservices created you’ll be keen to get the InfoPath form created to you can enter some sales data. If you’re lazy though and have been waiting for me to post the database and webservice code then here they are below:
database.zip
webservice.zip
One extra thing you’ll need to do with your webservices is add the attribute [XmlIgnore] to any object property that is an identity field in the database. If you don’t do this the webservice and therefore InfoPath will be expecting you to send in a value for the identiy columns, which kind of defeats their purpose of setting them as auto increment fields.
Also before you start doing anything with the webservice and adding orders by it, you’ll want to add some sample data to the Products, Customers, and SalesPeople tables. This is because of the foreign key contraints on the database.
Once you have your webservice setup (you’ll need to create it as an ASP.NET 2.0 web app in IIS, and change the connection string in web.config) lets open up InfoPath 2007 and get creating our form.
Upon opening InfoPath from the Getting Started page click ‘Design a Form Template…’. From the data sources you can chose to base your template on click web service. Make sure below that you have checked ‘Enable browser-compatible features only’.

Next we specify how the form works with the web service. For now we only want to think about the submitting data to our sales webservices to just select the option ‘Submit data’

Enter in the url of our webservice

Now we select the web service method we want to submit data to. As there’s only one method for that web service we know which one to select 🙂

Finally give the data connection a useful name such as ‘Submit Sale’.
Now we get a form created for us but with nothing on except an area to add a title, and drop some controls. In the left hand Design Tasks panel you should be able to see the Data Source panel. InfoPath has used the WSDL file of the webservice to go through and work out what objects need to be passed to the AddSale method to succesfully call it. Drill down the tree starting at myFields -> dataFields ->tns:AddSale -> sale

If you drill down further you’ll see each individual property that makes up a sale, including the Products array, which itself is made up of SaleProduct properties

We can drag and drop from the data connections design task onto our design surface, and depending from which level we’ve pulled objects across from, it will create the necessary fields for us on the InfoPath form. We want to drag the ‘sale’ object over and drop it in the fields area. When we let go of the cursor in the fields section we get a number of options for how we want to create and display these controls

You should choose ‘Section with Controls’ from the context menu displayed. Once you do, you’ll be very happy to see all our controls for us nicely laid out. It’s really clever as well in that it creates a repeating table for us for our SalesProducts. This means we can add many products for each other, exactly as the AddSale webservice methods understands to accept.
If you click the ‘Preview’ button on the toolbar now you’ll see that you get a nice calendar control for entering dates, and you can add multiple SalesProduct rows to the table and nicely take them away. You won’t be able to submit the form yet because of the trust level the form is set at. We’ll fix that shortly.
At the moment our users would have to enter the Ids for themselves, the customer, and the product being sold. Our users don’t want to have to remember those, they want to be able to select them from a drop down list. To be able to do that we are going to have to create some more data connections. Back to the Data Source design pane, down the bottom click ‘Manage Data Connections…’

From the form that’s popped up click the ‘Add…’ button, then on the next form click the radio button to ‘Create a new connection to:’ and the select ‘Recieve data’.

Next form, chose a web service as the data source, click next. Enter the url of our webservice to get our sales people

Select GetSalesPeople as the operation, and then Next. On the next form click to ‘Store a copy of the data in the form template’. And on the final form of this wizzard make sure ‘Automatically retrieve data when form is opened’ is checked. Click Finish.

Click ‘Close’ to close the Data Connections form. Once that is closed if you go back to the Data Source design task pane you’ll see that in the Data Source drop down we have a secondary data source:

Before we go and edit our textboxes on our form we want to change the compatibility settings so we make sure our InfoPath forms can be used with browsers and mobile devices.
1, To enable the form to be used on mobile devices go:
Tools -> Form Options -> check the checkbox for ‘Enable rendering on a mobile device’.
2,  While in the form options screen above, click the Compatibility option down the left hand side. Check the check box to allow the form template to be opened in a browser or InfoPath. Just aid the compatibilty of the form, enter the url of the server that has Forms Server setup (this is most likely your MOSS Server)

Click ok and we’re ready to roll.
Locate the SalesPersonId Textbox on the design of your form and right click on it. From the context menu select Change To -> Drop-Down List Box.

Once it’s changed on your form double click on the drop down list box to get the controls properties up. We need to let it know where to get it’s values from. On the data tab, in the ‘List box entries’ section select ‘Look up value from an external data source’. The form view will now change slightly for you. GetSalesPeople will be the Data source selected for you as it’s currently the only one we’ve added so far. Click the button next Entries text box so we can select our group of data

Select down to SalesPerson and click OK. You’ll see now in our Entries textbox it’s created the XPath query we’ll need to get that data out. The value that gets selected, SalesPersonId, is fine, but we want to change the display name so that our control displays the sales persons name. Do that by clicking on the button to the right of the Display Name textbox and select Name. Once you’ve done that click OK.

We can now almost preview our form and submit data! If we try to now though we’ll get an error about our data source being offline. That’s because our form is currently set at a security level where it cannot access data outside of the form. To change this setting we need to go to:
Tools -> Form Options -> Security and Trust category
Uncheck ‘Automatically determine security level’ and then select the Full Trust radio button.
NOTE : This is a development scenario showing the power of InfoPath 2007 and web services. Giving a form full trush in a live environment should be thought through.

Once we have that selected and we have clicked OK, we can select the Preview button on the main toolbar. Our InfoPath form will show up in all it’s glory! 🙂 (If the preview button is not on the toolbar you can go File -> Preview -> Form). If you check out the Sales Person Drop Down you’ll see that it has the names of the Sales People in it! Once you’ve finished looking at it click the ‘Close Preview’ button to go back to your InfoPath designer.
Now I’ve walked you through creating the Drop Down List Box for the Sales People, it’s up to you to do the same for Customers and Products. It’s very easy, just add the customer and product web services as data sources, then change the textboxes to drop downs, and configure them to put the right data values where you want them.
tick tock tick tock tick tock
Right as you’re reading on I pressume you have your other two drop downs completed and are ready to proceed.

We can test our InfoPath form by going into a preview of it, filling out some data, and pressing the Submit button. Go and check in your SQL db to see whether the sales order has been succesfully created. One final thing we want to do with our form is get it to close once the user has pressed the submit button. To enable this go
Tools -> Submit Options -> Advanced -> And in the drop down After Submit chose ‘Close the form’. -> Click OK
Now we want to publish our InfoPath form. Because we have chosen to give this form full trust we can’t publish it directly to MOSS 2007. First we have to publish it to a file location, and then get an administrator to upload it to MOSS via central administration. To publish it to a file location go:
File -> Publish -> Click OK to save it -> Give it a good name -> Chose to publish it to ‘SharePoint Server with or withour InfoPath Forms Services’ -> Enter the URL of MOSS -> The options should be checked for using the form in a browser, and it requiring administrator approval (if not check them) -> Browse to a location on your file system to publish the form to so you can upload it to central admin -> Select any columns you want promoted to your SharePoint Forms Library (you can ignore this if you like and just click next) -> Finally click publish.
Now we need to upload our InfoPath form to central admin.
Browse to the central admin site -> Application Management -> Upload Form Template -> Browse to the location of your form -> Click Upload.

The form is now added as a Feature content type. Next step we need to do is activate this Feature on the MOSS site where you want to use it. Go to the MOSS 2007 site as the site collection administrator and go : Site Actions -> Site Settings -> Modify All Site Settings -> Site Collection Features.
You should now see the InfoPath template there as a deactivated feature. Click the ‘Activate’ button to activate it 🙂
Now once we have created a Forms Library we can go and add our InfoPath form as a content type. From your forms library default view go : Settings -> Form Library Settings -> Advanced Settings.
From here, click the radio button to say Yes to the management of content types. Now finally we can add our form. Back in the Form Library Settings find the link to ‘Add from existing site content types’. From the list of available content types find the name of your InfoPath form, and click the add button

Click OK. Hurrah! Now we can go and fill out our InfoPath form. Go back to the Form Library, and click New, and you’ll see our Form Template as one there to select! By default it will open the form in InfoPath, if however you want it to open in the browser by default, you can set this in the Advanced Settings of the Form Library.
.
Below is our form so you can add new sales data via the browser

Advertisements

Leave a Reply

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

WordPress.com Logo

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

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s