Versions Compared

Version Old Version 9 New Version 10
Changes made by

Megan Ellis

Megan Ellis

Saved on

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. 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 for your browser.

Column
width300px

On this page:

Table of Contents
maxLevel2

...

    1. If a designer uploads a custom.js file to an application, it is only available for forms/flows in that application. Refer to Method 1a below for the details.
    2. If a superuser/tenant admin uploads custom.js to the tenant, then the custom.js will be available to all forms/flows in the tenant. Refer to Method 1b below for the details.
Note

Custom.js scripts can be uploaded at two levels in :

  • Application level (i.e. inside an open application) -  At the application level, you must use the CustomEventHandlers JavaScript object.  
  • Tenant level - The custom.js can only be uploaded to the tenant level by the tenant administrator.  At the tenant level, the custom.js file must use the TenantCustomEventHandlers JavaScript object.  
  • If a custom.js file contains the wrong custom handler for the level you are uploading it to, you may see a delay in loading and the custom.js will not work. Verify that the CustomEventHandler is correct.


Method 2 -  Add a Message Control that contains your JavaScript. Refer to  Method 2 below for the details.

...

  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. Note the TenantEventHandlers JavaScript object. Tenant level custom js requires that you create a JavaScript object called TenantCustomEventHandlers.

    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 superuser/tenant admin. Navigate to the Manage Tenant screen. Click the Manage Script link.



  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.

    Warning

    Be Aware that existing JavaScript files will be overwritten. Download the existing custom.js file, append your new code to existing code then upload the combined file if you want to preserve the existing JavaScript


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

  5. Once you have uploaded the JavaScript, it is available for all designers in your tenant to use in their forms/flows.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 uploaded JavaScript to enter dashes in the Social Security Number field while the user is entering the data.



...

Note

If you choose to use the Message Control with a Script tag to load your custom JavaScript for custom fonts, you must add your code inside the Script tag then add the HTML after the Script tag.

Excerpt
hiddentrue

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.

You can add any JS that you want with the following caveats:

  • It is not supported by frevvo.
  • It is not guaranteed to be backward-compatible i.e. in the next version, you may have to change this. 

Follow these steps to add JavaScript to the includes.js file:

...

  1. Stop frevvo if it is running. 
  2. Change the file extension from .war to .zip if necessary and unpack the frevvo.war file to a temporary location of your choice: e.g. c:\tmp\frevvo-war. 
  3. Navigate to c:\tmp\frevvo-war\frevvo\WEB-INF\rules.
  4. Edit the include.js file and add your custom JavaScript. Save the changes to the include.js file. 

  5. Rezip all the files in the c:\tmp\frevvo-war directory, even the ones you did not edit — if you change directories or zip them differently,

...

  1. frevvo may not load correctly.

  2. Change the file extension from .zip to .war, if necessary. Copy the updated frevvo.war file to <frevvo-home>tomcat\webapps.
  3. Restart

...

  1. your frevvo server.

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 unzipping the frevvo.war in the /js-revision folder (revision being the 5-digit revision number of your build).

Warning

You should not assume the availability of JavaScript libraries in your Custom Javascript handlers. Functions should be part of the standard JavaScript environment. A good reference for what is and is not in standard JavaScript can be found here: (Core Javascript) and here: (browser DOM reference).

What can you do in a handler

...