In this guide, we will share two JavaScript options for triggering the API fields.
Manual data mapping from Repeat Group entry changes.
// Set repeat group Id
var repeat_group_id = '5988-591b-61a6';
// Set API Callout fields
var api_add_field_id = '5988-591b-61a6';
var api_delete_field_id = '5988-591b-61a6';
// Listen to Repeat Entry Create Event on the repeat component
window.formyoula.form_fields[ repeat_group_id ].on( 'element:create:success', function( fields /* Created Repeat Entry Data */ ) {
// Trriger API Prefill Passing the data to Event
window.formyoula.form_fields[ api_add_field_id ].trigger( 'api:request:send', {
data: {
param1: fields[ 0 ].value,
param2: fields[ 1 ].value
}
} );
} );
// Listen to Repeat Entry Delete Event on the repeat component
window.formyoula.form_fields[ repeat_group_id ].on( 'element:delete:success', function( fields /* Deleted Repeat Entry Data */ ) {
// Trriger API Prefill Passing the data to Event
window.formyoula.form_fields[ api_delete_field_id ].trigger( 'api:request:send', {
data: {
param1: fields[ 0 ].value,
param2: fields[ 1 ].value
}
} );
} );
Dynamic data mapping from Repeat Group entry changes.
// Set repeat group Id
var repeat_group_id = '5988-591b-61a6';
// Set API Callout fields
var api_add_field_id = '5988-591b-61a6';
var api_delete_field_id = '5988-591b-61a6';
// Listen to Repeat Entry Create Event on the repeat component
window.formyoula.form_fields[ repeat_group_id ].on( 'element:create:success', function( fields /* Created Repeat Entry Data */ ) {
// Create data to pass to the api trigger event
var data = create_key_value_pair( fields );
// Trriger API Prefill
window.formyoula.form_fields[ api_add_field_id ].trigger( 'api:request:send', data );
} );
// Listen to Repeat Entry Delete Event on the repeat component
window.formyoula.form_fields[ repeat_group_id ].on( 'element:delete:success', function( fields /* Deleted Repeat Entry Data */ ) {
// Create data to pass to the api trigger event
var data = create_key_value_pair( fields );
// Trriger API Prefill
window.formyoula.form_fields[ api_delete_field_id ].trigger( 'api:request:send', data );
} );
// Function to create key value pair
function create_key_value_pair( fields ) {
// Create object to store key value pair
var reuturn_val = {};
// Loop through the fields to add key value pair
fields.forEach( function( field ) {
// Add key value pair
reuturn_val[ field.name ] = field.value;
} );
// Restructure and return data
return { data: reuturn_val };
}
For any questions, please get in touch with us - at [email protected] or the Formyoula in-app chat 🙂