Versions Compared

Key

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

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 Screenflows - ability to further divide a screen flow screenflow 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.
Info

  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. 

Column
width25%

On This Page:

Table of Contents
 

...

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 flowscreenflow. A screen flow screenflow consists of steps in a workflow that are performed by the same person. The new employee will complete the screen flow screenflow 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 screenflow using the PageBreak control to design the forms for a mobile device, in this case, the iPad. The screen flow screenflow includes a confirmation form for the new employee to review the generated W-4 pdf. The Confirmation form utilizes the 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 flowworkflow. 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 workflow on the tablet, mobile device and desktop 

...

  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 flowworkflow

Create the

...

Screenflow

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

...

Logon to  as a designer. We will create the screenflow in the Forms designer and then drag them into the Flow Workflow designer to make the Employee On Boarding flowworkflow. Click the  Add icon and select  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 on the Add icon and selectCreate a New Form. You will be taken directly to the forms designer. Name the form Employee Information. 

...

Expand
titleClick 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 workflow 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

Image Modified
  • Click the  icon to collapse the rule window

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

Expand
titleClick 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

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

Expand
titleClick 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

Image Modified

  • 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 this rule to your form now and we will turn the feature on in the flow workflow later in this tutorial. Click the icon 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.  

...

Expand
titleClick 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 on the  Rules icon on the designer toolbar to access the Rules Editor. 
  2. Click the to add the rule.
  3. Name it Populate Today's Date when the new employee signs.
  4. Click Add Condition - this is the Condition wizard
  5. Select EmployeeSSignature from the first dropdown.
  6. Select isFilled from the second dropdown
  7. Click Next
  8. Select TodaySDatein the first dropdown.
  9. Select to in the second dropdown
  10. Start typing today and select function today() from the dropdown
  11. Click Next and go to false condition
  12. Select TodaySDatein the first dropdown.
  13. Select to empty in the second dropdown
  14. Click Finish

Image Modified

  • We will use rules to calculate the total allowances. 
  • We will add another rule that will add the values for the A_Allowance, C_Allowance and D_allowance controls and store it in the Total_Allowances field. 

    Expand
    titleClick 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 Compute Total Allowances
    3. Click Next - to take you to the Action wizard
    4. Select Total_Allowance from the first dropdown.
    5. Select to from the second dropdown
    6. Type Sum in the third field. The function shows in the dropdown. Select function Sum
    7. Type A_Allowance, C_Allowance, D_Allowance inside the sum bracket.
    8. Close the function.
    9. Click Finish

    Image Modified

  •  Be sure to save your form by clicking on the  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.

...

The purpose of the Confirmation form in the Employee On Boarding flow workflow is to give the new employee the opportunity to review the information in the generated W-4 PDF and then sign to indicate the information has been reviewed and verified.  Drag and Drop one Signature control from the palette to the form. Change the label of the Signature control to "Employee's Signature - by signing you agree to the content of the W-4 PDF Form". We will add the Form Viewer control to this form when we create the Employee On Boarding flowworkflow. This will display the section of the W - 4 Pixel Perfect PDF that we will map with the  data later in this tutorial.  

...

This form will be used by the new employee's manager to approve or reject the screen flowscreenflow. 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 Workflow Designer but it will not work if the form does not have an approval control in it.

...

The last step in the Employee On Boarding flow workflow is performed by Sue, who works in the HR department of the company. Sue receives the task from the manager, Jerry and proceeds to complete the final form, sign it  and submit the data to the company database. Create a form similar to the image below. 

  • Add a date control for the Performance Review Date and a dropdown control for the Pay Grade. 

    • Use a message control for the instruction: "Confirm that the new employee has completed the following:". One way to bold the message text  is to use HTML tags in the message control. For example, the text should be encased in <b>text</b>,  as shown in the image. You can also turn on the Rich Text Editor for Message Controls if you require more text formatting

    • Drag a section from the palette and drop it on the canvas. Select the HR role on the section security tab. Add these controls to the section: 

      • Use the T/F control for the policy questions - Drag 6 of them from the palette into the section. Make sure they are below the Message control.  Check the New Line property on the Style tab to get the T/F controls to line up underneath each other.
      • Change the labels of the T/F Controls to: Read Harassment Policy, Read Email Policy, Read Confidential Data Policy and Received the Employee Handbook. 
      • Add a Signature control or choose a Signature type from the dropdown on the Security tab of the sectionsave and exit  icon to save the form.     


