/
Employee On Boarding Tutorial

frevvo v9 is no longer supported. Please visit Live Forms Latest for our current Cloud Release. Earlier documentation is available too.

Employee On Boarding Tutorial

now enables universal access to e-forms and workflows on tablets and smart phones in addition to desktop support on all standard browsers. iOS 6 devices, iPad and iPhone, running mobile safari are supported. This tutorial will incorporate several features into an Employee On Boarding workflow. For example;

  • Touch screen wet signature - the new employee can sign to verify the information using their finger or a pointer.
  • Take advantage of device specific capabilities - you will see the correct date picker and keyboards pop-up on your mobile device
  • Screen Flows - ability to further divide a screen flow into sections that better lend themselves to an iPad or iPhone using the PageBreak control
  • Ability to upload an existing image or a picture taken with the device camera to the e-form
  • Use the iPad's location services to fill in the address
  • Spaces that render in a device specific manner - support swipe gestures and customized icons
  • Enhanced Task List for mobile devices
  • Quick Approval feature - allows quick review of a task by the appropriate person with accept/reject buttons
  • Generate an additional Pixel Perfect PDF for the federal W - 4 form. It is important to note here that there is no limit on the number of PDFs that can be generated. For example, you can collect the information in your form once and then use it to fill in an unlimited amount of pdfs for the new employee i.e. -the federal W - 4 and the I - 9.

  You can download this tutorial as a PDF.


Please view the New Employee On Boarding video for an introduction to some of the exciting features we will be using in this tutorial.

We estimate about 2.5 to 3.0 hours for an experienced designer to complete this tutorial. It may take up to 4.0 hours if you are a new user. 

On This Page:

 

What are we going to build?

 workflow is a series of routed forms that can now run on all devices including the iPhone and the iPad. In this tutorial, we will create a workflow that can be used when onboarding a new employee joining your company. There will be three participants: the new employee, the new employee's manager and an employee that works for the company HR department. The new employee will complete four forms: Employee Information, W-4 Allowances, Education History and will have an opportunity to confirm the entered data with their signature on a Confirmation form by reviewing a W  - 4 generated pdf. These four forms are referred to as a screen flow. A screen flow consists of steps in a workflow that are performed by the same person. The new employee will complete the screen flow from an iPad and the task will be sent to the new employee's manager for approval. The approval step will be performed on an iPhone using the Quick Approval feature. Once the task is approved, it will go to the HR department for finalization and storage. This tutorial will cover the following:

  • Create the Screen flow using the PageBreak control to design the forms for a mobile device, in this case, the iPad. The screen flow includes a confirmation form for the new employee to review the generated W-4 pdf. The Confirmation form utilizes the v5 Form Viewer and Signature controls. 

  • Create the Approval form using the Quick Approval feature. This step will be performed on the iPhone by the manager.
  • Create the desktop form for the company HR department
  • Create the Employee On Boarding flow. Assign an icon to it.
  • Generate an additional PDF for the federal W - 4 forms 
    • Add a field for the signature to the W-4 Acroform using PDFescape.
    • Upload the W-4 template, download the mapper.
    • Map the e-form controls to the Acroform field  and upload the modified mapper.
  • Create the  roles and users needed.

  • Create a  space.
  • Test the flow on the iPad, iPhone and desktop 

What are we going to need

  1. frevvo account on the frevvo Cloud server or a working in-house installation. 
  2. An iPad, iPhone and desktop computer. If you do not have mobile devices, you can perform the Employee On Boarding workflow from your desktop computer.
  3. You will need to download an Acroform for the W-4 form. You can find the latest version of the Acroform here. Right click and save the form to your desktop. Open the form. Notice the name field on the acroform is a combination of the new employee's first name and middle initial and there is no writable field in the PDF for the Employee's Signature or the date field next to the signature.
  4. A PDF viewer such as Adobe Reader - version 11 or higher or Mac Preview and a PDF editor such as PDFescape

Setup users and roles

This is a one-time setup that will have to be performed by an administrator.

We will need three roles: employee, manager and hr. To create these roles in :

If you are using  Online, go directly to Step 5.  in-house users will have to create a tenant first before adding roles/users. Follow Steps 1-4 to do that:

  1. Login as the  in-house superuser admin.
  2. Click the icon to create a new tenant
  3. Fill in the Add Tenant screen. 
  4. Click the Submit button. Logoff as the superuser.
  5. Login to  as the administrative user for your tenant.
  6. If you do not already see the Manage Tenant page, click the Manage link at the top right of the page.
  7. On the page that is displayed, click the "Manage Roles" link.
  8. Click the  icon and in the form that is displayed, type in the desired role. Note that role names are case sensitive.
  9. Repeat for the second and third roles.

