Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Live Forms account on the frevvo SaaS 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

...

  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. 

...

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 Image Modified to create a new Application. Click on the Image Modified 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 Initial 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.   

...