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 🙂