Table of Contents
Thank you for your interest in frevvo frevvo frevvo. The steps 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 a frevvo workflow.
Tip |
---|
We strongly recommend that you jump directly to the Forms Tutorial if you are already comfortable with the drag frevvo drag and drop feature. The Forms Tutorial is a quick introduction to many of the basic features and controls available in the form frevvo form designer. If you prefer detailed step by step instructions to help you make your first form then continue with this tutorial. |
...
Add the Title and the Employee Information Section
Logon to your tenant your frevvo tenant as the designer.
- Click the Add icon and select Create a New Form.
- When prompted, change the Project Name to "My Company HR." (If you already have Projects in your list, you may choose whether to create a new project or add to an existing project.)
- You will be taken directly to the Form Designer. Change the form name to "Leave Approval Form" by clicking the pencil icon next to the default form name.
- Drag a Message control from the palette and drop it onto the canvas. Look for the green arrows to help you drop the control in the desired place on the form. As you add more controls, you will see double green arrows, up, down or side arrows to help you place controls on the canvas.
Change the Message text to "Leave Approval." Change the control name to "LeaveApproval" (no spaces.) 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.
- Click on the section label and change it to Employee Information. Notice that automatically that frevvo automatically provides the control name "EmployeeInformation." You can change this if desired.
- 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 section for this text control and in the Settings Tab change the label to "First Name." Click on the Styles tab. Change the width of the control by selecting 6 columns on the grid.
- 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.
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. Using the Email takes advantage of builtof frevvo built-in validation.
- Click on the Email control label and change the label to Email. Check the Required property on the Settings tab.
- Click Preview Form in the Action Menu (top right) 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 icon to save work you have done so far.
- Continue with the instructions to add the Leave Request Section to the form.
...
- 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. Check the Required property. Change the label to Start Date. Change the width to 6 columns.
- 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 Checkbox control from the palette and dropping it below the Type of Leave control.
- Change the label to Certification and the name to Certification. Add a single option: "True=I certify that the above listed leave was entirely due to personal illness." 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.
- Check the "Hide Label" button. The label will be hidden and the user will see only the single option.
- Drag a Textarea control from the palette and drop it below the Certification 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 Image 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 Save to save work you have done so far.
...
- Click on the Rules icon in the Guided Designer Header. This opens the Visual Rule Builder,which consists of 3 wizards:
- Condition wizard - describe the conditions under which a set of actions should be executed
- Action wizard - declare the actions that should be taken when the condition is true
- Else Action wizard - declare the actions that should be taken when the condition is false
Click the plus icon to Create a new rule.
- Name the rule Sick Certification. Add a Description such as "Use this rule to show or hide Sick Leave Certification."
- Click Run Builder.
- Click Add Condition - this is the Condition wizard
- Select the TypeOfLeave field from the first dropdown.
- Select is from the second dropdown
- Slide the toggle to the right then enter "Sick" without the quotes in the third field.
- Click Next then click Add Action - this is the Action wizard where you set up actions that will happen if the condition is true
- Select the Certification field from the first dropdown.
- Select as visible from the second dropdown
- Add another Action.
- Select the Certification field from the first dropdown.
- Select as required from the second dropdown.
- Click Next then click Add Action this is the else action wizard where you set up actions that will happen if the condition is false.
- Select the Certification field from the first dropdown.
- Select as hidden from the second dropdown
- Add another Action.
- Select the Certification field from the first dropdown.
- Select as optional from the second dropdown.
- Set the Certification control to hidden in the first action and optional in the second action.
- Click Finish
- When you are finished, the rule should look like this in the Rule List.
6. Click Save to save the rule and the form.
...
Tip |
---|
We strongly recommend that you jump directly to the Workflow Tutorial if you are already comfortable using the Workflow Designer. The Workflow tutorial assumes that you have some basic understanding of the Workflow Designer. The Workflow Tutorial teaches you important workflow design patterns and increases your skills using the many workflow designer features. |
Warning |
Before publishing forms/workflows to production, please see the Administrator Best Practices documentation. recommends that forms/workflows be created & tested by one/multiple designers in their own accounts. After the forms are designed/tested, they can be downloaded from the individual designer user accounts and uploaded to a generic production user account (ex: “production@<your tenant>" where the forms can be published and used by your end-users. |
Related Topics
- Detailed information about all of the features and functions available with can with frevvo can be found in the User's Guide. For example, you can find the details about such topics as:
- 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
- What does the user see when they click the submit button? This is controlled by your form's Form Action .
- 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.
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.
- Want to create forms/workflows that do cool things? See the Business Rules chapter for the details and examples of how to add behaviors to your forms/workflows.
Eventually you will want to integrate your new forms new frevvo forms and workflows into your existing web application or with other products such as a Database, BPM product, SOA, or Web Services. Because is Because frevvo is XML compliant and schema aware this is a straight forward task. See Integrations for details.
Warning |
---|
Before publishing forms/workflows to production, please see the Administrator Best Practices documentation. frevvo recommends that forms/workflows be created & tested by one/multiple designers in their own accounts. After the forms are designed/tested, they can be downloaded from the individual designer user accounts and uploaded to a generic production user account (ex: “production@<your tenant>" where the forms can be published and used by your end-users. |