Track Time For Actions Based On Grid Select List

In this guide, we will explain how to track time for actions using the Grid Select List field. Selecting a specific grid list option will track how long this option has been selected.

Example form template for import - https://app.formyoula.com/templates/import

[Example Form] Track Time For Actions Based On Grid Select List.json3.8KB

Please add the following JavaScript to your form and update the 2 fields. The tracked field and the output fields for the results. The tracked field can be any select field. For example, Select Grid or Select Options. The results field can be any text field or hidden field.

// Set tracked field
var tracked_field = 'Select Grid';
// set result field
var result_field = 'Time Tracker';
// Last select option
var previous_select_option = '';
// Listen to field changes
window.formyoula.form_fields[ tracked_field ].on( 'change', function( options ) {
  // Set time tracker
  var time_tracker = {};
  // Check if time tracking data exists
  if ( window.formyoula.form_fields[ result_field ].get('value') ) {
    // Get existing data
    time_tracker = JSON.parse( window.formyoula.form_fields[ result_field ].get('value' ) );
  }
  // Check if we have details for selected option
  if ( !time_tracker[ this.get('value') ] ) {
    // Add start time
    time_tracker[ this.get('value') ] = { 
      start_time: new Date()
    }
  }
  // Check last select option value
  if ( time_tracker[ previous_select_option ] ) {
    // Add end time
    time_tracker[ previous_select_option ].end_time = new Date();
    // Add time calculation
    time_tracker[ previous_select_option ].duration_in_seconds = moment( time_tracker[ previous_select_option ].end_time ).diff( moment( time_tracker[ previous_select_option ].start_time ), 'seconds' );
  }
  // Get selected option
  previous_select_option = this.get('value');
  // Save data
  window.formyoula.form_fields[ result_field ].set( {
    value: JSON.stringify(time_tracker)
  } );
} );

We can also use the following logic to track each action multiple times.

// Set tracked field
var tracked_field = 'Select Grid';
// set result field
var result_field = 'Time Tracker';
// Last select option
var previous_select_option = '';
// Listen to field changes
window.formyoula.form_fields[ tracked_field ].on( 'change', function( options ) {
  // Set time tracker
  var time_tracker = {};
  // Check if time tracking data exists
  if ( window.formyoula.form_fields[ result_field ].get( 'value' ) ) {
    // Get existing data
    time_tracker = JSON.parse( window.formyoula.form_fields[ result_field ].get( 'value' ) );
  }
  // Check if we have details for selected option
  if ( !time_tracker[ this.get( 'value' ) ] ) {
    // Add start time
    time_tracker[ this.get( 'value' ) ] = [ {
      start_time: new Date()
    } ];
  } else {
    // Add start time
    time_tracker[ this.get( 'value' ) ].push( {
      start_time: new Date()
    } );
  }
  // Check last select option value
  if ( time_tracker[ previous_select_option ] ) {
    // Get last time tracking item for the select option
    var current_time_tracker = time_tracker[ previous_select_option ].pop();
    // Add end time
    current_time_tracker.end_time = new Date();
    // Add time calculation
    current_time_tracker.duration_in_seconds = moment( current_time_tracker.end_time ).diff( moment( current_time_tracker.start_time ), 'seconds' );
    // Update time tracking last array item
    time_tracker[ previous_select_option ].push( current_time_tracker );
  }
  // Get selected option
  previous_select_option = this.get( 'value' );
  // Save data
  window.formyoula.form_fields[ result_field ].set( {
    value: JSON.stringify( time_tracker )
  } );
} );

Example form template for import

[Example Form] Track Time For Actions Based On Grid Select List With Updated Same Option Multi Tracking.json3.9KB

For any questions, please contact us - [email protected] or the Formyoula in-app chat 🙂