Page Comparison

...

Logon to  as a designer. We will create the screenflow in the Forms designer and then drag them into the Flow designer to make the Employee On Boarding flow. Click the  to create a new Application. Click on the  to edit that application. Invoke the new form wizard by clicking on the  New icon at the top of the Forms Home Page. Click the Next button to navigate through the wizard. Name the form Employee Information. 

• 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 under 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. Select a format from the Date Format dropdown. Check Required on the date control's property panel.
• Add a text control below 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.

  5. Image Added

• Drag a panel from the palette and drop it on the designer canvas

...

  6. Add a text control named FirstName to the first panel and a text control named Initial to the second panel. Check the required property on the FirstName field but do not make the control named Initial required. 

  7. Add another text field below these panels. Uncheck the visible property for this control. 

...

• below the Your Manager Is control. We will refer to this as the main panel.
• Drop a text control inside the main panel. 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

...

  9. Click on the Rules button on the designer toolbar to access the Rules Editor. Click the Image Removed icon then the Image Removed icon to open the Rules validator screen. Give your rule a name. Copy/Paste the rule below into the rules canvas. Click the Control button in the designer toolbar to return to the form. Your rule will be saved.

Image Removed

FirstPlusInitial.value = FirstName.value + ' ' + Initial.value;

10. Drag a text control from the palette to the canvas and position it below the FirstPlusInitial field. Name this control LastName. Check Required on the Property pane. We will usa a rule to fill in the Manager's name and the first and last name of the new employee from the logon information using the _data.getParameter('<data name>') syntax. Here is an example:

...

• pdf later in this tutorial.
• Drop two more panels into the main panel ABOVE the FirstPlusInitial control. Change the widths of these two panels to 55% and 39% respectively.
• Drag and drop a text control with a label of First Name inside the first panel and a text control named Initial into the second panel. Check the required property on the FirstName field but do not make the control named Initial required. 
• Add a text control to the MAIN panel underneath the FirstPlusInitial control. Label it Last Name. Check the Required Property.
• Add a text control to the MAIN panel below the LastName - 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. Make sure the required property is checked. 
• Add a phone control below SSn in the MAIN panel. Name the control Phone. Help text showing different formats for the phone number is provided when you add the control to the form.

.   9. Click on the Rules button on the designer toolbar to access the Rules Editor. Click the Image Added icon then the Image Added icon to open the Rules validator screen. Give your rule a name. Copy/Paste the rule below into the rules canvas. Click the Control button in the designer toolbar to return to the form. Your rule will be saved.

Image Added

FirstPlusInitial.value = FirstName.value + ' ' + Initial.value;

if (form.load)
{
  FirstName.value = _data.getParameter("subject.first.name");
  LastName.value = _data.getParameter("subject.last.name");
  manager.value = _data.getParameter("subject.reports.to");
}

11. Add one more text control below the LastName - 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. Make sure the required property is checked. 

...

13. 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 PageBreak will appear on the first page when the form is rendered on the iPad or the iPhone. You may have to drop the PageBreak control onto the canvas and then move the image, Date of Birth and Your Manager controls above it. Drag another PageBreak control below this panel. Check phone and uncheck tablet on the PageBreak property panel. At this point, your form should look similar to the image below:

...