Controlling, Styling, and Validating Input from Workflow Forms

When you configure a workflow to retrieve input data from users through the Web Console Forms application, you can use the Dynamic Form Rules page in the Web Console to dynamically change the form inputs based on rules, style form elements with Cascading Style Sheet (CSS) definitions, and validate user input data with JavaScript.

Before You Begin

• You must be able to log in to the Web Console.

• The dynamic form rules only apply to workflows with user input forms. For more information about workflow forms and activities used in the workflow forms, see Running Workflows from the Web Console and Activities - User Interaction.

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.

   Tip

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

5. In the Rules tab, add form rules to control the user experience of the form.

   For more information about adding rules, see Adding Dynamic Rules to Workflow Forms.

6. 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;
     }

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