infopath devlopment for beginners

Hi All,

 

I found good site for infopath development for beginners.

Please refere source link.

http://jamilhaddadin.com/2011/12/03/implementing-workflow-using-infopath-2010-and-sharepoint-designer-2010/

Introduction:
After writing Gathering requirements for business automation (workflow) article; where I tried to explain in details how to gather requirements from business users in a way that facilitate sofware implementation process, the previous article was generic and can be applied on any technology platform.

In this article, I will discuss how to convert this requirements into a real implementation utilizing SharePoint Server 2010Microsoft InfoPath 2010SharePoint designer 2010, this solution is done with out of the box features available in those applications without the need to write any line of code.

This article needs 75 minutes to fully read, understand and practice.

 


Technologies and Environment Preparations:
I did my demonstration using the following environment:
    Windows 7 Standard edition (64-bit)
    SharePoint Server 2010 ( you need this to render InfoPath forms on the browser )
    Microsoft InfoPath 2010.
    SharePoint Designer 2010.
    Active directory ( or may be local windows users ) that contains 3 already create user accounts.
    Already configured SMTP server ( required to test your emails, can be ignored if you don’t want to check on emails )

 


Assumptions:  
   Users who read this should have fairly good knowledge in SharePoint 2010 ( as administrator or end user, not developer), basic knowledge in SharePoint designer 2010 and Microsoft InfoPath 2010 (or 2007).
   I recorded 7 videos and added them before that starting of each section, so you can either read the section or quickly go through the videos.


Plan: 
1.    Prepare the needed components
1.1   Create Site Collection
1.2  Activate SharePoint Server Enterprise Site Collection Features.
       1.3  Create the needed users
2.    Build the leave requests SharePoint list
3.    Build InfoPath form
3.1  Create the needed controls and views
3.2  Disable enable controls according to current state
3.3  Validation and submitting the leave request
4.    Build SharePoint designer workflow
4.1 Building the logic
4.2 Adding tasks assignment, email notifications and History


Solution:
As you will see from the plan, I will not go through the business case which is the Leave Requestbusiness process as every thing was detailed in the previous blog, so I recommend to spend 5 minutes and go through it before starting the technical implementation.

Back

1. Prepare the needed components
Steps 1.11.2 & 1.3 are illustrated on this video:

1. Prepare the needed components

Back

1.1 Create Site Collection.
– Go to Central Administration  || Application Management || Create site Collection || Fill parameters as shown in the table below || click OK

Title E-Services
URL: EServices
Template Blank Site
Primary Administrator <Any valid administrator user >

image

Back

