Section | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Add CorrectCase to the CSS Class property of the control to enable this JavaScript.
Limit selection of checkbox options
The JavaScript below will limit the choices to a maximum of three for a checkbox control in a form. Add limit3 to the CSS Class property of that control to enable this JavaScript.
Scroll to Top
A Tab control with many fields in each tab, may require a long scroll to switch from one tab to another. You can use a trigger control at the bottom of the first tab with a business rule to navigate the user to the second tab when the trigger is clicked. For example, when you click on the Next Tab trigger control on the Personal Information tab in the Application for Employment form shown a business rule will navigate the user to the Employment History tab.
You can use the following JavaScript to force the page to be scrolled to the top after switching to the second tab:
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'limit3my-scroll')) { FEvent.observe(el, 'click', this.checkboxlimitscrollTop.bindAsObserver(this, el)); } }, checkboxlimitscrollTop: function (evtevent, elelement) { var checkgroup = el.childrenWithClassName('input'); var limit = 3; for (var i = 0; i < checkgroup.length; i++) { checkgroup[i].onclick = function () { var checkedcount = 0 for (var i = 0; i < checkgroup.length; i++) document.getElementById("wrapper").scrollIntoView(); } } |
Add my-scroll to the CSS Class property of the Trigger control which navigates the user to the second tab.
Allow only PDF attachments
You have an upload control in your form and you want to limit the type of documents allowed to PDF only. Use the following JavaScript to validate if the uploaded document has a .pdf extension, and remove it if it doesn't. Add onlyPDF to the CSS Class property of your Upload control to enable this JavaScript.
Code Block |
---|
var CustomEventHandlers = { uploadEl: null, setup: function (el) { if (CustomView.hasClass(el, 'onlyPDF')) { checkedcount += (checkgroup[i].checked) ? 1 : 0this.uploadEl = el; } window.setTimeout('CustomEventHandlers.checkFile()', 3000); // set ifthe (checkedcountinitial >timer limit) { }, checkFile: function () { this.checked = false for (for (var i = 0; i < checkgroupthis.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name').length; i++) { (checkgroup[i].checked) ? checkgroup[i].disabled = false : checkgroup[i].disabled = true;if (!(/^.*\.(pdf|PDF)$/.test(this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title')))) { alert("Invalid }file else'" { + this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title') + "' will be removed."); for (var i = 0; i < checkgroup.length; i++) this.uploadEl.parentNode.childrenWithClassName('f-upload-file-list-delete')[i].click(); } } checkgroup[i].disabled = false; window.setTimeout('CustomEventHandlers.checkFile()', 3000); } } } } } |
Scroll to Top
A Tab control with many fields in each tab, may require a long scroll to switch from one tab to another. You can use a trigger control at the bottom of the first tab with a business rule to navigate the user to the second tab when the trigger is clicked. For example, when you click on the Next Tab trigger control on the Personal Information tab in the Application for Employment form shown a business rule will navigate the user to the Employment History tab.
...
Automatically submit a form
You have a new customer registration Form A that is normally forwarded to Forms B and C to complete registration for a new user. Returning Users skip Form B and go directly to form C. A workflow with a precondition that skips a step or a templatized value of a control to decide where the user should be forwarded using Business Rules are recommended approaches and should be considered. This JavaScript allows the user to bypass a form when it is not required and can be used if the recommended approaches are not possible. It will automatically submit a form if a certain control has some specific value (say “not-new”) in it.
Code Block |
---|
var CustomEventHandlers = { submitEl: null, setup: function (el) { if (CustomView.hasClass(el, 'myconditional-scrollsubmit')) { FEventwindow.observesetTimeout(el, 'click', this.scrollTop.bindAsObserver(this, el))'CustomEventHandlers.conditionalSubmit()', 2000); } this.submitEl },= el; scrollTop } }, conditionalSubmit: function (event, element) { var isValue = "not-new"; if (this.submitEl.value == isValue) { document SubmitView.getElementByIddoSubmit("wrapperSubmit").scrollIntoView(); } } |
...
}
},
} |
Add conditional-submit to the CSS Class property of the Trigger control which navigates the user to the second tab.
Allow only PDF attachments
You have an upload control in your form and you want to limit the type of documents allowed to PDF only. Use the following JavaScript to validate if the uploaded document has a .pdf extension, and remove it if it doesn't. Add onlyPDF to the CSS Class property of your Upload control to enable this JavaScript.
...
control whose value is to be compared.
Extra Submit button
By default, each form has a submit button located at the end of the form. The forms designer lets you easily add additonal submit buttons in a special area at the end of a form only. You can use the following JavaScript to create an extra submit button. Add a trigger control to your form and set auto-submit in the CSS Class property. Now you can use this trigger control as your Submit button and place it anywhere on your form.
Code Block |
---|
var CustomEventHandlers = { uploadElsubmitEl: null, setup: function (el) { if (CustomView.hasClass(el, 'onlyPDFauto-submit')) { FEvent.observe(el, 'click', this.uploadEl =.autoSubmit.bindAsObserver(this, el)); } }, autoSubmit: function (evt, el) { window.setTimeout('CustomEventHandlers.checkFiledoAutoSubmit()', 30002000); // set the initial timer }, checkFiledoAutoSubmit: function () { for (var i = 0; i < this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name').length; i++) { SubmitView.doSubmit("Submit"); } } |
Tip |
---|
Users expect the submit and cancel buttons to be located at the bottom of a form. Moving the location of the Submit control is not recommended. |
Submit on Enter Key Press
This JavaScript example will submit the form upon the user pressing the Enter key.
Code Block |
---|
if (document.layers) { document.captureEvents(Event.KEYPRESS); } document.onkeypress = function (evt) { var keyCode = evt ? evt.which : event.keyCode; if (!(/^.*\.(pdf|PDF)$/.test(this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title')))) { keyCode == 13) { SubmitView.doSubmit("Submit"); } else { return true; alert("Invalid file '" + this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title') + "' will be removed.");} }; |
Hide the Submit and Cancel buttons
This Javascript example will hide the submit and cancel buttons for all forms in the application in the designer and in use mode. This might be useful for customers who want to embed into their own application. Simply upload the file containing the Javascript via the Script tab or add the code snippet to your existing one.
Code Block |
---|
// frevvo custom JavaScript var CustomEventHandlers = { setup: function (el) { if this.uploadEl.parentNode.childrenWithClassName('f-upload-file-list-delete')[i].click();(CustomView.hasClass(el, 's-submit')) } } el.parentNode.parentNode.style.visibility='hidden'; else window.setTimeout('CustomEventHandlers.checkFile()', 3000)if (CustomView.hasClass(el, 's-cancel')) el.parentNode.parentNode.style.visibility='hidden'; } } |
Automatically submit a form
You have a new customer registration Form A that is normally forwarded to Forms B and C to complete registration for a new user. Returning Users skip Form B and go directly to form C. A workflow with a precondition that skips a step or a templatized value of a control to decide where the user should be forwarded using Business Rules are recommended approaches and should be considered. This JavaScript allows the user to bypass a form when it is not required and can be used if the recommended approaches are not possible. It will automatically submit a form if a certain control has some specific value (say “not-new”) in it
Continue/Finish button on top of the flow
It is useful to have the Continue/Finish buttons at the top and bottom of lengthy forms in a workflow. The JavaScript below will display a Continue/Finish button on the top of your flow. Add a trigger control at the top of your form and set the CSS Class property to extra-submit. Now this trigger control will act as a Continue/Finish button also.
Code Block |
---|
var CustomEventHandlers = { submitEl: null, setup: function (el) { if (CustomView.hasClass(el, 'conditionalextra-submit')) { windowFEvent.setTimeoutobserve('CustomEventHandlers.conditionalSubmit()', 2000); this.submitEl = elel, 'click', this.autoSubmit.bindAsObserver(this, el)); } }, conditionalSubmitautoSubmit: function (evt, el) { var isValue = "not-new"; if (this.submitEl.value == isValue) { SubmitView.doSubmit("Submit"); FlowView.getFlowButton().onclick(); } }, } |
Add conditional-submit to the CSS Class property of the control whose value is to be compared.
Extra Submit button
By default, each form has a submit button located at the end of the form. The forms designer lets you easily add additonal submit buttons in a special area at the end of a form only. You can use the following JavaScript to create an extra submit button. Add a trigger control to your form and set auto-submit in the CSS Class property. Now you can use this trigger control as your Submit button and place it anywhere on your form.
Code Block |
---|
var CustomEventHandlers = { submitEl: null, setup: function (el) { if (CustomView.hasClass(el, 'auto-submit')} |
Prevent Session Timeout
Sometimes you may need the session timeout for a particular form to be a lot longer than the default session timeout that makes sense for your entire tenant. Imagine your /wiki/spaces/frevvo52/pages/683376648 timeout in is set to 30 minutes. One of your forms takes a long time to fill out. You want to allow idle periods greater than 30 minutes for that form only.
This JavaScript will change the session timeout for this form to 10 hours. Change the variable sessionInterval in the script to the desired time period, for example, a 4 hour session timeout would be: var sessionInterval = 1000 * 60 * 4;
Code Block |
---|
var sessionInterval = 1000 * 60 * 10; // milliseconds to minutes var sessionRefreshURL = "/frevvo/web/login"; refreshFrevvoSession = function () { // make the request FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el))var xmlhttp; if (window.XMLHttpRequest) xmlhttp = }new XMLHttpRequest(); // IE7+, }Firefox, autoSubmit: function (evt, el) {Chrome, Opera, Safari else xmlhttp = new window.setTimeout('CustomEventHandlers.doAutoSubmit()', 2000ActiveXObject("Microsoft.XMLHTTP"); // code for }IE6, IE5 doAutoSubmit: function () { SubmitView.doSubmit("Submit"); } } |
Tip |
---|
Users expect the submit and cancel buttons to be located at the bottom of a form. Moving the location of the Submit control is not recommended. |
Submit on Enter Key Press
This JavaScript example will submit the form upon the user pressing the Enter key.
Code Block |
---|
if (document.layers) {
document.captureEvents(Event.KEYPRESS);
}
document.onkeypress = function (evt) {
var keyCode = evt ? evt.which : event.keyCode;
if (keyCode == 13) {
SubmitView.doSubmit("Submit");
} else {
return true;
}
}; |
Hide the Submit and Cancel buttons
This Javascript example will hide the submit and cancel buttons for all forms in the application in the designer and in use mode. This might be useful for customers who want to embed into their own application. Simply upload the file containing the Javascript via the Script tab or add the code snippet to your existing one.
Code Block |
---|
// frevvo custom JavaScript xmlhttp.open("GET", sessionRefreshURL + "?sessionRefresh=" + new Date().getTime(), true); xmlhttp.send(); // set the timer to run again setTimeout(refreshFrevvoSession, sessionInterval); } setTimeout(refreshFrevvoSession, sessionInterval); // set the initial timer |
Auto Control Validation
has built-in validation that will instantaneously display an error message, the control background color will turn yellow and you will see a warning icon on the right side of the control when invalid values are entered. For Example, the Quantity control allows only whole numbers. An error message and a warning icon will display and the background color of the control will change to yellow if a number with a decimal point is entered. The forms designer can restrict users from entering a value with a decimal point using JavaScript. The script below will automatically remove a decimal point from the field and the error message will not display. Similar logic can be used to implement instant validation on other control types as well.
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 's-submitonlyDigits')) { el.parentNode.parentNode.style.visibility='hidden';FEvent.observe(el, 'keydown', this.allowOnlyDigits.bindAsObserver(this, el)); else if (CustomViewFEvent.hasClassobserve(el, 's-cancel'keyup', this.allowOnlyDigits.bindAsObserver(this, el)); } el.parentNode.parentNode.style.visibility='hidden'; }, } } |
Continue/Finish button on top of the flow
It is useful to have the Continue/Finish buttons at the top and bottom of lengthy forms in a workflow. The JavaScript below will display a Continue/Finish button on the top of your flow. Add a trigger control at the top of your form and set the CSS Class property to extra-submit. Now this trigger control will act as a Continue/Finish button also.
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'extra-submit')) { allowOnlyDigits: function (event, element) { fldVal = $(element).value; for (var i = 0; i < fldVal.length; i++) { FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el))var nom = fldVal.charAt(i); } }, autoSubmit: functionif (evt, elisNaN(nom)) { FlowView.getFlowButton().onclick(); } } |
Prevent Session Timeout
Sometimes you may need the session timeout for a particular form to be a lot longer than the default session timeout that makes sense for your entire tenant. Imagine your /wiki/spaces/frevvo52/pages/683376648 timeout in is set to 30 minutes. One of your forms takes a long time to fill out. You want to allow idle periods greater than 30 minutes for that form only.
This JavaScript will change the session timeout for this form to 10 hours. Change the variable sessionInterval in the script to the desired time period, for example, a 4 hour session timeout would be: var sessionInterval = 1000 * 60 * 4;
Code Block |
---|
var sessionInterval = 1000 * 60 * 10; // milliseconds to minutes
var sessionRefreshURL = "/frevvo/web/login";
refreshFrevvoSession = function () {
// make the request
var xmlhttp;
if (window.XMLHttpRequest) xmlhttp = new XMLHttpRequest(); // IE7+, Firefox, Chrome, Opera, Safari
else xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); // code for IE6, IE5
xmlhttp.open("GET", sessionRefreshURL + "?sessionRefresh=" + new Date().getTime(), true);
xmlhttp.send();
// set the timer to run again
setTimeout(refreshFrevvoSession, sessionInterval);
}
setTimeout(refreshFrevvoSession, sessionInterval); // set the initial timer |
Auto Control Validation
has built-in validation that will instantaneously display an error message, the control background color will turn yellow and you will see a warning icon on the right side of the control when invalid values are entered. For Example, the Quantity control allows only whole numbers. An error message and a warning icon will display and the background color of the control will change to yellow if a number with a decimal point is entered. The forms designer can restrict users from entering a value with a decimal point using JavaScript. The script below will automatically remove a decimal point from the field and the error message will not display. Similar logic can be used to implement instant validation on other control types as well.
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'onlyDigits')) { FEvent.observe(el, 'keydown', this.allowOnlyDigits.bindAsObserver(this, el)); FEvent.observe(el, 'keyup', this.allowOnlyDigits.bindAsObserver(this, el)) $(element).value = fldVal.substring(0, i) + fldVal.substring(i + 1, fldVal.length); } } } } |
Add onlyDigits in the CSS Class property of the Quantity control.
Detect Browser Information
You can use JavaScript to detect information about the browser you are using. For Example: Wet signatures are not supported in older versions of some browsers. You might want to hide a section in your form that has a wet signature if the browser does not support it. To get details about the browser where your form is loaded, add a text control to your form with its CSS Class property set to detectbrowser and use the following custom JavaScript:
Code Block |
---|
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'detectbrowser')) {
el.value = navigator.userAgent;
UberController.valueChangeObserver({target:document.getElementsByName('Browser')[0]}, document.getElementsByName('Browser')[0].parentNode.parentNode);
}
}
} |
Note |
---|
Replace the name Browser in the above JavaScript with the name of the text field you are using. |
Use the browser information populated in your text control to decide if the section of your form that contains the wet signature should be displayed or not.
Save Screen Flow to Task List
If two sequential workflow steps are assigned to the same person, this creates a screen flow. Screen flows immediately navigate a user to the next screen (activity/step) in the flow when they click the continue button. Sometimes you don't want a user to automatically navigate to the next screen, for example the next activity/step might be something you want the user to perform days after the first step rather then immediately.
This custom JavaScript will save the flow to the user's task list instead of displaying that next step to the user immediately. The user can then go back to their task list at a future time to resume their task. This JavaScript is effectively clicking the Save button when flow moves to second step. This will create a task in that users task list and then navigate that user to his home page.
Code Block | ||
---|---|---|
| ||
saveTask = function () { if(document.getElementsByName('temp')[0].value == 0) { document.getElementsByName('temp')[0].value = "saved"; } }, UberController.valueChangeObserver({target:document.getElementsByName('temp')[0]}, allowOnlyDigits: function (event, element) {document.getElementsByName('temp')[0].parentNode.parentNode); FlowView.getSaveButton().click(); alert ("Task added fldValto = $(element).valuetask list"); window.open("<yourhttps:// frevvo for (var i = 0; i < fldVal.length; i++) { server host:port>/frevvo/web/tn/<your tenant>/user/" + document.getElementsByName('username')[0].value + "/app", "_top"); } } setTimeout(saveTask, 500); // set the initial var nom = fldVal.charAt(i); if (isNaN(nom))timer |
In order to use this solution you will also need to:
- Add a text control named 'temp' to your form and uncheck the visible property to make it hidden.
- Add a text control named 'username' to your form and uncheck the visible property to make it hidden.
- Add the following business rule to your form.
Code Block | ||
---|---|---|
| ||
if (form.load) { $(element)username.value = fldVal_data.substring(0, i) + fldVal.substring(i + 1, fldVal.length); getParameter('subject.id'); } |
Phone Dash
This custom JavaScript automatically inserts dashes as the user enters a phone number into a Phone control. Characters other than the dash entered into the control are deleted. Add PhoneInsert to the CSS Class property of the Phone control to enable this JavaScript.
Code Block | ||
---|---|---|
| ||
var CustomEventHandlers = { setup: function(el) { } if (CustomView.hasClass(el, 'PhoneInsert')) { FEvent.observe(el, 'keydown', this.formatPHONE.bindAsObserver(this, el)); } FEvent.observe(el, 'keyup', this.formatPHONE.bindAsObserver(this, el)); } } |
Add onlyDigits in the CSS Class property of the Quantity control.
Detect Browser Information
You can use JavaScript to detect information about the browser you are using. For Example: Wet signatures are not supported in older versions of some browsers. You might want to hide a section in your form that has a wet signature if the browser does not support it. To get details about the browser where your form is loaded, add a text control to your form with its CSS Class property set to detectbrowser and use the following custom JavaScript:
Code Block |
---|
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'detectbrowser')) {
el.value = navigator.userAgent;
UberController.valueChangeObserver({target:document.getElementsByName('Browser')[0]}, document.getElementsByName('Browser')[0].parentNode.parentNode);
}
}
} |
Note |
---|
Replace the name Browser in the above JavaScript with the name of the text field you are using. |
Use the browser information populated in your text control to decide if the section of your form that contains the wet signature should be displayed or not.
Phone Dash
This custom JavaScript automatically inserts dashes as the user enters a phone number into a Phone control. Characters other than the dash entered into the control are deleted. Add PhoneInsert to the CSS Class property of the Phone control to enable this JavaScript.
Code Block |
---|
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'PhoneInsert')) {
FEvent.observe(el, 'keydown', this.formatPHONE.bindAsObserver(this, el));
FEvent.observe(el, 'keyup', this.formatPHONE.bindAsObserver(this, el));
}
},
formatPHONE: 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 == 7)) {
$(element).value = fldVal + "-";
}
if (fldVal.length > 12) {
$(element).value = fldVal.substring(0, fldVal.length - 1);
}
}
}
}
} |
Save Screen Flow to Task List
If two sequential workflow steps are assigned to the same person, this creates a screen flow. Screen flows immediately navigate a user to the next screen (activity/step) in the flow when they click the continue button. Sometimes you don't want a user to automatically navigate to the next screen, for example the next activity/step might be something you want the user to perform days after the first step rather then immediately.
This custom JavaScript will save the flow to the user's task list instead of displaying that next step to the user immediately. The user can then go back to their task list at a future time to resume their task. This JavaScript is effectively clicking the Save button when flow moves to second step. This will create a task in that users task list and then navigate that user to his home page.
Code Block | ||
---|---|---|
| ||
saveTask = function () { if(document.getElementsByName('temp')[0].value == 0) { document.getElementsByName('temp')[0].value = "saved";, formatPHONE: 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 { UberController.valueChangeObserver({target:document.getElementsByName('temp')[0]}, document.getElementsByName('temp')[0].parentNode.parentNode); if FlowView.getSaveButton(().click(); alert ("Task added to task list");fldVal.length == 3) || (fldVal.length == 7)) { window.open("<yourhttps:// frevvo server host:port>/frevvo/web/tn/<your tenant>/user/" + document.getElementsByName('username')[0].value + "/app", "_top"); } } setTimeout(saveTask, 500); // set the initial timer |
In order to use this solution you will also need to:
- Add a text control named 'temp' to your form and uncheck the visible property to make it hidden.
- Add a text control named 'username' to your form and uncheck the visible property to make it hidden.
- Add the following business rule to your form.
Code Block | ||
---|---|---|
| ||
if (form.load) { username.value = _data.getParameter('subject.id'); } $(element).value = fldVal + "-"; } if (fldVal.length > 12) { $(element).value = fldVal.substring(0, fldVal.length - 1); } } } } } |