|
You have the choice of two different approaches:
Method 1: Create a file with your JavaScript . Name it custom.js. The custom.js file can be uploaded to a project or on the tenant level.
Custom.js scripts can be uploaded at two levels in frevvo:
|
Method 2: Add a Message Control that contains your JavaScript. Refer to Method 2 below for the details.
Upload your custom JavaScript to frevvo via the Scripts tab on the left menu inside your project.
Follow these steps:
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.
Login 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.
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.
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. |
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.
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.
The 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 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 frevvo tenant via the Scripts link on the Manage Tenants page.
Follow these steps:
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.
Login to frevvo as a superuser/tenant admin. Navigate to the Manage Tenant screen. Click the Manage Script link.
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.
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. |
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.
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, 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.
|
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.
|
A designer creating forms/workflows in the project will have access to both custom scripts. Both scripts will function properly.
Uploading custom.js files with the same class name on the project and tenant levels is not recommended. This could result in unpredictable behavior. When two custom event handlers are bound to the same event (tenant level and project level), there is no guarantee which handler is called first. This is under the control of the JavaScript engine. Rewrite your JavaScript to avoid this situation.
Follow these steps to add JavaScript to your form using the Message control:
Here is an example of the script tag: Drop your code inside of the script tag.
<script> /* <![CDATA[ */ code goes here /* ]]> */ </script> |
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. |
You can call any JavaScript code in a handler; you can access the DOM of the page (note that you only have access to the DOM of the iframe in which the form is rendered assuming you're using a standard embedding) or call external code. In addition, you have access to the following methods:
Here is an example of a custom event handler:
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 's-submit')) FEvent.observe(el, 'click', this.submitClicked.bindAsObserver(this,el)); else if (CustomView.hasClass(el, 'my-class')) FEvent.observe(el, 'change', this.myHandler.bindAsObserver(this,el)); }, submitClicked: function (evt, el) { alert ('Submit button was clicked'); }, myHandler: function (evt, el) { alert ('My Class change handler called'); }, onSaveSuccess: function (submissionId) { alert ("Save complete. New submission id is: " + submissionId); }, onSaveFailure: function () { alert ("Save failed"); } } |
Let's look in a little more detail
You can add different event handling to your JavaScript code. This example handles click, mouseover and mouseout events to the Submit button:
/* * Custom Javascript here. */ var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 's-submit')) { alert('setting up s-submit events'); FEvent.observe(el, 'click', this.submitClicked.bindAsObserver(this,el)); FEvent.observe(el, 'mouseover', this.submitMouseOver.bindAsObserver(this,el)); FEvent.observe(el, 'mouseout', this.submitMouseOut.bindAsObserver(this,el)); } }, submitClicked: function (evt, el) { alert ('Submit button was clicked'); }, submitMouseOver: function (event, element) { alert ('Submit mouse over'); }, submitMouseOut: function (event, element) { alert ('Submit mouse out'); } } |
In addition to the above, workflows also support a few other methods.
var CustomFlowEventHandlers = { onNextClicked: function (name, id) { alert ("Next button clicked for activity: " + name); }, onNavClicked: function (name, id) { alert ("Nav button clicked for activity: " + name); }, onSaveSuccess: function (submissionId) { alert ("Save complete. New submission id is: " + submissionId); }, onSaveFailure: function () { alert ("Save failed"); } } |
As the method names indicate
It's not currently possible to directly fire a custom.js handler from a business rule. You can write a form.load rule that sets the value of a hidden control and set a change handler for that control in your custom.js Custom Handlers.