...

...

...

...

...

Constrain Visible Table Rows and Add Scrollbar

...

Fetch Selected Table Cell Info

You can use the following custom JavaScript to fetch information about the selected (clicked) table cell at run time, such as the row index and value. 

Image Added

Upload the following Custome JavaScript to your Project. 

// frevvo custom JavaScript
var tableScrollSetup = false;
var CustomEventHandlers = {
	setup  setup: function (el) {
   		if (!tableScrollSetup) {
	   		if (document.getElementsByClassName('table-scroll      if ($j(el).parents('.c-detect-clicks').length > 0) {
		 		document.getElementsByClassName('table-scroll')[0].style.height = "275px";
		 		document.getElementsByClassName('table-scroll')[0].style.overflowY = "scroll";
			} 
			tableScrollSetup = true;
		}
	}
}

Then on your table, set the CSS Class 'table-scroll'.

Image Removed

Add Horizontal Scroll Bars to a Table

Horizontal scrolling of tables works on tablets/phones but not on desktop. Lack of scrolling on desktop greatly limits the number of columns a table may contain. The only solution is the widen the form. However, you can apply this custom javascript at the project level to show horizontal scroll bars on your table control in desktop view.

// frevvo custom JavaScript 
var tableScrollSetup = false;
var CustomEventHandlers = {
	setup: function (el) {
		if (!tableScrollSetup) {
			if (document.getElementsByClassName('table-scroll').length > 0) {
				var elements = document.getElementsByClassName('table-scroll');
				for(var i=0; i < elements.length; i++) {
					elements[i].style.overflowX = "scroll";
					elements[i].style.overflowY = "visible";
					elements[i].style.tableLayout = "fixed";
				}
				tableScrollSetup = true;
			}
		}
	}
}

Auto-expand a textArea

...

         $j(el).on('click', this.onCellClick.bind(this));
      }
  },
  onCellClick: function (e) {
      var row = $j(e.target).parents('.f-table-row').eq(0);
      var index = row.parent().children().index(row)+1;
      //console.log("onCellClick, value = " + e.target.value + " row index = " + index);
      // Put the rowIndex and cellValue into hidden controls
      _frevvo.api.forms.controls.setControlValue($j('.c-row-index').eq(0).attr('extid'), [index]);
      _frevvo.api.forms.controls.setControlValue($j('.c-cell-value').eq(0).attr('extid'), [e.target.value]);
  }
}

For this example, add two hidden text controls in your form.

1. Hidden Control Index - set css class to 'c-row-index'
2. Hidden Control Value - set css class to 'c-cell-value'
   Image Added

Add a business rule to display the values of these hidden controls in a Message control at run time.

if (RowIndex.value.length || CellValue.value.length) {
  message.value = "You clicked on row: <strong> " + RowIndex.value + "</strong> in the cell with value: <strong> " + CellValue.value + "</strong> ";
}

At run time, the message control first prompts the user to click a cell in the table. Once a cell is clicked/selected, the Custom JavaScript populates the hidden controls, which triggers the rule to run. The Message control then displays some text with the values of the hidden controls.

Constrain Visible Table Rows and Add Scrollbar

Let's say you have a table in a read-only form that has 100+ rows. To keep the form user-friendly, you want to restrict the visible table rows to a specific height and force a scrollbar to appear. Upload this custom JavaScript to your Project:

// frevvo custom JavaScript
var tableScrollSetup = false;
var CustomEventHandlers = {
	setup: function (el) {
   		if (!tableScrollSetup) {
	   		if (document.getElementsByClassName('table-scroll').length > 0) {
		 		document.getElementsByClassName('table-scroll')[0].style.height = "275px";
		 		document.getElementsByClassName('table-scroll')[0].style.overflowY = "scroll";
			} 
			tableScrollSetup = true;
		}
	}
}

Then on your table, set the CSS Class 'table-scroll'.

Image Added

Add Horizontal Scroll Bars to a Table

Horizontal scrolling of tables works on tablets/phones but not on desktop. Lack of scrolling on desktop greatly limits the number of columns a table may contain. The only solution is the widen the form. However, you can apply this custom javascript at the project level to show horizontal scroll bars on your table control in desktop view.

// frevvo custom JavaScript 
var tableScrollSetup = false;
var CustomEventHandlers = {
	setup: function (el) {
		if (!tableScrollSetup) {
			if (document.getElementsByClassName('table-scroll').length > 0) {
				var elements = document.getElementsByClassName('table-scroll');
				for(var i=0; i < elements.length; i++) {
					elements[i].style.overflowX = "scroll";
					elements[i].style.overflowY = "visible";
					elements[i].style.tableLayout = "fixed";
				}
				tableScrollSetup = true;
			}
		}
	}
}

Auto-expand a textArea

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.

// 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);
}
}

Set Max Character Limit on TextArea

By default, TextArea controls let users type any text and are intended for longer, multi-line submissions. However, there may be times you want to limit the characters a user can enter in a TextArea, and you can do this with Custom Javascript. Upload the following custom javaScript to your project, and then set the CSS Class property of your TextArea control to maxChars.

// 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); {
    setup: function (el) {
        if (CustomView.hasClass(el, 'maxChars')) {
            FEvent.observe(el, 'keydown', this.limitText.bindAsObserver(this, el));
            FEvent.observe(el, 'keyup', this.limitText.bindAsObserver(this, el));
        }
    },
    limitText: function (event, element) {
        max_chars = 100;
        fldVal = element.value;
		if (fldVal.length >= max_chars) { 
		     element.value = fldVal.substring(0, max_chars);
		}        
    }
}

Automatically submit a form

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.

...

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 Automaticallysubmitaform, 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.

...

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

...

This Javascript example will hide the submit and cancel buttons for all forms in the project in designer and use modes. This might be useful for customers who want to embed   into embed frevvo into their own application. Simply upload the file containing the Javascript via the Script tab or add the code snippet to your existing one. 

...

It is useful to have the Continue/Finish buttons at the top and bottom of lengthy forms in a  workflowfrevvo 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. 

...

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

...

Auto Control Validation

 has frevvo 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.

...

Although you can't access the http object directly from the WEB-INF/rules/includeincludes.js file, you can pass the http object as a reference to the includeincludes.js function.

So let's say you have the following function in includeincludes.js:

function getCustomerName(http, custId){
    return http.get("http://myservice/customer/" + custId);
}

...