Page Comparison

...

• Drag a panel from the palette and drop it on the designer canvas 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 pdf later in this tutorial.
• Drop two more panels into the main panel ABOVE the FirstPlusInitial 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.

...

• 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 Intial 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 Control 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 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:

...

...