...

A  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

  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

  the  roles and users needed.

• Create a  space.

• Test the flow on the iPad, iPhone and desktop 

What are we going to need

...

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.

...

• 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.   

• 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. 

...

• 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  Rules icon on the designer toolbar to access the Rules Editor. Click the  icon then the  icon to open the Rules validator screen. Give your rule a meaningful name: in this case we will call it Form Load. Copy/Paste the rule below into the rules canvas.

...

...

• Your form should look similar to the image below:

...

• Delete one of the columns in the table by clicking on the column and then clicking on the    delete icon.
• Drag and drop two quantity fields into the table to make the Start Year and End Year columns.
• Change the label of one of the columns you added to Start Year and the name of that column to StartYear. Change the label of the second column to End Year and the name of that column to EndYear
• Move the Start Year column to the leftmost position in the table and the End Year column to the right of the Start Year column . Move the columns by clicking in the column header and clicking the  green arrow  that appears. Columns will move to the right each time you click on the arrow for that column.
• Move the other columns to get the Start and End Year columns in the correct positions.

...

Open the Flow Designer by clicking on the Flows menu item. Click on the  icon to create the new Employee On Boarding flow. 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 documentation 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  icon in the toolbar. With the who can use the flow permission visible in the dropdown, select Public in Tenant 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. Click on the Confirmation Form and customize the Continue Label for this step of the flow to say "Send to Manager".

...

1. The Setup Quick View wizard will display all sections of your form that meet the criteria of an Approval control. In this case, there should only by one - the Manager Review section of the Approval form.
2. Check the Enable box.
3. 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 SSN to the Quick View, type SSN: followed by the templatized string for the Social Security field. Clicking on the Control dropdown will list all the controls in all the forms in your flow in alphabetical order.
4. The Manager Review section should be listed in the Approval Control box.
5. Click the  save and exit icon to close the wizard. You will see the lightening  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.

...

• Dragging mappable fields from the outline and dropping them onto the PDF field (hi-lighted in either yellow or green).
• Clicking on a PDF field to activate the PDF Mapping Dialogue

We will use the Drag and Drop method in this tutorial. Information on using the PDF Mapping dialogue can be found here.

Follow the steps int his section to map fields in the Employee Information and Allowance forms in our flow to the W - 4 acroform pdf.

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

Since we have not mapped a pdf yet, there will be none listed.

...

Map the E-Form Fields to the Acroform Fields

Click the Map  Map Fields icon.

Ensure the PDF Page thumbnail Image for page 1 is selected.

Contract the property pane by clicking in the header.

Click the Image Modified icon  icon to the left of the Employee Information and Allowances forms to expand the control list in the Mapping Form Outline.

...

Click the  Edit icon to return to the designer. Highlight the Confirmation form by clicking on it. Click on the Image Modified 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.  

...

On the Flows Home page, click the Image Modified icon to assign a thumbnail to your Employee On Boarding flow that will display on the iPad and Iphone. You can upload your own icon or select one that  provides. 

...

1. Log in as the designer. Click on the Spaces tab.
2. Click  to create a new space, type a Space ID and Space Name, and then click Create.
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  Edit icon.  Click the  icon to hide the left panel and select regular for the form width from the Min Width dropdown on the Property pane. 
   
   
5. If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding Flow section.
6. If you are using an in-house installation,
   1. Click the Image Modified menu  menu edit icon. Replace the <localhost<localhost:8082> 8082> in the urls for the Task List and the Employee On Boarding workflow with your server name and port. 
   2. Click the Save  Save and Exit icon to save the changes and proceed to the Test the Employee On Boarding Flow section.

...