The admin user will also need to setup three users, assigning one of the three roles to each one:

  1. Login to  as the administrative user for your tenant.
  2. If you do not already see the Manage Tenant page, click the Manage link at the top right of the page.
  3. On the page that is displayed, click the "Manage Users" link.
  4. Click on the Add User icon.
  5. Complete the new user form for Jerry Mouse, the manager, Tom Cat, the employee (Select Jerry from the Reports dropdown for user Tom) and Sue Smart - HR personnel
  6. Assign the roles shown in the image above to the users. 
  7. Submit the form.
  8. Make one more user named designer and assign this user the frevvo.Designer role. Use the designer user to create the Employee On Boarding flow. 

Create the Screen Flow

It is very important to keep in mind the screen sizes of the devices you are targeting when designing forms for mobile devices The screen flow for this tutorial consists of four forms: Employee Information, W-4 Allowances, Education History and Confirmation. It is intended that the new employee will complete the screen flow on an iPad. Let's begin with a close look at how the PageBreak control can be used to divide the Employee information form into sections that will make it very easy to fill in the information on the iPad. 

Typically, information about a new employee would include: name, address, SSN, Telephone Numbers, email address and possibly a profile photo. Creating this form for a desktop view would be very simple in the  designer. A form designed for the desktop could look like the image below:  Mobile forms work best when they are broken up into small, logical pieces. The PageBreak control lets the designer create a mobile layout consisting of multiple pages where each page contains a small number of controls (logical groupings). The user navigates between the pages via Back/Next buttons, or on a device that supports it, by swiping left/right. We will use sections plus the PageBreak control to illustrate these concepts.

Employee Information Form designed for a Desktop browser

Refer to Designing Forms for in-depth information on the  features and controls described in the steps below:  

Create the Employee Information Form

Logon to  as a designer. We will create the screenflow in the Forms designer and then drag them into the Flow designer to make the Employee On Boarding flow. Click the to create a new Application. Click on the  to edit that application. Invoke the new form wizard by clicking on the New icon at the top of the Forms Home Page. Click the Next button to navigate through the wizard. Name the form Employee Information. 

  • Drag and drop an image control from the palette to the canvas. Use this to upload a company logo image, if desired.
  • Drag a message control from the palette and drop it next to your logo. Type the text "New Employee Onboarding Form" in the message area. You can bold the text by checking bold on the Style tab for the message control.

  • Drag and Drop a date control and label it Date of Birth. The Date Format  defaults to Automatic. Check Required on the date control's property panel.
  • Add a text control next to the date of birth. Change the label to "Your Manager Is". Change the name of the control to manager. Uncheck the enabled property for that control. We'll use a rule to fill in the new employee and manager's names using the _data.getParameter
  • Drag and drop text controls for the First Name, Middle Initial and Last name fields. Click the Style tab and adjust the widths of the three fields so that they are next to each other on the same line. Check the required property on the FirstName and LastName fields but do not make the control named MiddleInitial required. 
  • Drop another text control below these controls. Uncheck the visible property for this control. Name this field FirstPlusInitial. This control will not be visible on the form. We will use a rule to combine the new employee's first name and middle initial and populate this field with that information. Then we will map the FirstPlusInitial field in the mapper for the W - 4 pdf later in this tutorial.
  • Add a text control below the FirstPlusInitial control  - name it SSN. A pattern can be used to ensure the correct format number for the Social Security Number. Here is an example of a valid pattern: \d{3}-\d{2}-\d{4}. Apply this pattern to the field by typing it into the Pattern field on the Control property pane. will display an error message if the entered data does not match the Make sure the required property is checked. 

  • Drag and drop an email control to the right of the SSN field.  Label it Personal Email Address. 
  • Add a Phone control below SSN. Name the control Home Phone. Help text showing different formats for the phone number is provided when you add the control to the form.
  • Add a second Phone control to the right of the Home Phone field. Name the control Cell Phone.   
  • Add a text control to collect Address information from the new employee. Make the width the size of the form and name it Street.
  • Drag and drop a text field below the Street control. Label it City. Make it Required.

  • Drag a dropdown control from the palette, name it State and make it Required. Type in the names of some states into the Options section on the dropdown control property pane:

  • Drop a text control to the right of the State dropdown. Label it Zip Code and make it Required. Designate a Max Length of 5 characters. 

 Your form should look like similar to the image at this point:

  • Click the  save and exit icon to save the work we have done.
  • On the Forms Home Page, Click the  icon for the Employee Information form to continue editing.
  • Add a  hidden text control named FullAddress beneath the city, state and zip code fields that will be populated with the City or Town, State and Zip Code via a rule. Uncheck the Visible and Enabled properties. Click the Style tab on the Properties pane and make the field the width of the form. This hidden field will then be mapped for the W - 4 pdf.  
  • takes full advantage of the cameras built into mobile devices. You can give the new employee an opportunity to attach a profile picture by adding an Upload Control to your form below the FullAddress hidden field. Users will see a prompt on mobile devices giving the user a choice to upload an  existing  image or take a photo with the device camera.  
     


