InfoPath E-card solution ~ Blog moved to www.jasperoosterveld.com

Introduction
A client of ours clients, a hospital, asked us to create an e-card form. This e-card can be filled in by a visitor of the Internet site, who wants to send a get better card to one of the patients of the hospital. It is a pretty straightforward InfoPath form. The visitor needs to be able to choose a card, leave personal and patient details and of course the message for the patient. The form needs to be submitted by e-mail to an employee of the hospital. I will show you the form and then I will describe how I created the form.

This is the first part of the form:

The visitor can choose a card (you understand these are dummy pictures ;-)), fill in personal and patient details and leave a personal message. The visitor needs to click on the Next button and the following view will be shown:

This is a bigger version of the picture and the personal message is shown again. If the visitor is satisfied the card will be send to the hospital by clicking on Send card. I will now try to explain the main part of the configuration for this form. I really hope that people will send me feedback if there is a better solution J

I add the pictures by just using the ribbon. Click on Insert, and Picture. Select a picture and it is added to the form. The picture will probably be really big, so just resize it manually. Now, add an Option Button control. For my form I only need two. You now have your step 1 section:

The user can now select one of the two pictures.

Section 2: Personal and patient details
This is pretty easy. Just add a table for the labels and controls. Go to Insert and Custom Table. Create four rows and two columns. Create your labels and use the Text Box control for the controls. Don´t forget to give all controls names that describe the function of the controls. For example: EcardPatientFirstName. This is important in case other users need to reconfigure the form. Does a control need to be mandatory? Check the box Cannot be blank option under Control tools and Properties (Select the control to get this ribbon action).

You now have your step 2 section:

Section 3: Personal message
The last section is also pretty easy. Just add a Text Box control and make it bigger by stretching it. Don't forget the check the Multi Line option. Otherwise the text typed in the text box will not start at the top left of the control. Go to the Text Box Properties, Display and check Multi-line:

The last part of the section is the button. Go to the control section and add a button. We now need to add a rule to the button so when a visitor clicks the button a new view is opened. The reason I created a new view with the selected picture and message is that the hospital wants to print the e-card with the message. So let's create a new view. Go to Page Design and click on New View. I named the view Email View. We will fill the view soon.

So, now we want to add a rule to the button. Double click the button and in the ribbon you should see the Rules section. Click Add Rule, When This Button is Clicked and Switch Views. Select the new view we created. Rename the label of the button to Next.

You now have your step 3 section:

The Email View
Make sure the lay-out of the view is the same as the first one. I often copy the whole form from the first view and paste in the second view. Delete the labels, controls and tables you don't need. I now want to make sure that only the picture, the visitor selected, is shown in the Email view. Add two sections under each other. Add the original picture to each of the sections:

We need to add a rule to each section to make sure the selected pictured is shown and will be emailed to the hospital. To do this we need to know what value a selected picture gets from the first view. Go to the first view and go to the Control Properties:

You can see that if this button is selected the value is 8. We need to use this for the rule in the Email View. So, go back to the Email View and select the section and click on Manage Rules. You can now add rules. Create a new formatting rule with the following condition:

"OptionButton is not equal to 8"

OptionButton is the name of the control. Select under Formatting Hide this control. So if the option button under this picture is not selected the picture will be invisible in the EmailView. Perform the same action for the other section with the corresponding value.

Reuse the personal message control and add new button. This button needs to send the E-card to the hospital. We need to create a Data Connection to e-mail the form. Go to Data and select To E-mail:

Configure the e-mail address the E-card need to be sent to. You can also add a subject. Now, click Next:

Choose the first option so the E-card will be shown in the e-mail instead of an attachment. The last thing we need to do is add this submit action to the button. Double click the button and rename it to Send card! and choose the e-mail submit we just created.

You now have your new Email View! Publish the form to SharePoint and show it in the InfoPath webpart and you are ready to go J