Versions Compared

Version Old Version 6 New Version 7
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 such as the Firebug extension for Firefox.

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.

...

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

  1. Add a message control to your form.
  2. Add a <script> tag in the message property. 
  3. Put your JavaScript inside the script tag.

...

  1. CustomView.$frevvoControl(el) returns the HTML element corresponding to the  control that triggered the handler. This is typically a DIV HTML element and typically has CSS class 'f-control'
  2. CustomView.getState (el) returns the state of the control as a JavaScript object. The state contains things like the label, value, hint, help etc. Use a tool such as Firebug or a different JavaScript debugger to view it in detail.
  3. CustomView.getExtId (el) returns the name of the control as set in the Form Designer.
  4. CustomView.getIndex (el) returns the index of the control in its enclosing repeat control if the control is repeating. If the control is not repeating, it returns -1.
  5. CustomView.hasClass (el, className) returns true if the control has the indicated CSS class, false otherwise.

...

  1. You must have a class called CustomEventHandlers declared. Note that it is case-sensitive.
  2. It must have a method called setup() which takes a single argument (called el above). When the form is loaded,  will call this setup() method for each control in the form and will pass in the control as the argument.
  3. For each control we are interested in, the CustomEventHandlers class has a handler method. All handlers are functions that take two arguments: the event that triggered the handler and the control itself.
  4. The example above uses a custom CSS class on the control in question to figure out if it's the control we are interested in. You can set a custom css class for any control in the Form Designer.
  5. We're interested in two controls: the Submit button which already has a CSS class s-submit and a user-defined input control with custom CSS class my-class. For each control, we've associated a handler as described above. To associate a handler, call FEvent.observe (el, EVENT_NAME, handler) using the syntax above. The EVENT_NAME can be any standard event fired by your browser e.g. click (also called onClick) or change (also called onChange).
  6. When the event is question is fired by the control in question, your handler will be called.
  7. In addition to the event handlers, you can also provide methods that are called when the form is Saved using the Save/Load feature.
  8. The onSaveSuccess() method is called when a submission is saved and the resulting submission ID is passed in.
  9. The onSaveFailure() method is called when the save fails.

...