Versions Compared

Key

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

now enables universal access to e-forms and workflows on tablets and smart phones in addition to desktop support on all standard browsers. iOS 6+ devices, iPad and iPhone, running mobile safari are supported. This tutorial will incorporate several features into an Employee On Boarding workflow. For example;

  • Touch screen wet signature - the new employee can sign to verify the information using their finger or a pointer.
  • Take advantage of device specific capabilities - you will see the correct date picker and keyboards pop-up on your mobile device
  • Screenflows - ability to further divide a screenflow into sections that better lend themselves to an iPad or iPhone using the PageBreak control
  • Ability to upload an existing image or a picture taken with the device camera to the e-form
  • Use the iPad's location services to fill in the address
  • Spaces that render in a device specific manner - support swipe gestures and customized icons
  • Enhanced Task List for mobile devices
  • Quick Approval feature - allows quick review of a task by the appropriate person with accept/reject buttons
  • Generate an additional Pixel Perfect PDF for the federal W - 4 form. It is important to note here that there is no limit on the number of PDFs that can be generated. For example, you can collect the information in your form once and then use it to fill in an unlimited amount of PDFs for the new employee i.e. -the federal W - 4 and the I - 9.
Info

  You can download this tutorial as a PDF.


Please view the New Employee On Boarding video for an introduction to some of the exciting features we will be using in this tutorial.

We estimate about 2.5 to 3.0 hours for an experienced designer to complete this tutorial. It may take up to 4.0 hours if you are a new user. 

Column
width25%

On This Page:

Table of Contents
 

...

Allowances Form in the designer

  • Drag three Quantity controls from the palette and drop them on the designer canvas. Name them A_Allowance, C_Allowance and D_Allowance respectively. Type the instructions for A, C and D allowances as the labels for these controls. Add a fourth Quantity control where the result of the calculation of the total allowances can be stored. Name this control Total_Allowances and type "Total number of allowances you are claiming" as it's label. Uncheck the Enabled property for this control.
  • Add a Wet Signature control so the Employee can sign using the a track pad/mouse or a touch screen to verify the allowance selections entered into the form. This is what the new employee will see when signing. Set the label to Employee's Signature

Image Removed

  • Drag and drop a date control under the signature. Name it TodaysDate and uncheck the enabled property.
  • Here is a rule to populate the Today's Date control when the new employee signs. 

...

titleClick here to see how to create this rule

The Visual Rule Builder consists of 3 wizards:

  • Condition wizard - describe the conditions under which a set of actions should be executed
  • Action wizard - declare the actions that should be taken when the condition is true
  • Else Action wizard - declare the actions that should be taken when the condition is false

...

Image Removed

...

We will add another rule that will add the values for the A_Allowance, C_Allowance and D_allowance controls and store it in the Total_Allowances field. 

...

For this tutorial, we'll just create controls for Filing Status, Step 2: Multiple Jobs, and Step 3: Claim Dependent.

Tip

