Summary: Learn how to customize the Duet Workflow Task form using InfoPath Designer.

Applies To: SharePoint Server 2013, Duet Enterprise 2.0, SharePoint Designer 2013, InfoPath Designer 2013, InfoPath Filler 2013

Published: January 2013

Contents

• Introduction
• Displaying the SAP business properties
• Adding and deleting controls on the form
• Adding heading images to the form and applying a theme

After a task site is published through SharePoint Designer, the task form ApprovalProcess.xsn is generated. The form has a default layout. But we may also want to display the SAP business properties, add some more controls relevant to the use of the form, or delete some irrelevant controls. We may also want to give a nice look and feel to the form. We can do these customizations easily with the help of InfoPath 2013.

Scenario

We have published a task site of the task type TestTask using SharePoint Designer 2013. The task form has the default layout shown below. We want to customize the form to include a SAP business property, add a control, remove a control, add a heading image, and apply a theme.

Figure 1. TestTask task form with default layout

Prerequisite: We can display the SAP business properties in the workflow task form provided that we have included the properties in the Extended Business Properties text box while creating the task site.

Steps:

1. In SharePoint Designer, click ApprovalProcess.xsn.

Figure 2. ApprovalProcess.xsn in SharePoint Designer

InfoPath Designer opens with an auto-generated layout of the form.

Figure 3. InfoPath Designer with auto-generated layout of the TestTask form

2. Insert a new row, wherever you want, for the business property LeaveDaysUsedTillToday that you want to display in the form.

a. In the first column, enter the field name as you want to see it displayed in the form, for example, Leaves Used Till Today.

Figure 4. Entering field name in the first column

b. In the second column, we need to get the value for the business property LeavesUsedTillToday from the Workflow Business Document Library. Thus, we need to create a secondary data connection with the Workflow Business Document Library.

3. Create a secondary data connection with the Workflow Business Document Library as follows: 

a. Under Actions, click Manage Data Connections.

Figure 5. Clicking Manage Data Connections in InfoPath

The Data Connections dialog box appears.

Figure 6. Data Connections dialog box

b. In the Data Connections dialog box, select Context  from the list of Data Connections for the form template, and click Add. The Data Connection Wizard starts.

Figure 7. Data Connection Wizard

c. Click Next without changing any settings. The wizard now asks for the source of data. Select SharePoint library or list as the source of data.

Figure 8. Selecting SharePoint library or list in the Data Connection Wizard

d. Click Next. The wizard now prompts you to enter the location of the SharePoint site.

e. Enter the URL of the task site, and click Next.

Figure 9. Entering task site location in the Data Connection Wizard

f. Select the Workflow Business Data Document Library for the data connection, and click Next.

Figure 10. Selecting Workflow Business Data Document Library for the data connection

g. Select the Title and LeavesUsedTillToday fields, and click Next. The Title field will help us filter the data corresponding to a task from the Workflow Business Data Document Library. The Title field is the concatenation of the Related Content field in the main data connection and the string ".xml".

Figure 11. Selecting the Title field and LeaveDaysUsedTillToday field

h. Click Next.

Figure 12. Data Connection Wizard

i. Click Finish.

Figure 13. Finishing the Data Connection Wizard

j. Closethe Data Connections dialog box that now has the data connection to the Workflow Business Data Document Library.

Figure 14. Data Connections dialog box with the new data connection

4. Click in the second column of the new row that we inserted in step 3. On the Home tab in the ribbon, click Calculated Value (fx) button in the Controls pane.

Figure 15. Choosing Calculated Value in InfoPath

The Insert Calculated Value dialog box appears.

5. Click the fx button next to the XPath text box.

Figure 16. Insert Calculated Value dialog box

The Insert Formula dialog box appears as shown in the following figure.

6. Click Insert Field or Group.

Figure 17. Insert Field or Group button

The Select a Field or Group dialog box appears, as shown in the following figure.

7. Click Show advanced view.

Figure 18. Show advanced view link

Now, we have the option to select the data connection also. 

Figure 19. Select a Field or Group dialog box

8. Select the secondary data connection to the Workflow Business Document Library from the drop-down list.

Figure 20. Choosing a secondary data connection

9. Expand the dataFields tree structure until you see LeaveDaysUsedTillToday. Select LeaveDaysUsedTillToday. Since we want to get only the business property for the corresponding task, we need to filter the data received from the data connection. Click Filter Data.

Figure 21. Filter Data button

10. The Filter Data dialog box appears. Click Add.

