...

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 CustomEventHandlers = {
  setup: function (el) {
      if ($j(el).parents('.c-detect-clicks').length) {
         $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

...

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

...

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.

...

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

...