Section | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
|
...
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:
...
- Click on the Employee step
- Click on the Edit Step Properties icon.
- Click on the Assignment tab.
- Begin typing Employee in the Assign to Role(s) dropdown. Select it from the dropdown list when it displays.
- Click Submit
- 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.
- Click on the Confirmation step. Click on the Edit Step Properties icon.
- Click on the Settings tab. Customize the Continue Label for this step of the workflow to say "Send to Manager". Click Submit.
- Click on the Approval step and assign the role of Manager. Remember to click Submit.
- 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" .
- Click Submit.
- 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.
Since we have not mapped a pdf PDF yet, there will be none listed.
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.
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.
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 Field | Live Form Control | Live Form Control Name |
Hidden control for First Name and Middle Initial | FirstPlusInitial | |
Last Name | Last Name | LastName |
Home Address (number and street or rural route) | Number and Street | Street |
City or town, state and ZIP code | Hidden control for City or Town, State, ZIP code | FullAddress |
Social Security Number | Social Security Number | Whatever you named it |
Total Number of Allowances you are claiming | Total 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 Address | Hidden control for Employer's Name and Address | Whatever you named it |
Employer's EIN | Hidden Control for Employee Identification Number | Whatever you named it |
Tip |
---|
If the control names are truncated in the Mapping Form Outline, hover over the control to see the entire name. |
...
- Log in as the designer. Click on the Spaces tab.
- 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.
- 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.
- Verify that the left panel is hidden. If not, click the icon to hide it.
- Select regular for the form width from the Min Width dropdown on the Property pane.
- If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding workflow section.
- If you are using an in-house installation,
- 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.
- Click the Save and Exit icon to save the changes and proceed to the Test the Employee On Boarding workflow section.
...