The form for currency conversion basically consists of the following components:

• An input value
• A from currency
• A to currency
• A submit button

This can be seen in the following screenshot:

In this Part i will first demonstrate how we build the required form in InfoPath. I will use a static rate of exchange to prove the calculations embedded in the form are functioning correctly. Then i will demonstrate how we can use a Web Service to provide the rate for the specific currencies selected.

1. Create a new Blank Form in InfoPath 2010.
2. Add the following controls to the form:
• A text field called inputAmount, configure this as a Decimal (double).
• A text field called outputAmount, configure this as a Decimal (double).
• A button called convert 

You should end up with something similar to this:

In the fields pane right click myFields and select Add, call this new field exchangeRate. For now give this a default value of 1.5.

Select the convert button, and from the ribbon select Manage Rules. Click Add and then select set a fields value. Set the outputAmount field to the value of inputAmount x Rate.

Preview the form and you should now have a functioning multiplication calculation, that is updated each time convert is pressed.

Right click the outputAmount text field select Change Control and choose Calculated Field. This is so the user cannot edit the amount. We don’t want them tampering with the amount of money they are going to get paid!

Finally select the inputAmount text field, and add an Action rule, the rule is to set the outputAmount to be blank, so that the values are always correct.

To recap, we have created a new form that has the components required for us to create a currency conversion component. We have a working calculation working from a button located on the form; however this is using a static rate.

Before Part 2, give your form a bit of jazzing up and you’ll end up with something like this:

Part 2

In Part 1, we created a new form that has the components required for us to create a currency conversion component. We have a working calculation working from a button located on the form, however this is using a static rate.

At the end of Part 1 we ended up with a form that looked a little like this:

We now are going to continue and achieve the following:

• Connect to a Currency Conversion Web Service.
• Provide drop down lists of available currencies.
• Set the Exchange Rate relevant to our selected values.

After a bit of hunting I found a web service that would suit the needs of this project. It can be accessed using the following URL: http://www.webservicex.net/CurrencyConvertor.asmx

From the description this does exactly what we need it to. Adding this in to InfoPath couldn’t be simpler. But as this web service is out on the web we need to change our form in to full trust mode. To do this click File -> Form Options and from the left select Security and Trust, from here you can uncheck Automatically determine security level and select Full Trust.

Now we are ready to add our web service. On the Fields pane click Manage Data Connections. Click on Add and then follow the wizard as illustrated.

Leave the defaults and click Next.

Leave SOAP Web Service selected and click Next.

Enter the URL of the web service into the location box and click Next.

The web service, has only a single method ConversionRate select it and click Next.

On this screen you are able to set default values, notice that when you do you get a great drop down list of valid items that will come in handy later. I’m from Australia so have set both values to AUD to begin with. Click Next, Next and finally Finish.

You have now successfully added the web service in to InfoPath. The next step will be to add those useful drop downs we just saw in to the form for the end user to utilise in selecting valid currencies.

In the Fields pane select the drop down that currently has Main selected; select the secondary data source of ConversionRate. Expand the structure, and inside queryFields you can see the two values we set earlier, FromCurrency and ToCurrency.

Simply drag and drop these on to the form, a menu will appear and you will want to select drop down box as the type of field to utilise. If you preview the form now your drop down lists should be functional.

Brilliant, we have all the values the web service support so we should be safe from errors. Next open the properties of the exchangeRate field, set the default value to the ConversionRateResult as shown below. Ensure that Refresh value when formula is recalculated is checked.

Finally we just need to edit the rules on our Convert button, select the Convert button and then select Manage Rules select the rule we created earlier, most likely with its default name Rule 1. Add a new action of type Query for Data. We only have one web service currently so by default the data connection selected is ConversionRate click OK. We need to ensure that we query for data before setting the outputAmount there for highlight the action that we just added and select Move Up.

You should end up with the two actions like this.

That’s It! Preview your form, enter a value and select your from and to currency and hit the convert button. We now have the value coming back that we expect.

To recap, we created a new InfoPath form, laid out some controls with a couple of rules, connected a conversion rate web service and hooked it up all together to make a InfoPath currency conversion form. These components can now be used various ways in many other forms that would require currency conversion. 

How to Create Expandable/Collapsable Sections in InfoPath

How to Create Expandable/Collapsable Sections in InfoPath.

