Part 2: Forms
Part 2 of this tutorial expands on the forms component created in the basic Leave Request application.
In this part, you will learn:
- How to add a SmartObject as a control's data source (in this sample, using a SmartObject to populate a drop-down list control)
- How to add a new control to a view and make the control read-only
If you have not completed Part 1 of this tutorial yet, please do so now since you will be using the updated SmartObjects from Part 1.
Step 4 Tasks
- Edit the Leave Request item view and change the data source for the Leave Type drop-down list from static to the Leave Types SmartObject. Make the LeaveTypeDescription property the control's Display and Value.
- Add a new row to the view layout just above the Create button row. Add the Approver Comments field to the new row, moving the label to the first cell and the field to the second cell. Make the field read-only by default.
- Right-click and check out the Leave Request Item View, then select Edit from the Properties pane. (You may have to select the title again to see the Edit link.) The View should open in Edit mode and jump to the Layout screen.
- In the K2 Management site, expand the Categories > K2 Learning > Leave Request > Views nodes.
- Click to highlight the Leave Request Item View in the Management site menu. The view properties are displayed in the central pane. Click the Design link in the upper right corner of your screen.
- The K2 Designer will open in a new tab on your browser. With the item view highlighted, click Edit.
- Click the Leave Type drop-down list to highlight it. (If you see a dialog indicating the view is not checked out, click Yes to check out the view and continue.) In the Properties pane, open the Data Source editor. (A below)
- Select the Use a SmartObject as data source option, then click the SmartObject browse button
- Navigate to, then select the Leave Types SmartObject that you created in Part 1. Click OK.
- Change the Value to the LeaveTypeDescription property so that it matches the Display
- Click OK to return to the View Designer canvas
- First, you will add a new row to your view layout table so that you have a location for the new Approver Comments field and label. Click once in the bottom row, first cell, to highlight the cell. Click the Insert Row Above icon found in the View Menu to add a new row.
- In the Fields pane, scroll through the fields until you find the new Approver Comments field. Drag the field into the second cell of the new row you just created in the layout table.
- Notice that K2 has placed the Approver Comments label to just above the field. Click and drag the label into the empty cell to the left.
- You have two minor adjustments to make to the new label and field. First, highlight the label, then locate the Text value in the Properties pane. Add a colon (:) to the end of the text value so that it matches the other labels in the view.
- Now highlight the field itself and locate and CHECK the Read-Only option (again, in the Properties pane) so that the field cannot be edited by the form originator. (Later on, you will use a rule to enable the field for the manager so they can add comments.)
- In this step, you will delete the Request Status label and field. This field value is updated by the workflow and is displayed in the Previous Leave Requests list view. It could be confusing to the user if it is displayed on the Leave Request form, so you will remove it. Select the Request Status Text Box to highlight it, then click the delete button (on your keyboard). Repeat this process for the Request Status Label. (You can delete the table row if you wish using the Delete Row icon from the View Menu.)
- Click Finish to save and exit the view. Highlight the view title in the Category Browser (if it is not already) then click the Run link found in the Properties pane. Confirm the Leave Type drop-down list now contains the values from the Leave Types SmartObject, as shown below.
- Click once again on the Leave Request Item View title to close the Run screen.
In the next few steps, you are going to replace the static values for the Leave Type drop-down list to the Leave Types SmartObject data source values.
In the next step, you will edit the view layout and add the new Approver Comments field.
STEP 4 REVIEW
In this exercise, you edited the Leave Request item view by changing the data source for the Leave Type drop-down list from a static value to a dynamic value that is retrieved from an external SQL database. Then you added the Approver Comments field to the view and made it read-only by default. You will enable the control in a later step so that the manager can add comments. Finally, you deleted the Request Status field to eliminate any confusion to the user submitting the form. This field is updated by the workflow and not the user.
This concludes the initial view changes you will make for this tutorial. In Part 3: Workflow, you will edit the workflow to add more steps, and then come back and edit your forms for the additional workflow tweaks.