Thank you for your interest in frevvo . The steps and accompanying video will guide you through the creation of a form that can be used by any HR department for employee Leave Approval requests. When this form is completed you can easily incorporate it into a workflow.

We strongly recommend that you jump directly to the Forms Tutorial if you are already comfortable with the drag and drop feature. The Forms Tutorial is a quick introduction to many of the basic features and controls available in the form designer. If you prefer detailed step by step instructions to help you make your first form then continue with this tutorial.

Create the Leave Approval form.

The Leave Approval form you are going to create contains two sections: one to collect information about the employee requesting the Leave and a second section to collect details about the leave and the employee's signature. The form will contain one business rule to show/hide a verification field if the employee selects the sick option as the type of leave.

Watch this video and/or follow the steps below to begin. View this video in 720 HD and theater mode or full screen, if available. Click the Youtube button if you prefer to watch it there. Make sure that closed captions (cc) is turned on.

Add the Title and the Employee Information Section

Logon to your tenant as the designer.
Click the New icon to add a new application.
Click the Properties icon. Change the name of the application to My Company HR. Click Update.
Click the Edit icon for the My Company HR application.
Click the New icon to create the Leave Approval form.
The New Form wizard displays listing any forms that have been published as templates. Since there are none listed, click Finish to accept the Blank template for your form..
Change the name of the form to Leave Approval Form on the form Properties pane.
Drag a Message control from the palette and drop it onto the canvas when you see the green double drop arrows.
Change the Message text to Leave Approval. Change the Message Type to None by selecting it from the dropdown.
Click the Style tab on the Properties pane for the Message control. Type blue for the Background color, white for the Label Color. Select large for the Label Size. Check the Bold and Center checkboxes, if desired.
Drag a Section control from the palette and drop it below the Message control. Look for the green up arrow.
Click on the section label and change it to Employee Information.
Drag a Text control from the palette and drop it into the Section control when you see the green double drop arrows.
Click on the properties tab for this text control. Click on the Styles tab. Change the width of the control by selecting 6 columns on the grid. Click on the text control label and change it to First Name.
Check the Required property on the Settings tab for the First Name control.
Drag a second text control from the palette over the first name and drop it when you see the right green arrow. This should position the second text control to the right of the first one.
Click on the second text control label and change the label to Last Name. Check the Required property.
Drag a third text control from the palette over the Last Name control. Drop it when you see the right green arrow. Using the Email takes advantage of built-in validation:
Click on the third text control label and change the label to Manager Id. Check the Required property.
Drag an Email control to the right of the Manager Id control. Drop it when you see the green right arrow. The
Click on the Email control label and change the label to Email. Check the Required property on the Settings tab.
Click the Preview Form icon on the designer toolbar to see how your form will look to users.
Click the Close this Window now link to return to the designer from Preview mode.
Click the Save and exit icon to save work you have done so far.
Continue with the instructions to add the Leave Request Section to the form.

Create the Leave Request Section

This section is filled in by the Employee who is requesting the leave.

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.

Add a Business Rule

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.

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.

If you prefer step by step instructions to create a Leave Approval workflow, click here.

We strongly recommend that you jump directly to the Flow Tutorial if you are already comfortable using the flow designer. The flow tutorial assumes that you have some basic understanding of the flow designer. The Flow Tutorial teaches you important flow design patterns and increases your skills using the many flow designer features.

Related Topics

Detailed information about all of the features and functions available with can be found in the User's Guide. For example, you can find the details about such topics as:
1. Where does the form data go when the user clicks the submit button? This is controlled by your form's Doc Action. A common action is to Email data to a specified address
2. What does the user see when they click the submit button? This is controlled by your form's Form Action .
3. Want to make your form accessible to everyone? The owning designer always has access to the form but may configure selected users and/or roles (i.e. users with these roles) to have runtime access to the form. See how to make your form's visibility private, public in tenant, public or custom.
4. Want to add some colors or tighten up your forms layout? The Layouts and Styles tab enables you to customize the style of your forms & workflows so that they fit into the look & feel of an existing web application.
5. Want to create forms/flows that do cool things? See the Business Rules chapter for the details and examples of how to add behaviors to your forms/flows.
Eventually you will want to integate your new forms and flows into your existing web application or with other products such as a Database, BPM product, SOA, Web Services. Because is XML compliant and schema aware this is a straight forward task. See Integration for details.

Browser not supported