Changing the Style of a Control Based on an Input Value

Once you have defined various CSS classes, you can configure the form so that the specific class to be applied to a component of the form is based on a value input by the user. In this task, we will create a computation action, so that the background color for the Claim Amount control is determined by the value a user enters in the field.

1. Select the Claim Amount control in the Design view of the Record no-fault claim details form.
2. In the Outline view, right-click Shared Actions and click New Computation Action. This opens the Add Action dialog.
   
3. In the Add Action dialog, type setAmountStatus in the Label field.
   
4. For the Destination field, indicate where the action will be applied. To do this, click the elipsis icon to open the Choose Destination dialog. Expand the Claim Amount item by clicking the plus sign, and click Style Class to select it:
   

   With this configuration, the Style Class setting for the Claim Amount control will be modified in response to the action.

5. Click OK to close the Choose Destination dialog.
6. In the Add Action dialog, enter the following script in the Expression text area:

   var amount = control.NoFaultClaimField_ClaimAmount.getValue();
   var style = "";
   if (amount > 5000) {
       "problem";
   } else if (amount > 2000) {
       "warning";
   } else {
       "";
   }

   The fields of the Add Action dialog should now be complete, as shown here:

   

   The script above is evaluated as an expression, with no return statement, not as a function. At runtime, the script will work as follows:

   • If the amount entered by the user is greater than 5000, the style defined in the .problem class will be applied to the Claim Amount control.
   • If the amount is greater than 2000, up to 5000, the style defined in the .warning class will be applied.
   • If the amount is 2000 or less, no CSS class will be applied, and the style for the control will be unchanged.
7. Now we will create a rule to specify when the above script is to be used. Click the Claim Amount field in the Design view of the form. Click the Rules tab in the Properties view. To define a rule to be used when the control is updated, click the icon to the right in the Update portion of the Rules property sheet. This will open the New Rule dialog:
   
8. In the Label field of the New Rule dialog, Rule Details screen, type Claim Amount Updated. Click Next.
9. In the Rule: Pick Events screen, the fields are already populated. Click Next.
10. In the Define Actions screen, click the plus sign to open the Add Action dialog for adding an action to a rule:
    
11. In the Add Action to Rule screen, click the radio button Pick an existing action. Click the elipsis to the right of the field to open the Select Item dialog:
    
12. Click setAmountStatus to select it and click OK.
13. Click Finish twice to accept your settings and close the New Rule dialog.
14. Check your results by clicking the GI Preview tab for the form. Experiment by entering different values for the Claim Amount field, including values greater than 5000, between 2000 and 5000, and less than 2000.

Copyright © Cloud Software Group, Inc. All rights reserved.