Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • Click the Finish button to save the work we have done up to this point.
  •  Click On the Forms Home Page, Click the  icon for the Employee Information form to continue editing.
  • Add a hidden text control beneath the panels named FullAddress 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.

  

  

.   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

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

...

  •  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 pdf.          

  Image Added

The Employee Information form should look like this at this point:

Image Added

  • Click the Finish button to save the work we have done.
  • On the Forms Home Page, Click the Image Added 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 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 Image Added icon then the Image Added 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.
Code Block
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.

...

.reports.to");
}
  • Click the Image Added icon to collapse the rule window and then click the Image Added to add the second rule. Call this rule Combine First Name and Initial. Copy/Paste the rule below into the rules canvas.
Code Block
FirstPlusInitial.value = FirstName.value + ' ' + Initial.value;
  • Click the Image Added icon to collapse the rule window and then click the Image Added to add the third rule. Call this rule Full Address. Copy/Paste the rule below into the rules canvas.
Code Block
FullAddress.value = City.value + ' ' + State.value + ' ' + ZipCode.value;
  • 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 tutorialClick the Image Added icon to collapse the rule window and then click the Image Added to add the fourth rule. Call this rule Location. Copy/Paste the rule below into the rules canvas.  
Code Block
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");
  ZipZipCode.value = _data.getParameter ("position.postal_code");
}

20.

21.

Code Block
FullAddress.value = City.value + ' ' + State.value + ' ' + Zip.value;

 22. Adding a PageBreak control beneath the Address panel with Phone checked and tablet unchecked will display the address information on it's own page on the iPhone and next to the previous page on the iPad.

Image Removed

Here's what it will look like on the iPad 

23.

 24. 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 pdf.           


Image Removed 

Click the Control button in the designer toolbar to return to the form. Your rules will be saved.

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

 

 22. Adding a PageBreak control beneath the Address panel with Phone checked and tablet unchecked will display the address information on it's own page on the iPhone and next to the previous page on the iPad.

Image Added

Here's what it will look like on the iPad 

23.

 24.

 

25. Click the Finish button to save the Employee Information form.

...