...

...

Image Added

...

• 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 iPadtablet, iPhone mobile device and desktop 

What are we going to need

1. A Live Forms account on the frevvo Cloud server or a working in-house installation. 
2. An iPad, iPhone A tablet, mobile device 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. 

...

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 Removed to edit that application. Invoke the new form wizard by clicking on the Image Removed New icon at the top of  Add icon and select Image Added Create a New Project. Name the new project in the window that appears. When you click Finish, you will be taken to the Forms and Workflows Home Page. Click the Next button to navigate through the wizard. Name  Click on theImage Added Add icon and selectImage AddedCreate a New Form. You will be taken directly to the forms designer. Name the form Employee Information. 

...

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

• Click the Image Modified save and exit icon to save the work we have done.
• On the Forms Home Page, Click the Image Modified icon for the Employee Information form to continue editing.
• Add a  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.  
   

Forms and Workflows Home Page

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.

...

Employee Information form in the designer

• Click the Image Modified save and exit icon to save the work we have done.
• On the Forms and Workflows Home Page, click the Image Removed icon for the form name for the Employee Information form to continue editing (or click the Image AddedAction Menu and select Image AddedEdit.
• 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 Image Modified Rules  Rules icon on the designer toolbar to access the Rules Editor. 

Expand
title 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 Click the to add the rule. Name it Form Load 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. Click Next Select FirstName from the first dropdown. Select to from the second dropdown Start typing userFirstName in the third field. The Function is shown in the dropdown. Select the function and complete the bracket. Click on Add Action Select LastName from the first dropdown. Select to from the second dropdown Start typing userLastName in the third field. The Function is shown in the dropdown. Select the function and complete the bracket. Click Add Action again Select manager from the first dropdown. Select to from the second dropdown Start typing userManagerID in the third field. The Function is shown in the dropdown. Select the function and complete the bracket. Click Finish

• Click the Image Modified icon to collapse the rule window

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

Expand
title 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 Click the to add the rule. Name it Combine First Name and Initial Select FirstPlusInitial in the first dropdown. Select to in the second dropdown Enter FirstName + " " + MiddleInitial in the third field. (values show in dropdown as you type the name of the controls) Click Finish

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

• Click the Image Modified icon  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 this rule to your form now and we will turn the feature on in the flow later in this tutorial. Click the Image Modifiedicon to collapse the rule window and then click the icon to add the fourth rule. Call this rule Location. Click the Rule Code then Edit Code buttons. Copy/Paste the rule below into the rules canvas.  

...

• Refer to the Rule Validator for help in troubleshooting if there are any issues with the rules that we are adding to the form.
• Click the Image Modifiededit form icon in the designer toolbar to return to the form. Your rules will be saved.
• As a precaution, click the Image Modified save and exit icon to preserve the work we have done so far.
• On the Forms and Workflows Home Page, click the Image Removed icon for the name of the Employee Information form to continue editing.
• Although  automatically adjusts to the screen size of a mobile device, the PageBreak control gives the forms designer a tool to specify the sections of your form that appear on a page. Drag and drop a PageBreak control below the manager control. Click on the PageBreak control and notice the property pane shows both phone and tablet checked. This is the default value and we will leave it as is. This will ensure that the controls above the first PageBreak will appear on the first page when the form is rendered on the iPad or the iPhone. 
• Drag another PageBreak control from the palette and drop it below the FullAddress control. Check phone and uncheck tablet on the PageBreak property panel. With these PageBreaks in place, the Date of Birth and manager fields will appear on the first page of an iPhone and iPad. When you click Next on the iPad, the name, address, SSN, phone, email control and the Upload control  will appear on the second page. On the iPhone, you will see the name, address, SSN, phone and email controls on the second page and the Upload control on the third page.

...

• Your form should look similar to the image below:
  

• Click the Image Modified save and exit icon to save the Employee Information form. 

...

...

•  Be sure to save your form by clicking on the Image Modified save and exit icon in the designer.
•  You can test this form by clicking on the Test button on the Forms Home Page. The Today's Date field should be populated with the current date when the new employee signs. The sum of the values entered in A_allowance, B_allowance,and C_allowance will display in the Total_Allowances field.

...

• Click on the Table control then select the Style tab on the Properties panel. Enter these percentage values, separated by a space, to adjust the widths of the four columns: 10% 10% 50% 25%

• Click the Image Modifiedsave and exit icon to save the form.  

...

This form will be used by the new employee's manager to approve or reject the screen flow. In this scenario, the manager, Jerry, will use his iPhone to perform this task when it appears in his Task List. You can use the  Quick View feature to make that process easy . Quick View requires an Approval control. An approval control is a section control in your form with a text area control inside of it. You can set up a signed section if you want the manager to sign after approving or rejecting the task . Drag and drop a section control into the Approval form. Name it Manager Review. Add a text area control for manager comments. Click on the Security tab for the section. Do not assign a role from the Roles List on the Security tab. We will set up the routing for the Manager Approval step when we create the New Employee On Boarding workflow. Choose Text/Signature Image or Wet Signature type from the dropdown for the signature type. Refer to Electronic Signatures for details about signatures to help you decide. Quick view is setup in the flow designer but it will not work if the form does not have an approval control in it.

Be sure to click the Image Modifiedsave and exit icon to save the form.

...

Open the Flow Designer by clicking on the Flows menu item. Click on the Image Modified icon to create the new Employee On Boarding flow. Drag  Add icon and selecting Image AddedCreate a New Workflow. Drag and drop your Employee Information, Allowances, Education History, Confirmation, Approval and Office Use Only forms from the palette to the flow editor.  Review this Editing Step Properties for information about the Flow step properties you can set up. In the image below, the new employee will see the Navigation toolbar to chart progress when filling out the screen flow. Click the Image Modified icon in the toolbar . With the and go to the Access Control tab. For Who can start the flow permission visible in the dropdown, select Authenticated Users(Login required.) in the Visibility dropdown. New employees will have to log onto the tenant to access the flow. Check to see that the deployment is set  to Production.

...

1. Enable the Quick Approval Slider.
2. The Approval Control will display all sections of your form that meet the criteria of an Approval control. In this case, there should only be one - the Manager Review section of the Approval form.
3. Select the Manager Review Option from the dropdown.
4. Type a Summary statement that will appear on the Task List, if desired. This is essentially the same as the Task Information so if you have set that up already you can leave the summary blank.  To add the new employee Personal Email Address to the Quick View, type the left curly bracket - { - then  begin typing the name of the Personal Email Address control. Click on Personal Email Address when it displays in the dropdown list. This will add the Personal Email Address information to the Quick Approval summary as a templatized string. 
5. The Manager Review section should be listed in the Approval Control box. 
6. Click the Image Modifiedsave and exit icon to close the wizard. You will see the lightening bolt on the Approval flow activity if Quick View is setup correctly.

...

Jerry, the manager, will receive an email informing him that there is a New Employee On Boarding task on his Task List. Notice the {task.list.url} is replaced by the link to Jerry's task list. When Jerry clicks this link, he will be directed to his task list. He will have to login if he is not signed on to access it.

Click the Image Modified save  save and exit icon to save your flow. 

...

Open the Employee On Boarding workflow in the flow designer. Click on the Image Modifiedview forms generated by the form/flow icon on the toolbar.  Existing mapped pdfs for your form/flow will be listed.

...

Use the New Form Generation screen to upload the Acroform for the W-4 Acroform PDF that you downloaded and modified earlier in this tutorial. Click the Image ModifiedNew icon to begin. Fill in the name of the template, W-4 in this case, and browse to the location of the W-4 Acroform. Click OK.

...

Click the Done button when the mapping is completed.

Click the Image Modified save and exit icon to save your work and return to the Flows Forms and Workflows Home page.

Add the Form Viewer Control

Click the Image Removed Edit icon to return to the name of the workflow to return to the designer.  Highlight Click on the Confirmation form by clicking on it. Click on step, then click the Image Modified icon  icon to edit the form. Drag and drop one Form Viewer control from the flow palette to the form. Change the label of the Form Viewer control to Review PDF Forms. Change the label color and any other style changes you want to make on the Style tab in the Properties pane. See Style Properties for more information.  

Click on the Form Viewer control to select it. Select the W-4 form from the Form dropdown on the properties pane. Click the Image Modifiedsave and exit icon twice to save your changes and return to the Flow Home page.

Assign a thumbnail to the Employee On Boarding Flow 

On the Flows Forms and Workflows Home page, click the Image Removed icon select Image Added Thumbnail from the Image Added Action Menu to assign a thumbnail to your Employee On Boarding flow that will display on the iPad and IphoneiPhone. You can upload your own icon or select one that  provides. 

...

1. Log in as the designer. Click on the Spaces tab.
2. Click Image ModifiedAdd to create a new space, type a Space ID and Space Name, and then click Create. You will be directed to the space designer.
3. Since we set the state of the Employee On Boarding flow to Production in a previous step, it will automatically be included, along with the Task List as menu items in the newly created space. 
4. Click the Image Removed Edit icon.  Verify that the left panel is hidden. If not, click the  icon to hide it.
5. Select regular for the form width from the Min Width dropdown on the Property pane.
   
   
6. If your tenant is in the cloud, click the Image ModifiedSave and Exit icon and proceed to the Test the Employee On Boarding Flow section.
7. If you are using an in-house installation,
   1. Click the Image Modified menu edit icon. Replace the <localhost:8082> in the urls for the Task List and the Employee On Boarding workflow with your server name and port. If you are concerned about portability to another system, make the URL's relative by removing the protocol, server and port information.
   2. Click the Image ModifiedSave and Exit icon to save the changes and proceed to the Test the Employee On Boarding Flow section.

...

1. Logon to your tenant as the designer on your desktop.Click the
2. Image Removed Share icon on the Space Home PageOn the Spaces table, click the Image Added Action Menu for your space and select Image AddedShare.
   Image Modified

     3. Live Forms displays your space's URL — this is the link you distribute to those who you want to view your space. Remember, this flow is designed to only be accessible to users who are logged into the tenant.

...

    26. Logon to  from a desktop computer as user Sue. Click the Perform this Task icon from Sue's Task List to complete the flow. Verify the correct completion message is displayed.

    27. Logoff .