Developing Online Forms using InfoPath and MS Workflow

(1)

Developing Online Forms

using InfoPath and MS Workflow

Dave Smaldone

Director, Administrative Information Systems Mount Ida College, Newton, MA

(2)

2

This session will cover:

• Steps involved in developing online forms using InfoPath Designer • Publishing the forms to the library in SharePoint *

• Provide a link to the form in PowerCampus Portal using a

Summary Link Web Part

• Developing corresponding workflows, using MS SharePoint

Designer, for automated email notifications

(3)

(4)

4

Identify the Form

• Identify the form to be automated

• Print the form in order to have a physical copy to work with and mark up

• Determine the form layout, and markup the form as needed

 Are all the fields on the existing form required with the online version?

 Are there any new fields that should exist, now that the form will be online?

(5)

5

Create a Form Library

• Create a form library on the desired PowerCampus Portal site • Using Form Library Settings, ensure the form is opening in

web browser

• The library name should match the name of the form to be developed

(6)

6

Create a Form Library

• Navigate to Site Actions -> Settings -> Site Administration -> Site libraries and lists -> Create new content -> Form Library

(7)

7

(8)

8

Create a Form Library

• Need to display the form as a web page

• Once the form library has been created, navigate to Settings -> Form Library Settings for that new form library

(9)

9

Create a Form Library

• Navigate to Advanced Settings

-> Display as a Web page Yes -> Search results set to No -> Click [OK]

(10)

10

Contribute Permissions

• Contribute Permissions will allow users to submit their form online.

• Navigate to Settings -> Form Library Settings -> Permissions and Management -> Permissions for this form library

• Check that the proper SharePoint User Names(s) have

(11)

(12)

12

Design the Form

• Open InfoPath Designer

• Each form can have multiple tables, for a consistent layout • Logo, form title, and revised date

• Standard fields: Today’s Date, Student Name, Student ID#, email address, and phone number

(13)

13

Design Tasks - Controls

• Click and drag to insert controls to the form

(14)

14

Controls – Text Box

• When you want a field

on the form to be required, and thereby identified to the user with a red asterisk * check the “Cannot be blank” check box, for the given data entry element

• In this case, Student Name cannot be blank when the user attempts to submit the form

(15)

15

Design the Form - Views

• When you have completed the essential layout and design of the form, create a new view named DataValidation

(16)

16

Design the Form - Views

• Copy and paste all the content from the original/default form, onto the new DataValidation view

(17)

17

Design the Form - Views

• Copy and paste all the content from the original/default form, onto the new DataValidation view

(18)

Design the Form

Data Connection Wizard

(19)

19

Data Connection Wizard

• One data connection must be completed per form

• This determines what occurs when the user clicks [Submit] • In design mode, navigate to Tools -> Data Connections…

(20)

20

Data Connection Wizard

(21)

21

Data Connection Wizard

• The File name should be unique enough to distinguish each possible submitted form

(22)

22

Data Connection Wizard

• Enter a name for this data connection

(23)

Design the Form

Data Validation

(24)

24

Data Validation - Rules

• Via the buttons’ Properties, add Rules to the [Submit] and [Cancel] buttons, that take data validation into consideration

(25)

25

(26)

26

(27)

27

Data Validation – Modify Rules

• If the existing Condition is TRUE, switch to the

DataValidation view

(28)

28

Data Validation - Rules

• Via the buttons’ Properties, add Rules to the [Submit] and [Cancel] buttons, that take data validation into consideration

(29)

29

Data Validation – Form Complete

• Submit the form using previously defined data connection • Stop processing rules when this rule finishes

(30)

30

Data Validation – Cancel Rule

• The purpose of the [Cancel] button is to close the form • When user clicks [Cancel], the rule is simply “Close Form”

(31)

(32)

32

Publish the Form

• In designer mode, navigate to File -> Publish

(33)

33

Publish the Form

• Enter the entire path for the location of the existing forms library

(34)

34

Publish the Form

(35)

35

Publish the Form

• Select and highlight the previously created Form Library (which is the same name as the form)