Figure 22. Add button in the Filter Data dialog box

The Specify Filter Conditions dialog box appears.

Figure 23. Specify Filter Conditions dialog box

11. Specify the filter conditions as follows:

a. In the first drop-down list, choose Select a field or group.

Figure 24. Choosing Select a field or group

b. Choose Workflow Business Data Document Library as the data source.

c. Expand the dataFields tree structure until you see Title. Select Title, and then click OK.

Figure 25. Title in the Select a Field or Group dialog box

d. In the second drop-down list in the Specify Filter Conditions dialog box, select is equal to.

e. In the third drop-down list in the Specify Filter Conditions dialog box, select Use a formula.

Figure 26. Selecting Use a formula in the list

f. The Insert Formula dialog box opens. Click Insert Function.

Figure 27. Insert Function button

The Insert Function dialog box opens.

Figure 28. Insert Function dialog box

g. Select Text in the Categories list, and then select concat in the Functions list. Click OK.

Figure 29. Choosing category and function

The formula corresponding to the selection appears in the Insert Formula dialog box.

Figure 30. Concat Formula prototype (skeleton) in the Insert Formula dialog box

h. Double-click the first argument in the concat function. The Select a Field or Group dialog box opens. Under the Main data connection, expand the dataFields tree structure till you see Related Content. Select the subfield :Description under Related Content. Click OK.

Figure 31. :Description subfield under Related Content

i. Write the string ".xml" as the second argument in the concat function. Delete the comma following the second argument and the third argument.

The updated formula is as shown in the following figure. Click OK.

Figure 32. Updated concat formula (with provided arguments) in Insert Formula dialog box

j. Click OK in the dialog boxes in the order: Specify Filter Conditions, Filter Data, Select a Field or Group.

The final overall formula appears in the Insert Formula dialog box. (This dialog box was opened in step 5 and is still open)

Figure 33. Final formula in the Insert Formula dialog box

12. Click OK in the Insert Formula dialog box (shown above) to return to the Insert Calculated Value dialog box where the XPath corresponding to our selections has been updated.

Figure 34. Updated XPath in the Insert Calculated Value dialog box

Click OK.

13. Click the File tab on the ribbon. Click Quick Publish.

Figure 35. Publish your form

14. The Save As dialog box opens.

Figure 36. Saving the form template

15. Click Save. The Microsoft InfoPath dialog box stating the successful publishing of the form template appears. Click OK.

Figure 37. Form template published successfully

16. Open the task site and look up any of the tasks. The task appears as shown in the following figure. The SAP business property LeavesUsedTillToday has the value 10 in this task.

Figure 38. Task on the task site with LeavesUsedTillToday business property

Suppose we want to add a control—for example, ID—from the main data connection to the workflow task form, and delete the control Consolidated Comments from the form.

1. Insert a new row for the ID field.

Figure 39. Inserting a new row for the ID field

2.  Drag the ID field from the Fields task pane onto the canvas. The label for the control appears automatically in the left column when you drag the field into the right column of the table. However, this is true only if you highlight both columns when you release the mouse.

Figure 40. ID field in right column

3. Delete the row containing the control for Consolidated Comments.

Figure 41. Consolidated Comments row deleted

3. Click the File tab on the ribbon. Click Quick Publish. The Microsoft InfoPath dialog box stating the successful publishing of the form template appears.

4. Click OK.

5. Open the task site and look up any of the tasks. The task appears as shown in the following figure. The task has the ID field with value 1 and no Consolidated Comments control.

 
Figure 42. Task on the task site with ID control and without Consolidated Comments control

1. Place your cursor in the title area of the page layout. Add a title—for example, MyTask—in the required format and font.

Figure 43. Title area of the page layout

2. Add the heading image to the form by inserting a picture from the Insert tab on the ribbon.

3. On the Page Design tab, apply the Professional – Standard theme. The easiest way to select the theme is to expand the Themes gallery by clicking the arrow at the lower-right corner. Professional – Standard is the first theme in the Professional section.

Figure 44. Page Design tab

The title, heading image, and page design should now resemble the following figure.

Figure 45. New title, heading image, and page design

4. Click the File tab on the ribbon. Click Quick Publish. The Microsoft InfoPath dialog box stating the successful publishing of the form template appears.

5. Click OK.

6. Open the task site and look up any of the tasks. The task appears as shown in the following figure. The task has the desired heading image and theme.

Figure 46. Task on the task site with desired heading image and theme