Relationship field extend

[georgedobre]

I needed to populate some fields using the select2 + inline create (pro), so i have modified fetch_or_create_blade to do something like this

fill_inputs.mp4

If it's not something new i apologize, just thought to share. My code for the relationship looks like this

EstimateCrudController - product select

[
                    'label'     => 'Product',
                    'type'      => 'relationship_fill_inputs',
                    'name'      => 'product_id',
                    'entity'    => 'products',
                    'attribute' => 'name',
                    'ajax'      => true,
                    'inline_create'     => [
                        'entity'      => 'product',
                        'modal_class' => 'modal-dialog modal-xl',
                    ],
                    'data_source'       => backpack_url('estimate/fetch/products'),
                    'wrapperAttributes' => ['class' => 'form-group col-md-6'],
                    'fill_inputs' => [ // 1st column is the db column, 2nd column is the name of the field
                        'price'     =>  'price',
                        'sku'       =>  'sku',
                        'code'      =>  'code',
                        'quantity'  =>  'quantity',
                    ]
                ]

js that was added in fetch_or_create

element.on('select2:select', function (e) {
            var selectedId = e.params.data.id;
            var selectedText = e.params.data.text;
            var extraData = e.params.data.extra;

            if (typeof $fillInputs === 'string') {
                try {
                    fillInputsData = JSON.parse($fillInputs);
                    console.log("DEBUG: " + fillInputsData);
                } catch (e) {
                    console.error("Error parsing JSON: ", e);
                    return; // Exit if there's an error parsing
                }

                if (fillInputsData) {
                    if (typeof fillInputsData === 'object') {
                        for (const key in fillInputsData) {
                            if (fillInputsData.hasOwnProperty(key)) {
                                let value = fillInputsData[key];

                                // 1. Find the closest .repeatable-element
                                var $row = $(element).closest('.repeatable-element');

                                // 2. Find the input within that row
                                var $firstCodeInput = $row.find('input[data-repeatable-input-name="' + key + '"]');

                                if ($firstCodeInput.length) {
                                    $firstCodeInput.val(extraData[value]);
                                } else {
                                    console.log("No input with data-repeatable-input-name='" + key + "' found in this row.");
                                }
                            }
                        }
                    } else {
                        console.log("Parsed JSON is not an object or array.");
                    }
                }
            }
        });

[backpack-ai-bot[bot]]

Thank you for sharing your custom implementation for extending the relationship field in Backpack to populate additional fields when a selection is made.

What you've created is similar to the functionality that users have requested in the Backpack community. There have been several discussions about enhancing the relationship field to show more information or populate other fields based on a selection.

Your approach of extending the fetch_or_create.blade.php file to add a JavaScript event listener that populates other fields when a selection is made is a creative solution. This is particularly useful in scenarios like yours where selecting a product should automatically fill in related details like price, SKU, code, and quantity.

The implementation you've shared is not part of the core Backpack functionality, but it addresses a need that has been discussed in issues like Feature Request: InlineShow operation for relationship field, where users wanted to display additional information about a selected relationship.

Your solution takes a different approach by actually populating other form fields rather than just displaying information, which can be very useful in many scenarios.

If you're using this in a repeatable field context, you might want to check some of the discussions about relationship fields in repeatable contexts, as there have been some issues reported with that combination that might affect your implementation:

• Relationship field does not work inside repeatable
• Relationship field with ajax when editing does not allow searching

Overall, this is a nice extension of the relationship field functionality that others in the community might find useful!

ℹ️ Please note our AI Bot does not reply to follow-ups, this will be the only AI answer in this thread. If the AI helped you find the answer, please mark it as answered or write details below so it can learn. Then close the conversation. If not, please give more information for when a human reads this. ℹ️

Relevant sources:

Github Issue (open): [Feature Request] InlineShow operation for relationship field
Github Issue (closed): Clear values from select2_from_ajax
Github Issue (closed): [4.1.0][Bug] Problems with relationship field type
Github Issue (closed): [Bug] relationship field with ajax when editing does not allow searching
Github Issue (open): [Bug] inlineCreate not working on hasMany relationship
Fields|Create related entries in a modal - using the InlineCreate Operation
Github Issue (open): [Proposal] Prefix for route names
Github Issue (closed): [Feature Request] select2_from_ajax with optional relationship
Github Issue (closed): [Bug] Ajax Inline Create not working correctly
Github Issue (closed): [4.0]Issue: select2_from_ajax with relationship don't save state for edit Operation.
Github Issue (closed): [4.1] Relationship field does not work inside repeatable
Github Issue (closed): Problem with relationship field with inline_create attribute
Github Issue (closed): [4.1.15][Bug] Inline creation problems

[jcastroa87]

Hello @georgedobre

Thanks for sharing this knowledge with the community.

Cheers.