Jamil Haddadin

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 2010, Microsoft InfoPath 2010, SharePoint 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 Request business 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.1, 1.2 & 1.3 are illustrated on this video:

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

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 Administration) Site Collection Features || (Next to SharePoint Server Enterprise Site Collection Features) click Activate

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 Employee, Team 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 under Groups)

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

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

Back

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

– (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.

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 type Leave Request. || Click OK

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.

Create 6 new columns with the following specifications:

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 to Team 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 employee, AT is Approve by Team Leader, RT is Reject by Team Leader, AH is Approve by Human Resources and RH is Reject by Human Resources.
    I am using abbreviations for States; WT is Waiting Team Leader, WH 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:

– (on quick launch) click on Leave Request Container || (in the SharePoint ribbon) List Tab || 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.

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

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:

So your from will look like this:

– Go to (on InfoPath ribbon) Page Design Tab || (In Views buttons’ group) New View

– Create new 5 views as the following ( for more details review the video on the top of this section ):

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

– 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) Home Tab || (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:

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

HumanResoucesView:

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

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:

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 || Switch views ||  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:

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

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. check this 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:

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:

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

Add the following to the rule:

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

– 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:

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., From field 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 To, Team Leader, Human 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:

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

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

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

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

– 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:

– 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:

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

– 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:

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

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

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

– (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:

– (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:

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

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

– 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.

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

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:

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 the Employee Submission step || select Send an Email.

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

– 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:

– 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:

– Click on these users || Double click Workflow Lookup a User… || in Field from Source select Team 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 select Log 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

Back

Conclusion:

• The story of SharePoint designer workflows & InfoPath forms, can be summarized in the following logic:
  • Remember that the only way of communication is through list fields.
  • You simply submit some values & the action from InfoPath to SharePoint list ( which has the SPD workflow deployed on it)
  • SharePoint workflow change the state ( which is also a field in the list as you have seen) according to implemented logic
  • Then InfoPath form views will be loaded according to this state.
• InfoPath forms & SharePoint designer workflows is a good option for somebody who doesn’t know how to code, or for some quick projects that doesn’t not need that customization, as you can see; there is still some limitations in the UI or on the pattern that is followed in the process; As you can see; 1 hour was enough to finish a business process that may be fully utilized in a real life  scenarios ; so this is the value of SharePoint out of the box implementation.