Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

...

...


Section


Column

Customizing can be done in several different ways. It is important to consider all the alternatives available when deciding on a method to accomplish form customization.

Warning

Although JavaScript will accomplish the task, it is important to note that your scripts are not subjected to formal testing by the frevvo quality assurance team. Choosing an approach that is part of the product like Business Rules is a better choice than adding JavaScript since released versions undergo rigorous quality assurance testing. Customizations using JavaScript should only be used under special situations and if there is no other way to customize the form to the requirements.

For example, let's say you have a message control in your form that contains markup to pull a custom JavaScript. The URL for the script contains the home directory and revision number - (http://localhost:8080/frevvo/js-24487/libs/script.js).  An upgrade of  to new release or revision version could potentially stop the form from working.

If you choose to add JavaScript, we strongly recommend that you are familiar with a JavaScript debugger / web development tool for your browser.

Here  are some real world situations where custom JavaScript can be used in a form. The custom JavaScript can be added to the form using the message control or the include.js file in the frevvo.war. Refer to Customizing Behavior for more information.


Column
width240px

On This Page:

Table of Contents
maxLevel1


...

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.

...

Add conditional-submit to the CSS Class property of the control whose value is to be compared.is to be compared.

Automatically Submit a Workflow Step

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
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();
       }
   },
}

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.

...

This JavaScript example will submit the form when the user presses the Enter key. If you want to do this in a flowworkflow, change SubmitView.doSubmit("Submit"); to FlowView.getFlowButton().onclick();

...

This Javascript example will hide the submit and cancel buttons for all forms in the application project in designer and use modes. 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 (CustomView.hasClass(el, 's-submit'))        
            el.parentNode.parentNode.style.visibility='hidden';
        else if (CustomView.hasClass(el, 's-cancel'))        
            el.parentNode.parentNode.style.visibility='hidden';    
    }
}

Continue/Finish button on top of the

...

workflow

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 flowworkflow. 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. 

...

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.

This JavaScript will change refresh the session timeout for this form to 10 hoursevery 25 minutes so it never hits the 30-minute session timeout. Change the variable sessionInterval in the script to the desired time period, for example, a 4 hour 25 minute session timeout refresh would be:  var var sessionInterval = 1000 * 60 * 4; 25.

Code Block
var sessionInterval = 1000 * 60 * 1025; // 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

...

Write a business rule that checks 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

...

Screenflow to Task List

If two sequential workflow steps are assigned to the same person, this creates a screen flowscreenflow. Screen flows Screenflows immediately navigate a user to the next screen in the flow workflow when they click the Continue button. Sometimes you don't want a user to automatically navigate to the next screen, for example the next 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 workflow 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. The JavaScript is effectively clicking the Save button when the flow workflow 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
languagejavascript
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);
                }
            }
        }
    }
}

...