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
  • Screenflows - ability to further divide a 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 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 pdfPDF. These four forms are referred to as a screenflow. A screenflow consists of steps in a workflow that are performed by the same person. The new employee will complete the 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 screenflow using the PageBreak control to design the forms for a mobile device, in this case, the iPad. The screenflow includes a confirmation form for the new employee to review the generated W-4 pdfPDF. 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 workflow. 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 using PDFescape.
    • Upload the W-4 template, download the mapper.
    • Map the e-form controls to the field  and upload the modified mapper.
  • Create the  roles and users needed.

  • Create a  space.
  • Test the workflow on the tablet, mobile device and desktop 

...

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

...

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

...

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

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

...

  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 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 PDF for the workflow.

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

...

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

View Forms Generated by the Form/Workflow

...

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

Open the Employee On Boarding workflow in the Workflow Designer. Click on the view forms generated by the form/workflow icon on the toolbar.  Existing mapped pdfs PDFs for your form/workflow will be listed.
Image Removed
 Since we have not mapped a pdf PDF yet, there will be none listed.
Image Removed

Upload PDF Acroform Templates

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 New 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. Select Generate as fillable form. Click OK.
Image RemovedImage Added

The W-4 will be listed as a PDF to be generated for this activity of the workflow.   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.
Image RemovedImage Added

Map the E-Form Fields to the Acroform Fields

...

Drag controls from the outline and drop them onto the field you want to map it to on the pdfPDF. Drop the control when the color changes to orange as you hover over the pdf PDF field.

We will not map all the fields on the Acroform PDF for this tutorial. Drag and drop controls for these fields in the W-4 mapper. If you have been naming the controls as suggested in this tutorial, control names should be the same as the Live Form Control Name column shown in the table. 

Acroform PDF FieldLive Form Control Live Form Control Name
Hidden control for First Name and Middle Initial FirstPlusInitial
Last NameLast Name LastName
Home Address (number and street or rural route)Number and Street Street
City or town, state and ZIP codeHidden control for City or Town, State, ZIP code FullAddress
Social Security NumberSocial Security Number Whatever you named it
Total Number of Allowances you are claimingTotal Number of Allowances you are claiming Total_Alllowances
Employee's Signature Employee's Signature  Whatever you named it
Date Today's Date TodaysDate
Employer's Name and AddressHidden control for Employer's Name and Address   Whatever you named it
Employer's EINHidden Control for Employee Identification Number  Whatever you named it


Image RemovedImage Added

Tip

If the control names are truncated in the Mapping Form Outline, hover over the control to see the entire name.

...

  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 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.
  6. If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding workflow 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 workflow section.

...