(36)

36

Publish the Form

• Identify the columns that you want to see listed for each submitted form – these become the columns in the library

(37)

37

Publish the Form

• Click [Publish]

(38)

38

Obtain URL for New Blank Form

• Navigate to the Form Library

• Select New Document

• With the new blank form open, cut-and-paste the entire URL into an editor

• The URL for the new blank form will be needed later when creating a link in PowerCampus Portal, using the Summary Link Web Part

(39)

39

Obtain URL for Completed Form

• With the new form open, fill it out as required and click [Submit] • Click the link of the new form entry to open the form

• With the completed form open, cut-and-paste the entire URL into an editor

• The URL for the completed form will be needed later when setting up a workflow and email notification

(40)

Provide Link in

PowerCampus Portal

(41)

41

Summary Link Web Part

• Navigate to the desired PowerCampus Portal site, and add a

Summary Link web part that will list the form(s)

• Modify the web part with title, border, and targeting, as needed

(42)

42

Summary Link Web Part

• Enter the URL that you captured earlier, of the new blank form,

but also removing the PowerCampus Portal’s web address from the beginning of the link

(43)

43

URL of Blank Form

• ** PLEASE NOTE this slide was not a part of the day’s

presentation, and subsequently added for clarification **

• With regard to the URL that was captured earlier, of the new blank form, you will also want to remove a portion of the text in the middle of the URL.

• Why? You can test this and see what happens… if you leave the blank form URL as it is… when the user submit’s their form, they are then re-directed to the actual form library. However, perhaps because of security reasons, you would not want the typical end-user to navigate there, nor have access to see all the other forms that have been submitted, and possibly delete them!

• So instead, by removing a portion of the URL, when the user submit’s their form, this newly edited URL will then re-direct the user back to the home page, or the site that you choose.

• In the blank form URL, locate the name of the Form Library, and delete that text from the URL up to &DefaultItemOpen=1, as underlined below:

• “https://...%2FRoom%2520Change%2520Request%2FForms%2FAllItems% 2Easpx&DefaultItemOpen=1”

• The edited, slightly shorter URL is what you want to ultimately cut-and-paste into the Summary Link Web Part

(44)

(45)

45

Creating a Workflow

• Workflows are created using MS SharePoint Designer • Workflows determine what occurs once the form has been

submitted online • In this example:

 An email confirmation is immediately sent to the person that submitted the form.

 An email notification is immediately sent to the people or offices that have to be informed of submissions. This email includes a link to the submitted form.

(46)

46

Creating a Workflow

• Give a name to the workflow

• Attach the workflow to an existing Form Library

(47)

47

Workflow Steps

• Email Confirmation is immediately sent to the person

that submitted the form.

• Email Notification is immediately sent to the people or

offices that want to be informed of submissions.

(48)

48

Add Lookup Body

• Using [Add Lookup Body], you can insert data items/values from the submitted form

(49)

49

Email Notification

• Subject:

Room Change Request has been submitted online • Body:

This is an automated email is to inform you that [%Room

Change Request:Student Name%] has submitted a Room

Change Request on [%Room Change Request:Modified%] • <a href="cut-and-paste entire URL from the completed

(50)

50

Add Lookup Body

• Using [Add Lookup Body], be sure to remove the actual

name of the submitted form from the copied URL, and replace it with [%Room Change Request:Name%]

<a href=" … Request/dsmaldone_2014-06-05T14_07_16.xml&Source= … ">Click here

to see the form</a> becomes:

<a href=" … Request/[%Room Change Request:Name%].xml &Source= … ">Click here

(51)

51

Workflow Maintenance

• When modifying an existing workflow, be sure to remove the existing workflow before saving your edits

• Navigate to Permissions and Management -> Workflow Settings -> Remove a Workflow

(52)

52

To Review

• Create a Form Library • Design the Form

 Data Connection  Data Validation

• Publish the Form

• Add a Link to the Summary Link Web Part • Develop Corresponding Workflow

(53)

(54)

54

Developing Online Forms using InfoPath and MS Workflow