Customizing a Form Using a JavaScript and CSS Code

You can validate user input and customize the look and feel of the form by writing a JavaScript and CSS code.

Procedure

1. In a workflow, open the properties of a user interaction activity that has inputs.

2. On the Inputs tab, click Customization.

   The Customize dialog box appears.

   Note: While making changes to the form, click Preview to see how the form will appear to Web Console users.

3. Validate input data or style the form as follows:

   Important: Reference your inputs by prefixing the name of the input with a number sign (#). For example, if your input is emailAddress, reference it as #emailAddress in your JavaScript code or CSS definitions.

   • To validate user input data, in the Javascript box, enter code to determine whether user input is valid.

     For example, the following code uses jQuery and checks for a valid email address by verifying that an at sign (@) and a period (.) are present in the user input. This code also changes the text color when an incorrect email address is entered.

     function isEmailValid(txt) {  if($.trim(txt).length == 0) {    return false;  }  var pattern = /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/;  if(pattern.test(txt).toString() == "false"){    return false;  }  return true;
     
     }
     
     $("#emailAddress" ).keyup(function(event) {  var focusSet = false;  var isValid = true;  if (isEmailValid($("#emailAddress").val()) == false) {    if ($("#emailAddress").parent().next(".valError").length == 0) {      // add a div with the error message only add if not already added      $("#emailAddress").parent().after("<div class='valError'>Please enter a valid email address for example, name@company.com</div>");      //disable the buttons      $('.btns').addClass('disabledActions');      //change the text to red      $("#emailAddress").css('color', 'red');    }    isValid = false;     if (focusSet == false) {      $("#emailAddress").focus();      focusSet = true;    }  } else {    // if the field is valid, remove the error line    $("#emailAddress").parent().next(".valError").remove();     //enable the buttons    $('.btns').removeClass('disabledActions');    //change the text to normal    $("#emailAddress").css('color', 'black');  }  if(isValid == false) {    event.stopImmediatePropagation();   }
     
     });

   • To style elements in the form, in the CSS box, enter style definitions.

     For example, the following code sets the color for an input to blue:

     #input_name {  color: blue;
     
     }

   • To style the elements and the background in the form, in the CSS box, enter the style definitions.

     For example, the following code sets the background color, font color, and height of the input field:

     #input_name {
     
       height: 540px !important;
     
       background-color: red !important;
     
       color: white !important;
     
     }

4. Click OK.