Page Comparison

...

...

...

...

...

...

...

...

...

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

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

Method 1a: Upload custom JavaScript to a Project

Upload your custom JavaScript to  via to frevvo via the Scripts tab on the left menu inside your project.

...

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 CustomEventHandlers JavaScript object. Project level custom js requires that you create a JavaScript object called CustomEventHandlers.

   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 to frevvo as a designer user. Click the name of the project (or select Edit from the Action Menu) where you want to use the JavaScript. Click on the Script tab located on the left menu.

   

3. Browse your hard drive for your 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 selecting  Download from the Action Menu, it will be named custom.js.  
   

5. Once you have uploaded the JavaScript, it is available for all forms/workflows in the project. 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.

   

Method 1b - Upload custom JavaScript to a Tenant

The  superuserThe frevvo superuser/ tenant admin can upload custom JavaScript to the tenant. Custom JavaScript uploaded on the tenant level is available to all designer users in the tenant. Let's say you are the tenant frevvo tenant admin and you have written custom JavaScript to include custom fonts in Message controls or format SSN fields that you want to make available to all designers in your tenant. Upload your custom JavaScript to your tenant frevvo tenant via the Scripts link on the Manage Tenants page.

...

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

3. Browse your hard drive for your script file, then 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/workflows. 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.

   
   
   

...

If you upload custom JavaScript to the tenant and then upload a different custom.js file to a project, will frevvo will load both files. The functionality of both scripts will be available to a designer creating forms/workflows in the project. For example, let's say you upload custom JavaScript to change the first letter of each word typed into a field to upper case. The class name is CorrectCase. You upload your custom JavaScript to the tenant.

// frevvo custom JavaScript
var TenantCustomEventHandlers = {
   setup: function (el) {
       if (CustomView.hasClass(el, 'CorrectCase')) {
           FEvent.observe(el, 'input', this.doCorrectCase.bindAsObserver(this, el));
       }
   },
   doCorrectCase: function (event, element) {
       var val = element.value;
       var str = val.toLowerCase();
       var spl = str.split(" ");
       var upstring = "";
       for (var i = 0; i < spl.length; i++) {
           try { //onkeypress will cause an error on first keypress
               upstring += spl[i][0].toUpperCase();
           } catch (err) {}
           upstring += spl[i].substring(1, spl[i].length);
           upstring += " ";
       }
       element.value = upstring.substring(0, upstring.length - 1);
   }
}

You create another custom script to add the dashes to the Social Security Number as the user is typing. The class name is SSN1. You upload this custom script to an project.

// frevvo custom JavaScript
var CustomEventHandlers = {
    setup: function (el) {
        if (CustomView.hasClass(el, 'SSN1')) {
            FEvent.observe(el, 'keydown', this.formatSSN.bindAsObserver(this, el));
            FEvent.observe(el, 'keyup', this.formatSSN.bindAsObserver(this, el));
        }
    },
    formatSSN: function (event, element) {
        if (event.keyCode != 46 && event.keyCode != 8) {
            fldVal = element.value;
            var nom = fldVal.charAt(fldVal.length - 1);
            if (isNaN(nom) && nom != "-") {
                element.value = fldVal.substring(0, fldVal.length - 1);
            } else {
                if ((fldVal.length == 3) || (fldVal.length == 6)) {
                    element.value = fldVal + "-";
                }
                if (fldVal.length >= 12) {
                    element.value = fldVal.substring(0, fldVal.length - 1);
                }
            }
        }
    }
}

...

1. CustomView.$frevvoControl(el) returns the HTML element corresponding to the  control the frevvo 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 developer tools for your browser with a 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  frevvo 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.

...