Adding regions that expand and collapse at the click of a button isn’t anything new. We are doing it in html/css/jQuery for a while now using div selectors and the hide()/show() methods of jQuery. But how do we do it in InfoPath?

This article is for InfoPath 2010, but the actual implementation was done on 2007. So the following steps will work in either version.

How do we create something that looks and behaves like this:

　
Let’s get started.

Setup the Section and Controls
1. Let’s load InfoPath Designer 2010 and start with a Black Form template.

2. Let’s quickly update our title to say InfoPath Expandable/Collapsable Section Demo


　
3. Now in the section below the title, let’s add a table with a single row and a two columns.

　



　

4. In the first column, I’m going to type in a section title, let’s go with Account Details. I’m formatting the text as Bold and setting the font to 12.

5. Click on Table Tools, specifically the Layout tab. Highlight both rows in the table and using the Shading tool, apply a color of your choice.

6. Now with the row still highlighted, click on the Borders button. Change the color tool so you’re using a slightly darker accent to the color you picked above. Change the width to 2 1/4pt. Click on the Bottom Border button.

　

　

7. Click OK. I’m going to change the font color for the Account Details text to white. Here is what we’ve got so far.

　

　

8. Now just below the table, add a Section control. I like to name all the controls and variables on my InfoPath form, so I’ll call this section AccountDetails. The reason I use a section control is because I’ll need a container to put my controls into, so that it’s easy to specify what to hide and show. Also, it’s an organizational issue for me. If I have a section, any controls I do put in there, show up under that section in the Data Source browser.

9. Ok, so let’s add a new table within our section with 4 columns and 3 rows. We’ll add some controls to this table. Tables are a nice way to format our controls so they present nicely.

10. Now let’s add a few controls. For this example I added a total of 5: firstName, lastName, age, birthDate and country.

　

　

Add the Toggle Variable & Buttons
1. Ok now that we’ve got all that setup, we need to add variable that will track the state of our section, is it expanded or collapsed?

2. If you’ve got the Fields browser open, as I do in my above screenshot, click on the AccountDetails folder to highlight it.

3. The Add Field button should become available, click on it and we’ll add a new field for tracking the section state.

　

　

4. Let’s give the field a Name of toggleAccountDetails. I recommend you make this descriptive enough so you know which section it’s responsible for collapsing/expanding.

5. Specify a Default value of Off. Click OK.

　

　

6. Ok so that’s all setup, now let’s add two buttons to the second column in our Account Details header table.

　

7. Change the label on each button to read 3 and 6. Change the font for both to Marlett. This will give us the effect of arrows.

8. Double click one of the buttons to bring up the Control Tools for that button. Click on the Shading button. Specify No Fill. Click on the Borders button and select None. Repeat for the other button.

9. Resize both buttons and right align the entire column. Here’s what we’ve got so far:

Setup Conditional Formatting

1. Ok now for the fun part, let’s add the conditional formatting!
2. Double click on the first button.
3. Click the Add Rule button. When This Button Is Clicked, Set a Field’s Value.

4. The field we want to set is the toggleAccountDetails. And you want to set its Value to On.

5. Now click on the Rules button on the toolbar. Not the Add Rule button!

6. The Rules window should appear. Click on the New button and select Formatting.

7. We need to add two different conditions, one to show the button and the other to hide it. The first condition we want is: IF the toggleAccountDetails is set to On, we want to hide this button. This means we’re already in an expanded state, and this button should not be seen anymore.

8. Ok let’s add another formatting rule. IF the toggleAccountDetails is Off, set the button text to black.

9. Awesome, so far so good. Now let’s repeat these steps for the other button, but obviously we want to reverse the settings. So:

1. Rule: When button is clicked, set toggleAccountDetails is set to Off.
2. Condition 1: IF toggleAccountDetails is Off, hide the button.
3. Condition 2: IF toggleAccountDetails is On, set the text to black.

10. Ok and finally, let’s add the two conditions we need on the section so that it collapses and expands based on the value of toggleAccountDetails.

11. Click on the AccountDetails section. And click on the Manage Rules button. Click on New -> Formatting

12. Set the following condition: IF toggleAccountDetails is On, do nothing.

13. Click on New -> Formatting again and add a section condition: IF toggleAccountDetails is Off, hide the control.

Test the Solution

That’s it! there you have it. Let’s preview and test this out!

Collapsed:



Expanded:



With a little tweaking: