Tools & Utilities > Developer Tools > Workflow > Configuration > Configuring Workflow Properties > Controlling, Styling, and Validating Input from Workflow Forms > Customizing a Form Using a JavaScript and CSS Code

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. For a user interaction activity that has user inputs, from the properties pane, on the Inputs tab, select the input, and then click Customize.

   The properties dialog box appears.

2. Click the Look and Feel tab, and then click Additional customizations for web.
3. If prompted, confirm that you want to save and then close the workflow.
4. Log in to the Web Console.

   The Dynamic Form Rules page appears.

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

5. In the Code tab, 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 of not user input is valid.

     Example: The following code uses jQuery and checks for a valid email address by checking 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.

     Example: The following code sets the color for an input to blue:

     #input_name {
       color: blue;
     }

6. When you are finished with your changes, do one of the following:
   • To save your changes without deploying them to end users, in the upper-right corner of the page, click Save.
   • To save and deploy your changes to end users, in the upper-right corner of the page, click Save & Deploy.

     When you click Save & Deploy, a confirmation message appears.

Last modified: 6/15/2020 10:08:12 AM