Download and install this example EOB workflow which includes a fully-mapped W-4. 

  1. Drag and Drop an Image control from the palette, and upload an image of the IRS logo or the top of the W-4 form to give your users a frame of reference when they are filling out this form.
  2. Drag a Message Control into the form. In the Message Property, type

    Code Block
    Please complete the information below. A Federal W-4 Form will be generated. You will have the opportunity to review the form before submitting.

    Change the Type to Bordered. On the Style tab, select Bold.

  3. Drag and drop a Section control to your form and name it Filing Status
  4. Drag a radio control into that section. Name it Federal Filing Status. Enter these options:

    Code Block
    Single_or_Married_filing_seperately=Single or Married filing seperately
    Married_filing_jointly=Married filing jointly (or qualifying widow(er))
    Head_of_Household=Head of Household (Check only if you're unmarried and pay more than half the costs of keeping up a home for yourself and a qualifying individual.)

    Check the Required property.

  5. Drag in another section and name it Step 2: Multiple Jobs.
  6. Drag a checkbox control into the Step 2: Multiple Jobs section. Name it Multiple Jobs or Spouse works, and add just a single option:

    Code Block
    Only_2_Jobs=If there are only two jobs total, you may check this box. Do the same on From W-4 for the other job. This option is accurate for jobs with similar pay; otherwise, more tax than necessary may be withheld.
  7. Drag in another section and name it Step 3: Claim Dependents.

  8. Drag two quantity controls inside that section, named "Number of Qualifying Children Under Age 17" and "Number of Other Dependents".
  9. Drag three number controls inside that same section. Uncheck the Required and Enabled properties (we will set them using rules later, and this is what we'll map to the W-4.) Label them "Dependent Child Calculation", "Other Dependent Calculation", and "Claim Dependents Total" (name Step3TOTAL used in rule below).

Add a Wet Signature control so the Employee can sign using the a track pad/mouse or a touch screen to verify the allowance selections entered into the form. This is what the new employee will see when signing. Set the label to Employee's Signature

Image Added

  • Drag and drop a date control under the signature. Name it TodaysDate and uncheck the enabled property.
  • Here is a rule to populate the Today's Date control when the new employee signs. 
Expand
titleClick here to see how to create this rule

The Visual Rule Builder consists of 3 wizards:

  • Condition wizard - describe the conditions under which a set of actions should be executed
  • Action wizard - declare the actions that should be taken when the condition is true
  • Else Action wizard - declare the actions that should be taken when the condition is false
  1. Click on the Image Added Rules icon on the designer toolbar to access the Rules Editor. 
  2. Click the Image Addedto add the rule.
  3. Name it Populate Today's Date when the new employee signs.
  4. Click Add Condition - this is the Condition wizard
  5. Select EmployeeSSignature from the first dropdown.
  6. Select isFilled from the second dropdown
  7. Click Next
  8. Select TodaySDatein the first dropdown.
  9. Select to in the second dropdown
  10. Start typing today and select function today() from the dropdown
  11. Click Next and go to false condition
  12. Select TodaySDatein the first dropdown.
  13. Select to empty in the second dropdown
  14. Click Finish

Image Added

  • We will use rules to calculate the dependent allowances. 

    Expand
    titleClick here to see how to create these rules

    Calculate Dependents Rule

    1. Click the Image Addedto add the rule.
    2. Name it Compute Total Allowances
    3. Click Rule Code, then Edit Code.
    4. Paste this text into the code box.

      Code Block
      var event = form.load;
      if (Boolean(NumberOfOtherDependents.value)) {
        DependentCalculation.value = (NumberOfOtherDependents.value * 500);
      } else {
        DependentCalculation.value = null;
      }
      if (Boolean(NumberOfQualifyingChildren.value)) {
        ChildrenCalculation.value = (NumberOfQualifyingChildren.value * 2000);
      } else {
        ChildrenCalculation.value = null;
      }
      Tip

      If you prefer to use the Visual Rule Builder, simple create two separate rules; one the sets DependentCalculation to NumberofOtherDependents * 500, and a second that sets Children Calculation to NumberOfQualifyingChildren * 2000.

    The Visual Rule Builder consists of 3 wizards:

    • Condition wizard - describe the conditions under which a set of actions should be executed
    • Action wizard - declare the actions that should be taken when the condition is true
    • Else Action wizard - declare the actions that should be taken when the condition is false
    1. Click the Image Removedto add the rule.
    2. Name it Compute Total Allowances
    3. Click Next - to take you to the Action wizard
    4. Select Total_Allowance from the first dropdown.Click the Image Addedto add the rule.
    5. Name it Calculate Dependents Total
    6. Click Run Builder
    7. On the Condition Wizard, select DependentCalculation - is filled.
    8. Add another Condition, select ChildrenCalculation - is filled.
    9. Click Edit Logic. Change the "and" to "or". Click Save. This rule should run if either field is filled.
    10. Click Next.
    11. Select Step3TOTAL from the first dropdown. (or replace Step3TOTAL with your control's name)
    12. Select to from the second dropdown
    13. Type Sum in the third field. The function shows in the dropdown. Select function Sum.
    14. Type A_Allowance, C_Allowance, D_Allowance DependentCalculation, ChildrenCalculation inside the sum bracket.
    15. Close the function.Click Next.
    16. On the else action wizard, set Step3TOTAL to empty. 
    17. Click Finish.

    Image RemovedImage Added

  •  Be sure to save your form by clicking on the  save and exit icon in the designer.
  •  You can test this form by clicking on the Test button on the Forms Home Page. The Today's Date field should be populated with the current date when the new employee signs. The sum of the values entered in A_allowance, B_allowance,and C_allowance will dependent allowance values will be calculated and display in the Total_Allowances total field.

Create the Education Form

...

  1. Log in as the designer. Click on the Spaces tab.
  2. Click Add to create a new space, type a Space ID and Space Name, and then click Create. You will be directed to the space designer.
  3. Since we set the state of the Employee On Boarding workflow to Production in a previous step, it will automatically be included, along with the Task List as menu items in the newly created space. 
  4. Verify that the left panel is hidden. If not, click the  icon to hide it.
  5. Select regular for the form width from the Min Width dropdown on the Property pane.
  6. If your tenant is in the cloud, click the Save and Exit icon and proceed to the Test the Employee On Boarding workflow section.
  7. If you are using an in-house installation,
    1. Click the menu edit icon. Replace the <localhost:8082> in the urls for the Task List and the Employee On Boarding workflow with your server name and port. If you are concerned about portability to another system, make the URL's relative by removing the protocol, server and port information.
    2. Click the Save and Exit icon to save the changes and proceed to the Test the Employee On Boarding workflow section.

...