...
- Click the Edit icon for the Leave Approval Form to add the Leave Request section. You may notice the Employee Information section is collapsed in the images for this section.
- Drag and drop a Section control below the Employee Information section. Look for the green down arrow. Name it Leave Request.
- Drag a Date control from the palette and drop it into the Leave Request section. Change the label to Start Date. Change the width to 6 columns. Check the Required property.
- Drag a Number control from the palette and drop it into the Leave Request section to the right of Start Date. Change the label to Number of Days. Change the width to 6 columns. Check the Required property.
- Drag a Radio control from the palette and drop it under the Start Date field.
- Change the control label to Type of Leave, delete the default options, and add these choices for the options: Annual=Annual Leave, Floating Holiday=Floating Holiday, Sick=Sick Leave, Compensatory=Compensatory Leave, Other=Other Leave
- Check the comment box and specify 1 as the number of rows. Check the Required property.
- Click the Style tab and add a value of 30% to the Item Width. This changes the layout of the options from vertical to horizontal.
- Create the Certification question that will appear when the employee checks the Sick Leave option by dragging a T/F control from the palette and dropping it below the Type of Leave control.
- Change the label to say "I certify that the above listed leave was entirely due to personal illness" and the name to Certification. Do not check the Required property for this control.
- Uncheck the Visible checkbox on the Certification field. This field is not visible on the form unless the Employee selects Sick Leave as the Type of Leave. This will be handled by a rule discussed later.
- Drag a Textarea control from the palette and drop it below the Type of Leave control inside the Leave Request section when you see the green down arrow.
- Change the label to Comments. Do not check the Required property for this control.
- Select the section by clicking on its header.
- In the properties panel, select the Security Tab.
- You can set up this as a Signed Section. Two types of signatures are available from the Signature drop down: Text/Signature Image or Wet Signature. Here is information about the difference between the signature types. Select Text/Signature from the dropdown.
- Check the Must Sign checkbox to require the signature and verify that the Lock checkbox is checked to prevent tampering with the signed data .
- Notice that a "Sign this section" button and a pencil icon with a line appear at the bottom right and left of the section when the signature type is selected.
- The Employee will have to sign the section before it can be submitted.
- Click the Save and exit icon to save work you have done so far.
...
We will add one business rule to show/hide the Certification control if the employee checks the Sick option in the Type of Leave dropdown. Follow these steps:
- Click the Edit icon for the Leave Approval Form.
- Click on the Rules icon in the designer toolbar.
- Click the plus icon to Create a new rule.
- Change the name of the rule to Sick Certification.
- Copy/Paste the rule below into the Rule box.
Code Block |
---|
if (TypeOfLeave.value === 'Sick') { Certification.visible = true; Certification.required = true; } else { Certification.visible = false; Certification.required = false; } |
6. Click the Save and exit icon to save the rule and the form.
Test the Leave Approval Form
- Click the Test icon.
- Fill in the information in the Employee Information and Leave Request sections. Notice that you must fill in all required fields and that all fields must contain valid data. For example, the image shows an empty required field (Manager Id) and an incomplete email address displayed with an orange background. The user must correct these issues before the form can be submitted.
- Check Sick for the Type of Leave.
- Verify that the Certification control displays when the Sick option is selected as the Type of Leave option and that it is hidden when any of the other choices are checked.
- Click the Sign this Section button to sign the form as the logged in user, in this case, the designer.
- Correct any validation issues. Click submit.
...