Versions Compared

Key

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

...

  • 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% 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. Name them Street. 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

...

Code Block
CT=CT
MA=MA 
ME=ME 
NH=NH 
NY=NY
VT=VT

...

  • the names of some states into the Options section on the dropdown control property pane:

Image Added

  • Drop a text control into the last panel added. Name it Zip Code and make it Required. Enter this pattern \d{5} in the pattern field and 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:

Image Added

  • Click the Finish button to save the work we have done up to this point.
  •  Click the Image Added icon for the Employee Information form to continue editing.
  • 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 address panel. 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.

Image Added

This is the prompt that users will see on the iPhone or iPad.

Image Added

.   9. Click on the Rules button on the designer toolbar to access the Rules Editor. Click the Image Added icon then the 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.

...

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

...

Column
width25%

Image Removed

Upload control in the Designer

...

width20%

Image Removed

...

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

...