| Section | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
...
Here is what the MAIN panel should look like at this point:
- We will now add another panel similar to the one we just built to collect Address information from the new employee. By default a panel's width is set to 49%, so when you drag two panels into your form, the second panel automatically will line up next to the first panel. We will call this the second panel.
- Drag the MAIN panel to the left of the second panel for now.
- Drag and drop two text fields into this panel for the street address and city. Label them Street and City. Make them both Required.
- Drag and drop an email control into the address panel. Label it Personal Email Address.
- Drag and drop two more panels into the second panel below the Personal Email Address. Give one of the panels a width of 44% and the other one should have a width of 45%.
- Drag a dropdown control from the palette and drop it in the 44% width panel. 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 into the last panel added. Label it Zip Code and make it Required. Designate a Max Length of 5 characters.
- Drag the panels with the State and Zip Code controls above the Personal Email Address control. Rearrange them if necessary.
The MAIN and Second panel should look like this:
- Click the Finish button 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 panels 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 width 95%. 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 the new enhanced 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.
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 png if you only want to allow the upload of files with that extension.
...
The Employee Information form should look like this at this point:
- Click the Finish button 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.
- 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 button 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.
...
- 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 Controls button in the designer toolbar to return to the form. Your rules will be saved.
- As a precaution, click the Finish button to preserve the work we have done so far.
- On the Forms Home Page, click the icon for 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 hover between the MAIN and Second panels and drop it in the form. Check phone and uncheck tablet on the PageBreak property panel. With these PageBreaks in place, the MAIN and Second panels will appear as separate pages on the iPhone and iPad.
- Your form should look similar to the image below:
- Click the Finish button to save the Employee Information form.
...
In this form, we will collect information for the Personal Allowances section of the W - 4 Employee's Withholding Allowance Certificate. The section is shown below. The e-form will have controls for the A, C, D allowances and a control to store the total number of allowances designated by the new employee.
- Create a simple form to collect this information. Name the form Allowances. Here is an example. We will map the data in these fields, along with some others, to the W - 4 pdf later in this tutorial.
- Drag three Quantity controls from the palette and drop them on the designer canvas. Name them A_Allowance, C_Allowance and D_Allowance respectively. Type the instructions for A, C and D allowances as the labels for these controls. Add a fourth Quantity control where the result of the calculation of the total allowances can be stored. Name this control Total_Allowances and type "Total number of allowances you are claiming" as it's label. Uncheck the Enabled property for this control.
- Add a Wet Signature control so the Employee can sign using the a track pad/mouse or a touch screen to verify the allowance selections entered into the form. This is what the new employee will see when signing.
- Drag and drop a date control under the signature. Name it TodaySDate and uncheck the enabled property.
- We will use rules to calculate the total allowances and fill in the current date. Here's an example of a rule that will add the values for the A_Allowance, C_Allowance and D_allowance controls and store it in the Total_Allowances field. Use the Rule Validator to troubleshoot any issues.
...
Create an Education form similar to the image below. Use the table control to collect information about the new employee's Education. Name the table control Education History. Refer to this documentation for more information on how to add, move and remove columns in a table.
Education History form in the designer
...
- Change the label and name of the third column to Institution
- Make the Degree Attained column by dragging a dropdown control from the palette into the table. Move it to the righmost position.
- Change the label of the fourth column to Degree Attained and its name to DegreeAttained.
- Changes made to one cell in a column will apply to all cells in the column. Click on one of the cells in the Degree Attained column. Specify choices for the Degree Attained in the Options section of the Property pane. Here is an example:
This is how the Degree Attained column in the table will look on the iPad.
...
- 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 FInish button to save the form.
...
The purpose of the Confirmation form in the Employee On Boarding flow 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 flow. This will display the section of the W - 4 Pixel Perfect PDF that we will map with the data later in this tutorial. 
Create the Approval 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. Assign the role of manager from the role list. Choose Text/Signature Image or Wet Signature type from the dropdown for the signature type. Refer to Electronic Signatures for more information. 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 Finish button to save the form.
...
- Drag a section from the palette and drop it on the canvas. Select the HR role on the section security tab.
- 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.
- Use the T/F control for the policy questions - Drag 4 of them from the palette into the section. Make sure they are below the Message control.
- Change the labels of the T/F Controls to: Read Harrassment 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 section.
- Add a panel with a date control for the Performance Review Date and another panel with a dropdown control for the Pay Grade.
- Move the two panels to the top of the form.
- Click Finish to save the form.
...
| Tip |
|---|
Forms can be created or edited directly from the flow, if necessary. Click the form to be edited, (the New Form if you are just creating it) then click the |
Click on the Office Use only form and select the HR role from the choices shown in the Role section of the Form Property panel. You can customize the Button Label to something like "Send to ECM" if you want. Click on the Approval form and assign the role of manager. Continue to setup Quick View for the Approval form, Geo Location for the Employee Information form and Task Email notification for the flow.
| 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 designer. On the Property panel that displays on the left, there is a section 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 Loc to capture additional information, like an address, based on the location.
|
Setup Quick View
...
- 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.
- Check the Enable box.
- Type a Summary statement that will appear on the Task List, if desired. This is essentially the same as the Task Information. You can use Templatized Strings in your statement – clicking on the Control dropdown will list all the controls in all the forms in your flow in alphabetical order.
- The Manager Review section should be listed in the Approval Control box.
- Click the Finish button to close the wizard. You will see the
lightening bolt on the Approval flow activity if Quick View is setup correctly.
| Section | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
You can configure the email that is sent when the flow 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 Approval form in the flow then click on the "Setup Task Notification Email" link and make changes to the Task Notification wizard. Notice the Templatized Strings in the message shown in the image below. Users with a manager role must have a valid email address to test this feature.
Click the Finish button to save your flow.
...
- Navigate to the PDFescape website and upload the W-4 Acroform. It will open in the editor.
- Click on Form Field on the menu on the left.
3. Select Text as the field type from the dropdown. Then click on the Select box.
4. Draw a rectangular field next to the Employee's Signature label shown in the red box in the image. Repeat for the Date field. Save and download the form. This modified Acroform will be used as our W4 template. We will upload it it
to later in the tutorial.
There is a three step process to configure PDF form generation.
...
Open the Employee On Boarding workflow in the flow designer. Click on the Gen Forms button on the Toolbar to display the generated PDF forms view screen. Drag and drop the "New PDF Form" from the palette into the editor to create a new PDF form generation activity. The default name will be "Generated Form N", where N is a unique number starting at 1. Click on the activity to select it. Change the default name on the Properties Panel to Federal Forms. You may have to completely exit the flow and then go back in to see name changes.
Return to the Gen Forms Editor after you have changed the name of the PDF activity. Click on the Federal Forms activity to select it. The activity will display with a green color and contain the edit and
delete icons. Click on the
icon to continue editing..
...
The W-4 will be listed as a PDF to be generated for this activity of the flow. 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
Download the Mapper by clicking on the icon. The downloaded mapper is a modified template so it will have the same name as the template that you uploaded.
Open the mapper with an external PDF viewer/editor, such as Adobe Reader (version 11 or higher) or Mac Preview. Here is an example of the downloaded mapper for the W-4 PDF. Notice the Acroform fields are re-written with editable combo box controls. The combo boxes are pre-populated with the names of relevant e-form fields from the flow for the purposes of field mapping.
...
Click on the Form Viewer control to select it. Select the W-4 form from the Form dropdown on the properties pane. Click Finish to return to the Flow View in the Flow editor. Click Finish again to save your changes.
Assign a thumbnail to the Employee On Boarding Flow
...
- Log in as the designer. Click on Spaces.
- Click
- 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 a menu item in the newly created space.
- To access your space from a mobile device, in this case, the iPad, click the
5. 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. Your space will look similar to the image below, when accessed from the iPad.
Test the Employee On Boarding Flow
...