| Section | |||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Your form has a text control requiring a Social Security number. The JavaScript below will automatically add the hyphens while the user is entering the SSN. Add SSN to the CSS Class property of the control to enable this JavaScript.
| Code Block |
|---|
// frevvo custom JavaScript 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 >= 12) { element.value = fldVal.substring(0, fldVal.length - 1); } } } } } |
...
Your form has a text field or a text area where you would like to automatically correct the case of any text entered in it. For example, if you would like to change "I LOVE TO TYPE IN ALL CAPS" to " I Love To Type In All Caps" while the user is entering it, the JavaScript for this would be written as:
| Code Block |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
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 can use the following JavaScript to force the page to be scrolled to the top after switching to the second tab:
| Code Block |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
setup: function (el) {
if (CustomView.hasClass(el, 'my-scroll')) {
FEvent.observe(el, 'click', this.scrollTop.bindAsObserver(this, el));
}
},
scrollTop: function (event, element) {
document.getElementById("wrapper").scrollIntoView();
}
} |
...
This custom JavaScript will automatically expand the visible rows of a textArea when it contains more than the default rows of text (instead of the usual behavior of adding a scroll bar). Add auto-expandable-textarea to the CSS Class property of the textArea controls that should use this behavior.
| Code Block |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
setup: function(el) {
if (CustomView.hasClass(el, 'auto-expandable-textarea')) {
FEvent.observe(el, 'keydown', this.autosize.bindAsObserver(this, el));
this.autosize(null, el);
}
},
autosize: function(event, element) {
setTimeout(function() {
var rows = element.rows;
var defaultRows = element.getAttribute("default-rows");
if(defaultRows==null) {
var defaultHeight = parseInt(getComputedStyle(element).height, 10);
if(defaultHeight==0 || isNaN(defaultHeight)){
return;
}
element.setAttribute("default-rows",rows);
element.setAttribute("default-height",defaultHeight);
}
element.style.height = "auto";
element.style.height = (element.scrollHeight) + "px";
var defaultHeight = element.getAttribute("default-height");
var height = element.getHeight();
var scrollHeight = element.scrollHeight;
var newRows = Math.ceil(scrollHeight / (height / rows));
var max = Math.max(newRows, defaultRows);
if (max === newRows) {
element.rows = newRows;
}
element.style.height = "auto";
element.style.height = Math.max(element.scrollHeight, defaultHeight) + "px";
}, 0);
}
} |
...
This JavaScript example is relevant to Forms only. Let's say 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.
This JavaScript example will automatically submit a form if a certain control has some specific value (say “not-new”) in it when the form is loaded. This might be useful in cases where a form needs to be submitted to post the data in it, but interaction between the form and user is not necessary. If the user's input is not required, this custom JavaScript can submit the form automatically.
| Tip |
|---|
Instead of using JavaScript, the same thing can be accomplished with 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. This is the recommended approach and should be considered. |
| Code Block |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
submitEl: null,
setup: function (el) {
if (CustomView.hasClass(el, 'conditional-submit')) {
window.setTimeout('CustomEventHandlers.conditionalSubmit()', 2000);
this.submitEl = el;
}
},
conditionalSubmit: function () {
var isValue = "not-new";
if (this.submitEl.value == isValue) {
SubmitView.doSubmit("Submit");
}
},
} |
...
Workflow steps only allow for one Activity Document Action (ADA), but there are cases where you may want to configure a second ADA (such as a second email) from the same workflow step. If the step is at the end of the workflow, you can use Workflow Doc Actions to accomplish this task. For steps in the middle of a workflow, create an additional linked step, set up the second ADA on the added step, and then use a script to automatically submit that step so the users will not see it. The script is similar to that for Auto-Submit a Form, but one key difference is that you will need a rule on the form that sets your conditional-submit control to the value specified in the script ("next" in the example below) on the step that should auto-submit, and then use the else action to set that control to empty on all other steps. Add conditional-submit to the CSS Class property of the control whose value is to be compared.
| Code Block |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
submitEl: null,
setup: function (el) {
if (CustomView.hasClass(el, 'conditional-submit')) {
window.setTimeout('CustomEventHandlers.conditionalSubmit()', 2000);
this.submitEl = el;
}
},
conditionalSubmit: function () {
var isValue = "next";
if (this.submitEl.value == isValue) {
FlowView.getFlowButton().onclick();
}
},
} |
...
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 |
|---|
// frevvo custom JavaScript
var CustomEventHandlers = {
submitEl: null,
setup: function (el) {
if (CustomView.hasClass(el, 'auto-submit')) {
FEvent.observe(el, 'click', this.autoSubmit.bindAsObserver(this, el));
}
},
autoSubmit: function (evt, el) {
window.setTimeout('CustomEventHandlers.doAutoSubmit()', 2000);
},
doAutoSubmit: function () {
SubmitView.doSubmit("Submit");
}
} |
...
This JavaScript example will submit the form when the user presses the Enter key. If you want to do this in a workflow, change SubmitView.doSubmit("Submit"); to FlowView.getFlowButton().onclick();
...
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 workflow. 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 |
|---|
// frevvo custom JavaScript
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();
}
} |
...
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 |
|---|
// frevvo custom JavaScript
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));
}
},
allowOnlyDigits: function (event, element) {
fldVal = element.value;
for (var i = 0; i < fldVal.length; i++) {
var nom = fldVal.charAt(i);
if (isNaN(nom)) {
element.value = fldVal.substring(0, i) + fldVal.substring(i + 1, fldVal.length);
}
}
}
}
|
...
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 and set it's CSS Class property to detectbrowser. Upload the file containing the Javascript shown via the Script tab or add the code snippet to your existing one.
| Code Block |
|---|
// frevvo custom JavaScript
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);
}
}
} |
...
| Code Block | ||
|---|---|---|
| ||
// frevvo custom JavaScript
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);
}
}
}
}
} |
...