Not able to set dropdown selected value on connection field from java script

[Khalid]

Hi all,

I am trying to set value of the connection field in a dropdown which is mapped with Account Name in the following function in javascipt. But it does not work. Am I doing something wrong?

function setAccountDropDown(accountRecordValue)
{

const dropdown = $('.t-form-connection select.select2-hidden-accessible'); 


const valueToSet = accountRecordValue;

// Check if the select2 instance exists
if (dropdown.hasClass('select2-hidden-accessible')) {
    // Set the value and trigger the change event
    dropdown.val(valueToSet).trigger('change');
     console.log('Value set successfully:', valueToSet);

} else {
    console.error('The dropdown is not initialized as a select2 component.');
}

}

Thanks,
Khalid

[Kristen]

I’m not sure if that’s possible, @Khalid!

@partners, any ideas?

[SuiteUpstairs]

Hey @Khalid, I don’t think this is possible, I have tried to do this before as well:

Pre-fill a connection field on a form with javascript

@Chem, I’m looking at you for this one! I’m trying to pre-select the connection field on a details page, there is a very specific reason I’m doing this which is difficult to explain quickly. If I use the console I can do it with this javascript code: document.querySelector(“#select2-xfyl-container”).innerHTML = “AMEC Place-782.01-2020”; The problem is, that ID is dynamic and changes every time the page loads. My question is Chem, is this possible to do with some other method? by class maybe…

[Peter]

@SuiteUpstairs is there a work-around for that? like save it as text and then copy the value to the dropdown field?

[SuiteUpstairs]

No, I have not been able to make it work that way.

The workaround I use is a two-step form. I add the connection field that I want to set in the first step of the form and hide that field on the form, then make a rule to set the connection field, and then change the submit rules to go to step two of the form.

Typically, I won’t add any other fields to the first step and just rename the button to something like “Create new Invoice” or “Start Quote” so that it doesn’t seem like a two-step form.

[Effy]

Hey you can do this with the following

TB.render('your_component', function(data) {
const joinField = jQuery('#field_block_your_field select.select2', data.ele).select2();
    const values = valueToSet.includes('[') ? JSON.parse(valueToSet.replace(/'/g, '"')) : [valueToSet];
    values.forEach(value => {
        jQuery(joinField).trigger({
            type: 'select2:select',
            params: { data: { id: value } }
        });
    });
    jQuery(joinField).val(values).trigger('change.select2');
    jQuery('#field_block_your_field .select2-container', data.ele).css('width','100%');
});

replace the component Id with the id of the component containing the connection field and replace the your_field text with the field id of the connection field.

[foncy.sv]

I tried using the “Set Connection Field Via JS” plugin, but it doesn’t seem to be working. It behaves similarly to @Effy’s method—in a way, it disables the field. Once the script loads, I can’t search for any records in it anymore.

Do you happen to know if there’s a workaround for this, or if I might be missing something in the implementation?

/* START OF PLUGIN CODE FOR Set Connection Field via JS */
TB.render('component_4', function(data) {
    const joinField = jQuery('#field_block_field_72 select.select2', data.ele).select2();
    const values = `1488`.includes('[') ? JSON.parse(`1488`.replace(/'/g, '"')) : [`1488`];
    values.forEach(value => {
        jQuery(joinField).trigger({
            type: 'select2:select',
            params: { data: { id: value } }
        });
    });
    jQuery(joinField).val(values).trigger('change.select2');
    jQuery('#field_block_field_72 .select2-container', data.ele).css('width','100%');
    if('False' === 'True') jQuery('.af-form-submit', data.ele).click();
});
/* END OF PLUGIN CODE FOR Set Connection Field via JS */