Versions Compared

Key

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

You can add custom behaviors by adding JavaScript to your form/flow by adding JavaScript. For example, you may want to change the look of your form's submit button when the user hovers the mouse over the button. It is possible to associate a custom JavaScript handler to any form control.  See Custom JavaScript Examples for sample code.

Warning

Although JavaScript will accomplish the task, it is important to note that your scripts are not subjected to formal testing by the frevvo quality assurance team. Choosing an approach that is part of the product like Business Rules is a better choice than adding JavaScript since released versions undergo rigorous quality assurance testing. Customizations using JavaScript should only be used under special situations and if there is no other way to customize the form to the requirements.

For example, let's say you have a message control in your form that contains markup to pull a custom JavaScript. The URL for the script contains the home directory and revision number - (http://localhost:8080/frevvo/js-24487/libs/script.js).  An upgrade of  to new release or revision version could potentially stop the form from working.

If you choose to add JavaScript, we strongly recommend that you are familiar with a JavaScript debugger / web development tool such as the Firebug extension for Firefox.

Column
width240px

On this page:

Table of Contents
maxLevel2

...

  1. Method 1 -  Add JavaScript to the custom.js file then upload it into your application.
  2. Method 2 -  Add a Message Control that contains your JavaScript.
  3. Method 3 - Add JavaScript to the include.js file located inside the frevvo war.

Method 1

...

Upload your custom JavaScript to  via the Scripts tab on the left menu inside your application. Follow these steps:

  1. Your custom JavaScript must contain the comment // frevvo custom JavaScript as the first line of the file or the upload will not be successful. Here is an example of code that will add dashes to a Social Security number control as the user is typing it in. See Custom JavaScript Examples for information on this sample code. Notice the JavaScript comment is the first line in the script file.



  2. Login to  as a designer user. Click the Edit icon for the application where you want to use the JavaScript. Click on the Script tab located on the left menu.



  3. Browse your hard drive for you script file, Click Upload. Your file will be uploaded and it will display with the name Custom Script even though your script file may have another name. Be Aware that existing JavaScript files will be overwritten...

  4. If you need to modify the script, you must download it, make your modifications and then upload it again. When you download the script by clicking on the   Download icon, it will be named custom.js.  

  5. Clicking on the  Documentation icon brings you here.

  6. Once you have uploaded the JavaScript, it is available for all forms/flows in the application. Remember to add the CSS class name to your form controls or your JavaScript may not work. Here is an image of an Employee Information form using an uploaded JavaScript to enter dashes in the Social Security Number field while the user is entering the data.

      

...



Tip

If your JavaScript does not behave as expected after upgrading your version of , it may be caused by a scrubbing of the custom.js file content by XSS protection. You may notice that all your code is on a single commented out line upon Inspection of the custom.js file. Upload an "unsrubbed" version of your custom.js file to solve the issue. In-house customers should refer to the Uploaded Custom JavaScript for Forms/Flows topic if you are planning an upgrade.

Method 2

Follow these steps to add JavaScript to your form using the Message control:

...

Code Block
 <script>
        /* <![CDATA[ */
        code goes here
        /* ]]> */
</script>

Method 3

...

Add JavaScript to the WEB-INF/rules/includes.js file located in the <frevvo-home>\tomcat\webapps\frevvo.war. Includes.js is only for including javascript into rules that run server-side. The contents of this file are included in the Rule Execution when the context initializes.

...

Here is an example of a snippet of code when added to the include.js will allow you to do something like this in a rule: DateControl?.value =MyUtil?.today();

Code Block
var MyUtil = {
    today: function() {
        var d = new Date();
        var dd = d.getDate();
        if (dd < 10) dd = '0' + dd;
        var mm = d.getMonth() + 1;
        if (mm < 10) mm = '0' + mm;
        var yyyy = d.getFullYear();
        return String(mm + "-" + dd + "-" + yyyy);
    }
}

If you wish to inject client-side script, the only option is to append your javascript into one of the minified js files in the frevvo.war. form.pack.js is one such file and can be found iafter after unzipping the frevvo.war in the /js-revision folder (revision being the 5-digit revision number of your build).

...