Create the Employee On Boarding

...

Workflow

Open the Flow Workflow Designer by clicking on the  Add icon and selecting Create 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 workflow editor.  Review this Editing Step Properties for information about the Flow workflow 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 flowscreenflow. Click the  icon in the toolbar and go to the Access Control tab. For Who can start the flowworkflow, select Authenticated Users(Login required.) New employees will have to log onto the tenant to access the flowworkflow. Check to see that the deployment is set  to Production.

Tip

Forms can be created or edited directly from the flowworkflow, if necessary. Click the form to be edited, (the New Form if you are just creating it) then click the  icon to open the form designer. This copy of the form is not the same as the one we created in the Form Designer. Changes to the form in the flow workflow will not affect the original form that was dragged from the palette. 

Assigning Roles to the Employee On Boarding

...

Workflow

  1. Click on the Employee step
  2. Click on the  Edit Step Properties icon. 
  3. Click on the Assignment tab.
  4. Begin typing Employee in the Assign to Role(s) dropdown. Select it from the dropdown list when it displays.
  5. Click Submit
  6. Since the Employee, Allowances, Education and Confirmation steps are consecutive steps performed by the same user (new employee), they are considered a screenflow. Role assignment for a screenflow is only done on the first step - in this case - the Employee step. Leave the role assignment for the Allowances, Education and Confirmation steps blank.
  7. Click on the Confirmation step. Click on the  Edit Step Properties icon.
    1. Click on the Settings tab. Customize the Continue Label for this step of the flow workflow to say "Send to Manager". Click Submit.
  8. Click on the Approval step and assign the role of Manager. Remember to click Submit.
  9. Click on the Office Use only form and assign the HR role from the choices shown in the Assign to Role(s)  dropdown. Click on the Settings tab. You can customize the Continue Label to whatever text you like i.e.  "Send to ECM" . 
  10. Click Submit
  11. Continue the tutorial to setup Quick View for the Approval form, Geo Location for the Employee Information form, Task Email notification and the W - 4 pdf for the flowworkflow.

Info

If you want to capture the current location of the new employee when they are filling out the Employee Information form, turn on ' location feature. Click on the Employee Information form to highlight it in the flow workflow designer. On the Property panel that displays on the left, Click on General Settings. Scroll to the last tab. There is a tab for the Geo - Location feature. We added a rule to the Employee information form to take advantage of the iPad location services earlier in this tutorial. Once you have the rules in place, you can choose to have the rules execute when the form loads (the On Load) option of the Geo-Location dropdown or specify a custom time period of how often the rules should execute (the custom option of the Geo Location dropdown). Check Detailed Location to capture additional information, like an address, based on the location.

...

You can setup any control on the form that will give the manager more information on the task to be performed by using Templatized Strings in the Task Info field on the form's property panel. In this scenario, The Manager and the HR employee will need to approve/reject the new employee on boarding so we will set up the same task information for all the steps. To do this:

  1. Click on the Flow Workflow Designer toolbar

  2. Type New Employee: {FirstName} {LastName} into the Task Information field on the forms Property Panel - the First and Last Name controls are enclosed in curly brackets. These are examples of Templatized Strings. will substitute the new employee's first and last names for these templatized strings at runtime.

...

You can customize the message the new employee will see upon completion of the screen flow screenflow by typing it into the Pending Message field on the Messages tabs for the Manager Approval step.

Tip

Pending messages display when the workflow navigates to a different user. In our scenario, you may want to customize the message that the employee sees when they complete the screenflow and the flow workflow navigates to a user with the Manager role for approval/rejection. Note the Pending message for the step is always placed on the step that comes after the step where you want it to display. This is because the flow workflow navigates to the next flow workflow step first then it displays any configured messages. The message that the employee sees when the flow workflow goes to the Manager must be configured on the Manager Approval step. The message that the Manager sees when the flow workflow goes to a user in the HR department must be configured on the HR step.