You can specify the allowed file types to be uploaded by checking selections in the Restricted Content Types section on the Properties pane. For Example, check jpg if you only want to allow the upload of files with that extension.

  • Drag and drop a section below the Upload control. Name it Hidden for Office Use Only. Add a text field for the Employer Name and another one for the Employer Identification Number. Type the Employer's Name and Address into one and the Employer's Identification Number (EIN) into the other. Uncheck the visible property on the section control. This section will remain hidden on the form but we will map it later for the W - 4 pdf.           

The Employee Information form should look like this at this point:

Employee Information form in the designer

  • Click the  save and exit icon to save the work we have done.
  • On the Forms Home Page, click the icon for the Employee Information form to continue editing.
  • Rules add behaviors to forms. We will add 4 rules to this form to accomplish the following:
    • The first rule will fill in the First and Last Name of the new employee and the name of the manager they report to, from the login information using the _data.getParameter when the form loads.
    • The second rule will combine the employee's First Name and Initial and store it in the hidden field called FirstPlusInitial
    • The third rule will combine the City, State and Zip Code information and store it in the hidden field called FullAddress
    • The fourth rule will work with the GPS features on mobile devices detect the new employee's location information when they are filling in the Employee Information form.
  • Click on the  Rules icon on the designer toolbar to access the Rules Editor. 
 Click here to see how to create this rule

The Visual Rule Builder 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
  1. Click the to add the rule.
  2. Name it Form Load
  3. Click the Run Builder button then check the Initialization Rule Only checkbox. This is the Condition wizard. Since we checked the Initialization Only checkbox, this rule will run when this step of the flow is displayed to the user. It does not require a condition.
  4. Click Next
  5. Select FirstName from the first dropdown.
  6. Select to from the second dropdown
  7. Start typing userFirstName in the third field. The Function is shown in the dropdown. Select the function and complete the bracket.
  8. Click on Add Action
  9. Select LastName from the first dropdown.
  10. Select to from the second dropdown
  11. Start typing userLastName in the third field. The Function is shown in the dropdown. Select the function and complete the bracket.
  12. Click Add Action again
  13. Select manager from the first dropdown.
  14. Select to from the second dropdown
  15. Start typing userManagerID in the third field. The Function is shown in the dropdown. Select the function and complete the bracket.
  16. Click Finish

  • Click the  icon to collapse the rule window

  • We will write another rule to combine the First Name and Initial.

 Click here to see how to create this rule

The Visual Rule Builder 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
  1. Click the to add the rule.
  2. Name it Combine First Name and Initial
  3. Select FirstPlusInitial in the first dropdown.
  4. Select to in the second dropdown
  5. Enter FirstName + " " + MiddleInitial in the third field. (values show in dropdown as you type the name of the controls)
  6. Click Finish

  • Click the  icon to collapse the rule window
  • We will write the third rule to combine the address fields.

 Click here to see how to create this rule

The Visual Rule Builder 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
  1. Click the to add the rule.
  2. Name it Full Address
  3. Click the Run Builder button
  4. Click Add Condition - this is the Condition wizard
  5. Select City from the first dropdown.
  6. Select isFilled from the second dropdown
  7. Click Next
  8. Select FullAddress in the first dropdown.
  9. Select to in the second droppdown
  10. Enter City + " " + State + " " + ZipCode in the third field. (values show in dropdown as you type the name of the controls)
  11. Click Finish

  • Click the  icon to collapse the rule window
  • lets you take advantage of the iPad's location services. The  Geo-location feature works with rules. Below is an example of a rule that fills in the street, city, state and zip controls each time the location is updated.  For now, add