Section | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'SSN')) { 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 >= 11) { $(element).value = fldVal.substring(0, fldVal.length - 1); } } } } } |
Correct the case of any text
...
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'limit3')) { FEvent.observe(el, 'click', this.checkboxlimit.bindAsObserver(this, el)); } }, checkboxlimit: function (evt, el) { 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++) checkedcount += (checkgroup[i].checked) ? 1 : 0 if (checkedcount > limit) { this.checked = false for (var i = 0; i < checkgroup.length; i++) (checkgroup[i].checked) ? checkgroup[i].disabled = false : checkgroup[i].disabled = true; } else { for (var i = 0; i < checkgroup.length; i++) checkgroup[i].disabled = false; } } } } } |
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.
...
Code Block |
---|
var CustomEventHandlers = { uploadEl: null, setup: function (el) { if (CustomView.hasClass(el, 'onlyPDF')) { this.uploadEl = el; } window.setTimeout('CustomEventHandlers.checkFile()', 3000); // set the initial timer }, checkFile: function () { for (var i = 0; i < this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name').length; i++) { if (!(/^.*\.(pdf|PDF)$/.test(this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title')))) { alert("Invalid file '" + this.uploadEl.parentNode.childrenWithClassName('f-file-upload-file-name')[i].getAttribute('title') + "' will be removed."); this.uploadEl.parentNode.childrenWithClassName('f-upload-file-list-delete')[i].click(); } } window.setTimeout('CustomEventHandlers.checkFile()', 3000); } } |
...
Automatically submit a form
...
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 when the user pressing presses 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; } }; |
Continue/Finish button on top of the flow
...
Code Block |
---|
var CustomEventHandlers = { setup: function (el) { if (CustomView.hasClass(el, 'extra-submit')) { FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el)); } }, autoSubmit: function (evt, el) { 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 tenant session 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.
...
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);
}
}
} |
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]},
document.getElementsByName('temp')[0].parentNode.parentNode);
FlowView.getSaveButton().click();
alert ("Task added to task list");
window.open("https://<your 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');} |
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);
}
}
}
}
} |