To customize the message the employee sees when the Confirmation step is completed and the flow workflow goes to the Manager: Here is an example: "Thank You {FirstName}. Your New Employee Package has been sent to your Manager for approval."

...

To customize the message the Manager sees when the Approval step is completed and the flow workflow goes to HR: Here is an example: "The On Boarding Package was sent to the Human Resource Department"

...

The Approval form consists of one section named Manager Review. This section has one control in it – a text area for comments and the Text/Signature image choice selected on the Security Tab. This section meets the criteria for an Approval Control and can be setup for the Quick View feature. Highlight the Approval form in the flow workflow by clicking on it and then click on General Settings in the Property pane. Scroll to the Quick Approval tab:

  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 save and exit icon to close the wizard. You will see the lightening bolt on the Approval flow workflow activity if Quick View is setup correctly.

...

You can configure the email that is sent when the flow workflow is put on someone's Task List. Jerry , the Manager, receives an email notifying him if there is a new task in the Task List. To set this up, click on the (Task) Assignment Section in the property panel. Make changes to the Task Notification Email section at the bottom of the Wizard as shown below. Notice the Templatized Strings in the message shown in the image below.

...

Click the  save and exit icon to save your flowworkflow

Generate the W - 4 "Pixel Perfect" PDF

...

  • Upload a W-4 Acroform PDF as a template.
  • Map the e-form fields to the acroform pdf.

View Forms Generated by the Form/

...

Workflow

 The PDF mapping screen provides functionality to enable designers to map e-form fields to PDF fields. Mapping is performed a field at a time in the context of a PDF page. Mapping can be accomplished in two ways:

...

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

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

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

...

The W-4 will be listed as a PDF to be generated for this activity of the flowworkflow.   makes a copy of the uploaded Acroform template and modifies it with available selections of appropriate e-form fields for each PDF Acroform field. The modified PDF Acroform (Mapper) will be re-generated every time because the e-form fields may have changed.

...

Click the name of the workflow to return to the designer. Click on the Confirmation step, then click the  icon to edit the form. Drag and drop one Form Viewer control from the flow workflow 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 save and exit icon twice to save your changes and return to the Flow Home pagethe Forms and Workflows Homepage.

Assign a thumbnail to the Employee On Boarding

...

Workflow 

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

Create a Space to Test the Employee On Boarding

...

Workflow

There are several ways to test the Employee On Boarding Flowworkflow. We will use a  space which can be a valuable tool for testing mobile forms on the iPhone and iPad. Before creating your space, make sure the visibility of your Employee On boarding workflow is set to Anyone or Authenticated Users and that it is deployed to production.

Follow the steps below to quickly create a space to test the Employee On Boarding Flowworkflow:  

  1. Log in as the designer. Click on the Spaces tab.
  2. Click Add 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 workflow 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. 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.
    Image Removed
    Image Added
  6. If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding Flowworkflow section.
  7. If you are using an in-house installation,
    1. Click the 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 Save and Exit icon to save the changes and proceed to the Test the Employee On Boarding Flowworkflow section.

Test the Employee On Boarding

...

Workflow

  1. Logon to your tenant as the designer on your desktop.
  2. On the Spaces table, click the  Action Menu for your space and select Share.
    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.

...

     6. Select the Employee On Boarding flow workflow on the iPad by tapping the icon for it.

     7. Fill in the screen flowscreenflow. Use the Back and Next buttons or swipe to navigate the pages of the forms established by the designer's use of the PageBreak control. The Next button will change to Continue when the flow workflow is navigating to a new form.

     8. You will only see a Save button if the Save/Load property on the flow workflow has been selected. This property saves a  partially complete form/flow workflow on the Live Forms Form Server.

...

    10. The Manager's name should be filled in by  on the first page of the screen flow screenflow if you added the rule to do that from the logon information. 

...

    18. Click the Send to Manager button when the screen flow screenflow is complete. Verify your customized message is displayed to the new employee The flow workflow should progress to the Approval phase now.

...

    23. You can run through the flow workflow again to see what happens if the task is rejected.

...

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

...