Page Comparison

...

Here is what the MAIN panel should look like at this point:

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

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

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:

Image Removed

14. Add another panel for the Address part of the form underneath the second PageBreak. Leave the width at the default value of 49%

15. Drag and drop two text fields into this panel for the street address and city. Name them Street. and City. Make them both Required. 

16. Drag and drop two more panels into this panel. Give one of the panels a width of 44% and the other one should have a width of 45%.

17. Drag a dropdown control from the palette and drop it in the 44% width panel. Name it State. Type in some options such as: 

CT=CT
MA=MA 
ME=ME 
NH=NH 
NY=NY
VT=VT

...

• We will now add another panel similar to the one we just built to collect Address information from the new employee. Leave the width at the default value of 49%.
• Drag and drop two text fields into this panel for the street address and city. Name them Street. and City. Make them both Required.
• Drag and drop an email control into the address panel.

16. Drag and drop two more panels into this panel. Give one of the panels a width of 44% and the other one should have a width of 45%.

17. Drag a dropdown control from the palette and drop it in the 44% width panel. Name it State. Type in some options such as:

CT=CT
MA=MA 
ME=ME 
NH=NH 
NY=NY
VT=VT

18. Drop a text control into the last panel added. Name it Zip. Enter this pattern \d{5} in the pattern field and designate a Max Length of 5 characters.

.   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");
}

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:

Image Added

14.

19.  lets you take advantage of the iPad's location services. The  Geo-location feature works with rules. Below is an example of a rule that fills in the street, city, state and zip controls each time the location is updated.  For now, add this rule to your form now and we will turn the feature on in the flow later in this tutorial.  

if (form.positionUpdated) {
  var x = _data.getParameter ("position.street_number");
  Street.value = _data.getParameter ("position.street_number") + ' ' + _data.getParameter ("position.route");
  City.value = _data.getParameter ("position.locality");
  State.value = _data.getParameter ("position.administrative_area_level_1");
  Zip.value = _data.getParameter ("position.postal_code");
}

20. Finally, drag and drop an email control into the address panel.

21. Add another hidden text control named FullAddress that will be populated with the City or Town, State and Zip Code via a rule. The hidden field will then be mapped for the W - 4 pdf. Here is an example of a rule that will do this:

...