Pages

Wednesday, June 29, 2011

InfoPath 2010 Solution Part 1.

Introduction

Today I would like to talk about an InfoPath 2010 solution I created for one of our customers. If you are not familiar with InfoPath 2010 read the following explanation. InfoPath 2010 is an application included in the Office 2010 suite. It is mainly used to create online forms for SharePoint 2010 portals. This has the following advantages:
  • Reducing the paper trail;
  • Users can fill the form in the browser;
  • The form can be saved to a SharePoint form library or send by e-mail;
  • Controls in the form can be connected to Active Directory, My Site and SharePoint;
  • Rules can be used to create a complex and flexible form;
  • Saved forms can be connected to SharePoint workflows.

Customer solution

Customers are always interested in the reducing paper trails. For example the employees at one of our customers need to fill in a paper form to declare the costs they made. You can imagine this will take a lot of time to be processed and forms can get lost along the way. This can easily be prevented by creating a digital form with InfoPath and connect a workflow to it so the appropriate employees receive a notification and can approve or decline the declaration. The information is also saved online in SharePoint so it is instantly available for more people. For example, with out-of-the-box SharePoint 2010 functionalities views can be created to analyse the information.

So how does this work? Just keep reading the following paragraphs. I will explain how to create a simple declaration form. I will not be able to discuss all the features of the InfoPath form so keep an eye on upcoming blog posts.

Creating the form

Start InfoPath 2010 and the following screen will appear:



The form we want to create has to be saved within a SharePoint form library so we will choose for 'SharePoint Form Library'. Select this option and click on 'Design Form'. The following screen will appear:



Just click in the top part of the form and type the name of the form: 'Declaration form'. Now we can build the form. For this we need to add text and use the available InfoPath controls:



First we start by adding a section. The section will contain all the labels and controls for the employee information. The advantage of working with sections is that you can create rules that can be applied to a certain section. I will describe rules in an upcoming blog post. Add the section under the ---- line and above the first green heading. Cut and paste the heading and fields in the new section. Add a heading by replacing the text 'Click to add heading' with 'Employee Information'. The form will look like this:



We can start adding labels and controls. Create the following look and feel:
Name: Person/Group Picker Manager: Person/Group Picker
E-mail: Text Box Department: Text Box
Mobile: Text Box Branch:
You probably need to stretch out the form a bit so everything fits. After adding the labels and controls the form will look like this:



We now need to change the field names of the controls. Select a control and choose in the ribbon for ´Field Properties´:



Always give a control a name that really applies to the control and is easy to understand for other users. You never know if a co-worker needs to change the form. So for the e-mail control we will call it 'EmployeeInfoEmail'. I always use the name of the section first and after that the control type. The reason for this is that maybe other sections will have an e-mail field. You cannot give it the same name because InfoPath will see this as a double control and you will get an error. When you are done with this the form will look like this:



The field section will look like this:



We can now continue with setting up the second part of the form. The employees need to be able to add their declaration. Create another section (name it 'Declarations') under the previous one and cut and paste the green heading. Type in the heading: 'Declaration'. We want the employees to be able to add multiple declarations into one form so we use the 'Repeating Table' control. InfoPath will ask how many columns we want to use, in our example we only need 2. You can always add more columns by selecting a field in the table and choose in the ribbon, under 'Table Tools', for 'Insert Right' or 'Insert Left'. Add a label for the first control called 'DeclarationDescription' and call the second label 'DeclarationAmount'.

To provide the employee and the approver(s) with an easy overview of the total costs we can add another control under the table. Go to 'Insert' in the ribbon and a table with 1 row and 2 columns. Add the label 'Total amount' in the first part of the table and a text box control called 'DeclarationsTotalAmount' in the second part. We need to configure this control for calculating all the different declarations. Go to the field properties and click on the 'Fx' symbol. Click on 'Insert Function' and choose 'Sum' and choose the field 'DeclarationAmount'.

The form will now look like this:



The last part of our form is a 'Send' button so employees can add the form in SharePoint. Add another section and call it 'SendForm'. Add the button and put it in the centre of the form. Before we configure the button we need to set up a Data Connection so the form can be added in SharePoint. Go to 'File' and choose for 'Publish'. Click on 'SharePoint Server' and save the form. Add the SharePoint server name. You probably have to enter your credentials first. When these are accepted the following screen will appear:



We want to use this form in a From Library so we choose that option. In the next screen you can use a current Form Library but we will create a new one. After the library is created we get a really important option window:



We can now decide which controls from the form should be shown as columns in the Form Library. Choose 'Add' and the following screen will appear:



You can select any control from the library. You should often change the 'Column name' field. In our form we want to add the following controls:



Now click 'Next' and publish the form. The last thing we have to do is configure the send button and set up a Data Connection to the Form Library. Click on the button and choose for 'Control Properties'. Change the Action of the button to ´Submit´. Change the ´Send form data to a single destination´ to ´SharePoint document library´. Click ´Add´ and the following screen will appear:



Add the URL of the Form Library in 'Document Library'. The most interesting part is the 'File name' option. It is important that a unique file name is created for every created declaration. You don't want two employees saving the form with the same name. To solve this add the following formula:

concat(DisplayName; "_"; EmployeeInfoDepartment; "_"; substring(now(); "9"; "2"); "-"; substring(now(); "7"; "2"); "-"; substring(now(); "0"; "5"))

Click 'Next' and give the Data Connection a unique name. The Submit Options screen appears again. InfoPath provides you with the option to show a custom message after the employee submitted the form. Click on 'Advanced' and change the message if needed. Now change the label of the button and call it 'Send form'. The last changes of the form need to be submitted to SharePoint. InfoPath comes with a great option called 'Quick Submit'. Just click this button: The form is now ready to be tested in the SharePoint portal. To make it easy for an employee to fill in an InfoPath form a webpart is available called 'InfoPath Form Web Part'. You can find it in the 'Forms' category. Just configure the webpart to use the Form Library we created and to open a new form after submitting. The form will look like this:



Try to add a declaration and click on ´Send form´ when you are done. The Form Library will now contain the submitted form as shown below:



Just by modifying the view you can remove standard columns such as 'Checked Out To' or 'Modified'. It is all up to you!

In a follow up blog post I want to show you how to create a connection with the SharePoint My Site and the InfoPath form. With this connection fields such as 'Name' and 'Manager' can be filled automatically after the employee opens the form. If you have any questions just contact me at jasper.oosterveld@wortell.nl or @JasITConsultant.

0 replies:

Post a Comment