Multi Barcode Scanner with Repeat Group Auto-Prefill

In this guide, we'll explain how to scan multiple barcodes at once and automatically populate a Repeat Group with the parsed contact information from each barcode.

1. INITIAL SETUP:

Drag and drop a "Multi Barcode Scanner", two "Hidden", a "JavaScript", and an "API Prefill" field onto your form.
Rename the fields as needed.

Drag and drop three "Text" and an "Email" field inside a “Repeat” field onto your form.
Rename the fields as needed.

2. CONFIGURE THE "MULTI BARCODE SCANNER" FIELD:

Click the pencil icon of the "Multi Barcode Scanner" field.
Enable the "Use Strich Barcode Scanner" option.
Select the barcode type you want to scan (in this example, we're using "DataMatrix").

3. CONFIGURE THE FIRST “HIDDEN” FIELD:

Click the pencil icon of the first "Hidden" field.
Set the value to: {{a5a6-b537-7618}} (This is the component ID of your Multi Barcode Scanner field).
Enable the "Enable Merge Fields" option.

4. CONFIGURE THE “JAVASCRIPT” FIELD:

Click the pencil icon of the "JavaScript" field.
Paste the code.

Set JavaScript Load Delay to "0" under the “Advanced” section.

Please use this code:

// Parse multiple barcodes separated by commas
function parse_multiple_codes(barcodes_string) {
  // Check if input is empty, return empty array if true
  if (!barcodes_string) return [];
  
  // Split input by commas, trim each code, and remove empty values
  var codes = barcodes_string.split(',').map(function(code) { 
    return code.trim(); 
  }).filter(Boolean);
  
  // Parse each code and collect results into an array
  var results = codes.map(function(code) { 
    return parse_contact_barcode(code); 
  });
  
  // Return the results array
  return results;
}

// Parse a single contact barcode (pipe-delimited format)
function parse_contact_barcode(barcode_string) {
  // Initialize result object with empty values
  var contact_data = {
    'First Name': '',
    'Last Name': '',
    'Email': '',
    'Company Name': ''
  };
  
  // Return empty data if barcode string is empty or null
  if (!barcode_string || barcode_string.trim().length === 0) {
    return contact_data;
  }
  
  // Clean the string by removing control characters
  var clean_string = barcode_string.replace(/[\u0000-\u001F\u007F-\u009F]/g, '');
  
  // Split by pipe delimiter
  var parts = clean_string.split('|');
  
  // Map the parts to contact fields (only first 4 fields)
  if (parts.length >= 4) {
    contact_data['First Name'] = parts[0].trim();
    contact_data['Last Name'] = parts[1].trim();
    contact_data['Email'] = parts[2].trim();
    contact_data['Company Name'] = parts[3].trim();
  }
  
  return contact_data;
}

// Set up event listener for barcode scanner field value changes
formyoula.form_fields['Multi Barcode Scanner'].on('input:set:success', function() {
  // Get the scanned barcode value
  var barcodes_string = this.get('value');
  
  // Parse the barcode(s)
  var parsed_data = parse_multiple_codes(barcodes_string);
  
  // Store parsed data in the hidden field for reference
  formyoula.form_fields['1179-f289-7fcc'].set('value', JSON.stringify(parsed_data));
  
  // Get reference to the repeat group
  var repeat_field = formyoula.form_fields['6813-9f8e-12ae'];
  
  // Clear existing entries in repeat group (optional - remove these 3 lines if you want to keep existing entries)
  if (repeat_field && repeat_field.get('value')) {
    repeat_field.set('value', []);
  }
  
  // Loop through parsed data and add each contact to repeat group
  parsed_data.forEach(function(contact) {
    // Only add if we have at least some data
    if (contact['First Name'] || contact['Last Name'] || contact['Email']) {
      repeat_field.add_repeat_entry({
        '78bf-7517-a04c': contact['First Name'],
        'bb9e-66fa-33d5': contact['Last Name'],
        'b2b2-4ed9-d126': contact['Email'],
        '041e-2d01-14cf': contact['Company Name']
      });
    }
  });
});

Note: Update the field IDs in the script to match your form.

Here,

'1179-f289-7fcc' - Component ID of the "barcode parsed values" Hidden field
'6813-9f8e-12ae' - Component ID of the Repeat Group
'78bf-7517-a04c' - Component ID of First Name field in Repeat Group
'bb9e-66fa-33d5' - Component ID of Last Name field in Repeat Group
'b2b2-4ed9-d126' - Component ID of Email field in Repeat Group
'041e-2d01-14cf' - Component ID of Company Name field in Repeat Group

5. CONFIGURE THE "API PREFILL" FIELD:

Click the pencil icon of the "API Prefill" field.
Set "Repeat Group Field ID" to: 6813-9f8e-12ae (the component ID of the Repeat Group).

Enable "Disable API call on page load".

Set "Local Data Field" to: 1179-f289-7fcc (the component ID of the "barcode parsed values" Hidden field).

Map the prefill mappings as follows:

6. TEST THE FUNCTIONALITY:

Try your form.

Scan multiple barcodes using the Multi Barcode Scanner.

The form will automatically parse each barcode and populate the Repeat Group with the contact information.
After scanning, the Repeat Group will display each contact as a separate entry.

Here is a demonstration of the multi-scanning process using the Formyoula mobile app.

Example Form.json11.9 KiB

Here are some barcode examples we can try scanning using the attached example form.

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