Versions Compared

Key

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

...

Note

This behavior will only be present when the form is opened using a share URL - you will not see it in Test mode. To test it, copy the form's share URL and paste it into a new browser tab.

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. 

Code Block
// 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.

Code Block
titleRule Code
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

...