| Section | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
- If a designer uploads a custom.js file to a project, it is only available for forms/flows workflows in that project. Refer to Method 1a below for the details.
- If a superuser/tenant admin uploads custom.js to the tenant, then the custom.js will be available to all forms/flows workflows in the tenant. Refer to Method 1b below for the details.
| Note |
|---|
Custom.js scripts can be uploaded at two levels in :
|
Method 2: Add a Message Control that contains your JavaScript. Refer to Method 2 below for the details.
...
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. Application 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 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.
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.
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
Once you have uploaded the JavaScript, it is available for all forms/flows workflows 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 uploaded JavaScript to enter dashes in the Social Security Number field while the user is entering the data.
...
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 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.
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.
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
Once you have uploaded the JavaScript, it is available for all designers in your tenant to use in their forms/flowsworkflows. 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.
| Tip |
|---|
|
What if I upload different custom JavaScripts to a project and the tenant?
If you upload custom JavaScript to the tenant and then upload a different custom.js file to a project, will load both files. The functionality of both scripts will be available to a designer creating forms/flows 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.
...
A designer creating forms/flows workflows in the application will have access to both custom scripts. Both scripts will function properly.
...
| Code Block |
|---|
/*
* 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');
}
} |
Extensions for
...
workflows
In addition to the above, flows workflows also support a few other methods.
...
- onNextClicked() is called when the Continue button is clicked: this button might be labeled Continue or Finish or might have a custom label assigned by you. The parameters are the name and id of the current activity (step) in the flowworkflow.
- onNavClicked() is called when the user clicks on a link in the Navigation toolbar if it is displayed. The parameters are the name and id of the activity (step) in the flow workflow that is clicked.
- Finally, onSaveSuccess() and onSaveFailure() for flows workflows must be defined in the CustomFlowEventHandlers class.
...