InfoPath Rules,Validation, Conditional formatting,Code Behind- a sample application for timesheet-part1


Let’s do a very basic timesheet application.

Design an InfoPath form as below to enter the hours:

clip_image002

Create an xml file from Visual Studio for the tasks dropdown as secondary data source

clip_image004

And paste the contents below the xml node created by VS:

<tasks>

<task>

<type>SharePoint Development</type>

<value>SharePoint Development</value>

</task>

<task>

<type>SharePoint Designer</type>

<value>SharePoint Designer</value>

</task>

<task>

<type>InfoPath Design</type>

<value>InfoPath Design</value>

</task>

<task>

<type>InfoPath Code</type>

<value>InfoPath Code</value>

</task>

</tasks>

Save the file on your disk as tasks.xml

Go to the InfoPath designer and select the DropDown ListBox properties

clip_image006

And look up the values from an external data source:

clip_image008

Click on “Add” near the data source and select to receive the data from the ”tasks.xml” file

clip_image010

clip_image012

Select to add the resource files as below:

clip_image014

Select the “tasks.xml” from the

clip_image016

Select to retrieve the data when the form is opened

clip_image018

Choose the repeating group entries as “task” from the

clip_image020

Now select the value and the type

clip_image022

clip_image023

Go to “Form Options” and select the below only on the category “Browser”

clip_image025

In the “ Form Options” select “Property Promotion”

clip_image027

And add all the fields to be promoted as site columns and the screen would look like below:

clip_image029

Let’s use some rules and validations which InfoPath provides and reduces time of custom development:

Right click on “Mon” text box and select “Data Validation”

clip_image031

We should now add a condition for “Mon” time not to be greater than 12hrs

clip_image033

And put the screen tip and message as well:

clip_image035

Now start putting some functionality by adding Submit, Approve, Reject, Return and Cancel buttons as below in a section:

clip_image037

Now let’s create a section for signing the timesheets as below which would take the password and would validate with AD and return a flag to form to know the original user only signed the timesheet

clip_image039

We would disable the signtimesheet section by default by using conditional formatting and it would be visible when user clicks on “Sign TimeSheet” button. Follow the screenshots below for conditional formatting:

Click on the data source to add a field:

clip_image041

clip_image043

clip_image045

Now after adding the “IsSignTimeSheetClicked” field go to the conditional formatting for signtimesheet section

clip_image047

Now add the “Hide the control” when “IsSignTimeSheetClicked” is 0

clip_image049

Also now on the Sign timesheet button we need to set the field value of “IsSignTimeSheet” to 1 , so that section is visible.

Go to the button properties of the form

clip_image051

And add a rule “EnableTimeSheetSection”

clip_image053

And an action to set field’s “isTimeSheetClicked” value to “1”:

clip_image055

Now on the button properties select “Browser Forms” and select the option “Always”

clip_image057

Now we have our sign timesheet section which will get enabled when the user clicks on the “Sign TimeSheet” button and we would also need to hide the section once the user enters the password and clicks on “OK” the sign “timesheetsection” gets hidden if the password is correct or else returns and error message “Incorrect Password” as the validation rule.

So let’s add another field “IsAuthenticated” and set the default value as

clip_image059

Now on the timesheet section we have another field and validation rule to run so that the “signtimesheet” section is invisible.

clip_image061

Now on the “OK” button set the postback as “Always”

clip_image063

We will add another field “IsApprover” for hiding the “Approve,Reject and Return” buttons and set the default value as “0”

clip_image065

Now go to the button properties of “Approve”, “Reject” and “Return” buttons and do a conditional formatting as below:

clip_image067

We will add another field “IsSubmitted” so that we can enable other button to “WithDraw” timesheet which would be visible only to user i.e. IsApprover = 0

clip_image069

Now add the field

clip_image071

Go back to button properties of “WithDraw” and add the below conditional formatting:

clip_image073

clip_image073[1]

Now let’s do some InfoPath code behind for validating user credentials on click of the “OK” button

So let’s go to Button Properties and select “Edit from Code”

BOOM!!! Some message below

clip_image075

VSTA is not installed on the virtual machine I was working and may happen to anyone

So let’s install the VSTA and go to control panel à Add Remove Programs

And select Microsoft Office Ultimate 2007 and click on change

isclip_image077

Make sure you select “Visual Studio Tools for Applications”

clip_image079

Okay now the installation of VSTA is completed and I am back again to edit the code

Damn it opens in VB and the id of the buttons are ugly:

clip_image081

I will do some work to fix all these issues in the infopath.

Go to “Form Options” and select “Programming” from the category and click on “Remove Code” button

clip_image083

Now select “C#” and set the path of the code to where a location you know:

clip_image085

And click ok to return back to form.

Now I would set the ID of all the buttons on the form as below

clip_image087

Now I go back to the “OK” button and “Button Properties” and click “Edit From Code”

So Now I see a screen of Visual Studio as below:

clip_image089

Now I need to write some authentication with this code….I will continue in my next post

Advertisements

One Comment on “InfoPath Rules,Validation, Conditional formatting,Code Behind- a sample application for timesheet-part1”

  1. Sahil Malik January 15, 2010 at 7:31 pm #

    Oye nice blog! 🙂

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

%d bloggers like this: