Archive for January 25th, 2012

Build a Simple Language Translator using InfoPath and No Code – Part 1 of 2

One of the most useful features of InfoPath, is the ability to easily set up and use data connections from so many sources. Using data connections to web services, InfoPath can be used to create a form that passes data onto a third party website where the data is acted upon in some way and a response passed back to the end user.

A simple, yet practical example of this is this simple text translator. This was built on the back of a customer request to have forms available in multiple languages. No code is used in this development, but we do make use of the “Rules” functionality by which Business Logic and in-form workflow can be built.

While the result of some InfoPath experimentation presented here will not be putting any multi-lingual technical translating staff out of business I’m sure you can think of other applications which could benefit from a Web Service interface such as this.

Ok – so how do you go about creating a translation form? It’s as simple as baking a loaf of bread, so let’s start by looking at the ingredients we will need!

Recipe for InfoPath Translator – Serves 5 ( English, German, Spanish, French and Italian!)

Ingredients:

Instructions

  1. In InfoPath 2010 Designer create a new Blank Form and create a table with six rows and two columns
  2. Create a Data Connection – Not built one of these before? – Don’t worry a wizard makes this really simple!
    1. From the ribbon select Data / From Web Service /From SOAP Web Service and enter in the web service URL as below:

3.Now from the list of Services select Translate

4. On the next screen you will see a list of Parameters that are used by the web service – Enter your Bing Application ID here by using the Set Value button (You do have an app id don’t you? If not, sign up at http://www.bing.com/toolbox/bingdeveloper/) In the content type and category parameters set the values to ‘text/plain’ and ‘general’ respectively

5. The next screen should be skipped – hit the Next button

6. Now we are on the final screen for our data connection set up. Deselect the “Automatically retrieve data when form is opened” check box – Best practice for forms is to only use data connections when needed, and we will only be calling this service when a button is clicked

Build a Simple Language Translator using InfoPath and No Code – Part 2 of 2

7. After you have finished your data connection you will have two data references in your InfoPath project – Main and the Translate service you just created will be labelled a secondary connection…

You will see from the view above that the data connection is in two parts “query fields” and “data fields”. Put simply, the query fields enable you to pass information through the data connection and the data fields represent what you get back!

8. Enter text labels in the left hand column of the table you created in step 1 and drag the text field and the TranslateResult fields from the fields pane on the right into the form layout 

9. Now switch to the Main Data view in the fields pane and add two dropdown list controls and label LanguageFrom and LanguageTo… This will create two extra field references in the Myfields folder of the Main view of the Fields pane as in the screenshot below. These two fields will be used to provide data to the “From” and “To” query fields of the Translate data connection

10. Enter the values as in the screenshot below to the Drop Down List Box properties for the LanguageFrom field

11. And enter the values as in the screenshot below to set up the LanguageTo Dropdown List Box properties: Yes, pretty much identical to the LanguageFrom field!

For this example I have only added five languages and their associated codes , but you can add additional languages to these controls if they are supported by the Microsoft Translate API.

12. Now finally we just need to add a button to our form and attach some logic to the button so that when pressed the following will happen:

  • Populate the “From” query field of the Translate data connection with the value selected in the LanguageFrom Dropdown List
  • Populate the “To” query field of the Translate data connection with the value selected in the LanguageTo Dropdown List
  • Run the web service to see the translate result

This is achieved simply by adding a button from the Controls section of the Home ribbon and adding a Rule with three actions as below:

The three actions are

  1. Set a fields value (select the “from” field from the Translate data connection and make equal to the LanguageFrom field from the Main data connection)
  2. Set a fields value (select the “to” field from the Translate data connection and make equal to the LanguageTo field from the Main data connection)
  3. Query using a data connection (select the Translate data connection)

Conclusion

Well, that’s all there is to it! Test the form in preview mode and add some simple sentences and combinations of From and To languages. If you have been successful, you will appreciate how InfoPath can be used to address some fairly complex Business scenarios in a straightforward manner with NO CODE REQUIRED!
J

Do you have any similar examples of code free web service based InfoPath development – we’d love to hear from you!



Follow

Get every new post delivered to your Inbox.

Join 279 other followers