1.2 Activate SharePoint Server Enterprise Site Collection Features.
– Log in to your newly created site collection || Site Actions || Site Settings || (under Site Collection AdministrationSite Collection Features || (Next to SharePoint Server Enterprise Site Collection Features) click Activate
image
Back

1.3 Create the needed users:
As mentioned the in Technologies and Environment preparation section, it is required to have 3 users who are going to play the roles of EmployeeTeam Leader and Human resources, so now we will add them to E-Services members SharePoint Group
– Log in to you newly created site collection || Site Actions || Site settings || (under Users and Permissions ) people and groups || (Make sure that E-Services Members group is selected underGroups)
image

– Click on New || Fill the parameters as shown in the bellow table || click OK

Users/Groups Your Test Users
Send welcome e-mail to the new users Optionally check ( to test email settings )

 

image

– Do the same for the 3 users, EmployeeTeam leader and Human resource.

Back

2. Build the leave requests SharePoint list.
Step 2 is illustrated on this video:

Create the leave request SharePoint List

– (in SharePoint main navigation ) Go to Home || (On Quick launch) Lists || Create || (optionally type Custom in search box) Click on Custom List || (in List Name text box) Type  Leave Requests Container || Click Create.
image

Now we will go to the Title Field in this list and change it “not required” since we will not use it in our case, so let us go…
– Go to (in SharePoint ribbon) List Tab || List Settings || (Under Columns Group ) Click on Title || Check No option under Required that this column contains information ||  Under Default Value typeLeave Request. || Click OK
image

Then we will create all the needed columns… let us go!
(On Quick launch) Click Leave Request Container || go to (in list ribbon) List tab || Click on Create Column.
image
Create 6 new columns with the following specifications:

Column Name Type Description Required Default value List of values
From Date and Time First day of the leave request. No Today
To Date and Time Last day of the leave request. No Today
Team Leader People and Group This user will be the first approver No
Human Resources People and Group This user will be the second approver No
Employee Comments Multiple lines of text Reason of the leave request No
Team Leader Comments Multiple lines of text Team leader comments No
Human Resources comment Multiple lines of text Human resource comments No
Action Choice This field will be set in the infopath form and will be sent to workflow as an input of the current action ( business process should not change this field at all ) No Clear it SE, AT, RT, AH, RH
State Choice This field will be controlled by Workflow business process and will be used by infopath to determine the current view ( infopath should not change this field at all ) No Clear it WT, WH, DN

Note the following:
    As you will see later on this tutorial; The only way of communication between InfoPath and SharePoint designer workflow is through list fields, so you must create a field for any value that will be needed in the SharePoint designer, for example we will send and email toTeam leader, so I added a fields called Team Leader so I will get his email in SharePoint designer from the Team Leader Column.
    I am using abbreviation for actions; SE is Submitted by employeeAT is Approve by Team LeaderRT is Reject by Team LeaderAH is Approve by Human Resources and RH is Reject by Human Resources.
    I am using abbreviations for States; WT is Waiting Team LeaderWH is Waiting Human Resources and DN is Done (when the workflow is done )
Back
3. Build InfoPath form.
Now, we will build the interface that will be used by users to work on this business process by submitting data, approving & rejecting. please note the following before you start:
    For each activity in workflow discussed in previous article; we need a particular form with a specific set of controls; these controls needs to be shown, hidden, disabled and enabled ( this will be achieved by using Views feature in InfoPath )
    As a result of the previous point, we will always load the proper view according to the current state & – sometimes – current logged in user.
    At any moment, workflow is expecting an action from a specific user, so we should pay attention that the user is accessing the form in the right time.
    (for developers ) If we think in N-Tiers architecture way; InfoPath represents the presentation layer.

Back

 

3.1 Create the needed controls and views

Step 3.1 s illustrated on this video:

Create the needed controls and views

– (on quick launch) click on Leave Request Container || (in the SharePoint ribbon) ListTab || Customize Forms:
Note: If you are not seeing this option ( Customize forms ) please go to step 1.2 Activate SharePoint Server Enterprise Site Collection Features.
image

This will open InfoPath form for you: (you may need to enter username and password, so use the site collection administrator’s user)
image

This form is the default Edit form on this list, we will use this form as an initial form to customize the coming newly created forms ( Actually we call them Views )

– Remove the following fields from the diagram:

Field Name Why we remove?
Title We don’t need it on this case, we may consider having some default value for this field as we did ( like Leave Request )
Attachment In our case there is no need for attachments, but –for example- if you are working on a sick leave business case; it would be nice to have attachment for users to place there medical reports as attachment.
Action Action will be sent behind the since when Approve & Rejected buttons are clicked
State State will be managed through SharePoint designer workflow so you will not set it from the InfoPath at all.

So your from will look like this:
image

– Go to (on InfoPath ribbon) Page Design Tab || (In Views buttons’ group) New View
image
– Create new 5 views as the following ( for more details review the video on the top of this section ):

View Name Description ( for explanation )
EmployeeView View that will be seen by employee
TeamLeaderView View that will be seen by Team Leader
HumanResouceView View that will be seen by Human Resources
AccessDeniedView View that will be seen by any user who tries to enter the form while he is not suppose to ( i.e. Employee tries to enter the form if the leave is waiting Team Leader action )

Now; you need to start filling the views with controls:
– To Copy all the content from Edit view to all other views; Go to ( in InfoPath ribbon )Page Design Tab || (under Views Group) Select Edit item (default) view || CTRL+A || CTRL+C
image

– Paste the selected controls into EmployeeView. then add a title for this form “Welcome Employee”, then remove Team Leader Comments & Human Resources comments.

– Now;place the cursor at the bottom of the form, then Go to (in InfoPath ribbon) HomeTab || (under Controls group ) Select Button to add two buttons || right click on the first button || select Button properties || Type Submit on the label field || do the same for the second button and name it Cancel. so you form will look like this:
image

– Do the same for TeamLeaderView and HumanResoucesView (Considering keeping the comments if needed)so that they will look like:
TeamLeaderView:
image

HumanResoucesView:
image

Finally, we will have access denied view which will look like:
image

At this moment; we have all the possible views; now we need to tell Infopath which view to show at the right time.. so the logic will be as the following:

ViewName When to show
Employeeview if State is blank ( in creating new item )
TeamLeaderView if State is WT ( Waiting Team leader actions)
HumanResoucesView if state is WH ( waiting Human Resources actions)
Access denied To manage unauthorized access; if the (State isWT and current User is not the selected Team leader) or ( when State is WH and the current user is not the selected Human resources )

So how we need to implement this.. let us go…
– Go to (In InfoPath ribbon) Data Tab || (under Rules group) Click on Form Load || (on the right side ) Click on New || Action || In Details for: Type ShowEmployeeview|| Set the Condition: as described in the above table (State is Blank), Click on Add || Switchviews ||  and set the proper view in the actions ( for more information review the video at the beginning of this section ) So you will have something like the following:
image

– Do the same for the rest of the views ( see the video from more information ) so you will got something like the following:
image

Setting employee, Team leader and human resources views are relatively easy; you man need to watch the video for Access Denied view

Notes:
    AccountId for people picker returns a string on the following format “DomainName\UserName” but UserName() function on the InfoPath build-in functions returns a string on the following format “UserName” so when checking on the current user; you need to compare using like this AccountId ==concat(“DomainName\”,UserName()).
    The right way of handling the access denied is using SharePoint SPItem event receivers, so that you need to manage the permissions on the list item through SharePoint object model ( item added & item updated events) but this is out of the scope of this document as everything should be done out of the box without any line of code.
    Selecting Team leader and Human resources by the employee is not common case, most likely you will have those values stored in SQL or Oracle database or may be in some SharePoint list or in Active Directory structure, you can connect to these sources using InfoPath receiver connections and filling them on the Form load rules, but I did not implement this because internet is full of articles talking about this subject. checkthis example – getting user information and set people selector value for more information about this.
Here! it is good idea to publish the form and test it ( the view should show employee view not the default edit item view )

Back
3.2 Disable enable controls according to current state.

Step 3.2 is illustrated on this video:

Disable Enable controls according to current state

 

As we may know, and according to the analysis in the previous article, some of the controls should be editable and others should be read only, so this part of this article will discuss how can we achieve that using InfoPath forms.
We have two options to disable/enable controls on the page:
 Control properties: there is a property available from some controls ( like text box ) which called read only, so we can use it to make the fields read only
 Control Rule – Formatting: We can apply some conditional formatting rule on the control ( disable the control if some condition is applied )
we need to modify the views to achieve the following:

Field Name Employee Team Leader Human Resouces
From Edit Read Only Read Only
To Edit Read Only Read Only
Team Leader Edit Read Only Read Only
Human Resource Edit Read Only Read Only
Employee Comments Edit Read Only Read Only
Team Leader Comments Not visible Edit Read Only
Human Resources Comments Not visible Read Only Edit

– Go TeamLeaderView || Select (One Click on) From Field || (on the right side under the Rules pane) Click on New || Formatting
image

Add the following to the rule:

Details for DisableFromDate
Condition State=”WT”
Disable This Control Checked

So you will have something similar to (this screenshot is for Human Resources view! )
image

– Do the same for the other fields mentioned in the table above ( check the video for more details )

Back

3.3 Validating and submitting the leave request.

Step 3.3 is illustrated on this video:

Validating and submitting the leave request

Now we will move the final step of developing the InfoPath form before going through the SharePoint designer details,

There are two types of validation that can be achieved in InfoPath:
1- Simple Validation: like required, or date should be on specific format …etc., Fromfield in the EmployeeView is a good candidate for such validation
2- Complex validation: this is the validation that depends on some business like the comments of team leader is required only if the decision is rejection.

so let us start by the simple one:
– Go to EmployeeView || right click on From Control || Date Picker Properties || (under Data Tab under validation group) check Cannot be blank.
– Do the same ToTeam LeaderHuman Resources & Employee Comments ( check video for more details )

Complex validation will be handled on submitting the request so let us learn how to submit the request to the document library…
– Go to EmpolyeeView || one Click on Submit button || Create new Rule:

Details for Submit Employee
Condition
Actions Set Field; Action = “SE”
Submit Data
Close the form

– Go to EmployeeView || one click on Cancel button || Create new Rule ( this will simply enable the user to close the form )

 

Details for CancelEmployee
Condition
Actions Close Form

– Go to TeamLeaderView || one click no Approve button || Create new Rule:

Details for ApproveTeamLeader
Condition
Actions Set Field; Action=”AT”
Submit Data
Close the form

– Go to TeamLeaderView || one click on Reject button || Create new Rule:

Details for RejectTeamLeader
Condition
Action Set Field; Action=”RT”
Submit Data
Close the form

– After that, you need to go to the TeamLeaderComments field and add the following validation Rule:

Details for CommentsIsRequiredOnrejection
Condition Action=”RT” and TeamLeaderComments is blank
Screen Tips Comments is required on rejection

– Do the same for the rest of actions ( cancel Team Leader, Approve Human Resource, Reject Human Resource and Cancel Human Resource )

Back

4. Build SharePoint designer workflow

 

Now, let us move to SharePoint designer workflow to build the business process…
– From start menu || SharePoint designer 2010 || Open Site || Locate your site collection (where you created the Leave Request Container list ) || Click Open || enter username & password if needed.
Back

4.1 Building the logic

Step 4.1 is illustrated on this video:

Building the logic

– On the Site Objects (menu in your left hand side) Click on Lists and Libraries || Click on Leave Request Container || (scroll down little bit ) (Next to Workflows label) Click New:
image

– Fill the Create List Workflow – Leave Requests Container as the following:

Name Leave Request
Description This will handle the business process of the leave request.

– Click on Step 1 and rename it to Employee Submission
– Right click in the empty space under the Employee Submission Step and Click on Step to add a step, call it Team leader approval and do so for Human Resource approval:
image

– Click inside Employee Submission step || (in the ribbon under workflow tab)Conditions ||  click If Current field equals value

image

– ( inside the Employee submission step) click on field  and select Action and click onvalue and select SE.

– Place the cursor under the newly added condition || (in the ribbon under workflowgroup) || Actions || set field in the current item:

image

 

– (inside the employee submission step) click on field and select Status and click on value and select WT( waiting Team leader approval )

– Place the cursor under the newly added activity|| (in the ribbon under workflow group) || Actions || Wait for Field Change in Current Item:
image

– (inside the Employee Submission step) click on field and select Action and click on equals and change it to not equals, finally; click on value and select SE( this will be triggered once the team leader approve or rejects the leave request) so the final result should look like:
image

– In the next step ( Team lead approval ) add the following ( review the video for the details):
image

– In the next step ( Human Recourse Approval ) add the following:
image

– Click on Save Icon.

Now, we need to tell the Leave Request Container list to start this workflow once a new item is created.. so let us do it…
Go to (on the Site Objects menu) Workflows || right click on Leave Request || Workflow Settings ||under the Start Options clear the Allow this workflow to be manually started and check Start workflow automatically when an item is created.
image

– Now publish the workflow by clicking on publish button as described bellow:
image

Now workflow should be deployed on the list and you can test that the workflow at this stage!

Back
4.2 Adding tasks assignment, email notifications and history

Step 4.2 is illustrated on this video:

Adding Tasks assignment, email notifications and history

Workflow logic is 100% done, but workflow means nothing for users unless there is notifications sent on triggers and tasks assigned as well, and some reference reporting system ( history list )

– Go back to the workflow designer || right click on the small space under Set State to WT in theEmployee Submission step || select Send an Email.
image

– Then click on the these users, then fill the Define E-mail Message as the following ( review the video for more details )

To: CurrentI Item:Created By ( Click on the book icon next to Text box || Double click on Workflow Lookup for a User || (in field from source)  select Created By || (in the Return field as) select Email Address
CC:
Subject: Leave Submitted
Body Dear [%Current Item:Created By%]
You have successfully submitted you leave request
Regards
System Administrator

 

– Add anther Send an Email action to notify Team Leader to approve it, review the video if you want to know how you can send a link to the item through this email

Now we will assign a task for the team leader:
– Place the cursor after the email Send an Email activity and right click and select Assign a To do Item:
image

– Click on to do item then you will got the form that enable you fill the Name and Description of this task type, fill the fields like the following:

Name Leave Request – Approve Team leader
Description This task is for team leader to approve the leave request

 

– Click on these users || Double click Workflow Lookup a User… || in Field from Source selectTeam Leader || Return field as: || Login Name

– Again… Click on Publish.

– Do the same for the remaining Steps ( Team leader approval & Human Resource approval )

Now we will add the history ( we may do reporting through XSL or object model later on )
– Place the cursor after the email Assign To do item activity and right click and selectLog to History List || click on this message || open the edit box through clicking on the button next to the text box || in this free space; you can dynamically build what ever string you want
image

 

 

Who are feel its good to learn,then we say thanks to Jamil Haddadin

Cheers:)

 

Advertisements

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s