Filter connection field with another connection field

App Development
14

Ok, finally figured out how to auto-populate the parent field when a child field is populated. Below is a template. Instructions are below the code. Any suggestions to modifying this would be greatly appreciated!

TB.render('component_X', function(data) {
    // Listen for changes in the Child table field (replace 'field_block_child' with the actual ID for the Child table field)
    jQuery('#field_block_child select.select2', data.ele).on('change', function() {
        var selectedChildId = jQuery(this).val(); // Get the selected Child table ID

        if (selectedChildId) {
            // Use Tadabase API with authentication to fetch related Parent table data (replace 'child_table_id' with actual Child table ID)
            jQuery.ajax({
                url: 'https://api.tadabase.io/api/v1/data-tables/child_table_id/records/' + selectedChildId, 
                method: 'GET',
                headers: {
                    'X-Tadabase-App-ID': 'YOUR_APP_ID',         // Replace with your Tadabase App ID
                    'X-Tadabase-App-Key': 'YOUR_API_KEY',       // Replace with your Tadabase API Key
                    'X-Tadabase-App-Secret': 'YOUR_API_SECRET', // Replace with your Tadabase API Secret
                },
                success: function(response) {
                    console.log('Full API Response:', response);  // Log the full API response for debugging

                    // Check if the Parent table field is available in the response (replace 'field_parent' with the actual Parent table field ID)
                    if (response && response.item && Array.isArray(response.item.field_parent) && response.item.field_parent.length > 0) {
                        var relatedParentId = response.item.field_parent[0]; // Get the first related Parent table ID
                        console.log('Related Parent Table ID:', relatedParentId);    // Log the related Parent table ID for debugging

                        // Populate the Parent table field (replace 'field_block_parent' with the actual ID for the Parent table field)
                        var parentField = jQuery('#field_block_parent select.select2', data.ele);
                        jQuery(parentField).val(relatedParentId).trigger('change.select2');

                        // Trigger the select2 select event
                        jQuery(parentField).trigger({
                            type: 'select2:select',
                            params: { data: { id: relatedParentId } }
                        });
                    } else {
                        console.log('No related Parent table data found.');
                    }
                },
                error: function(error) {
                    console.log('Error fetching related Parent table data:', error);
                    alert('There was an error fetching the related Parent table data. Please check the API key, table ID, and field mappings.');
                }
            });
        } else {
            console.log('No Child table data selected.');
        }
    });
});

Instructions for Using the Template:

  1. Replace component_X: Replace component_X with the actual Tadabase component ID where the fields are present (e.g., component_3).
  2. Replace field_block_child and field_block_parent:
  • field_block_child: Replace with the actual field block ID for your Child table field (where the user selects an entry from the Child table).
  • field_block_parent: Replace with the actual field block ID for your Parent table field (which you want to auto-populate based on the Child table).
  1. Replace child_table_id: Replace this with the actual ID of the Child table in your Tadabase app.
  2. Replace API credentials:
  • YOUR_APP_ID: Replace with your actual Tadabase App ID.
  • YOUR_API_KEY: Replace with your actual Tadabase API Key.
  • YOUR_API_SECRET: Replace with your actual Tadabase API Secret.
  1. Replace field_parent: Replace field_parent with the correct field ID for the Parent table connection field in the Child table (e.g., field_55).

What It Does:

  • This template listens for changes in the Child table field.
  • When a Child table entry is selected, it fetches the related Parent table field from the Child table using the Tadabase API.
  • It then auto-populates the Parent table field on the form with the corresponding value, without requiring the user to submit the form.