Hello, I am struggling with how to retrieve values in the extra columns in a Drop Down field linked to an Excel spreadsheet on a public web form. The JavaScript method as published in your documentation does not seem to work as expected in my form.
The following code always returns an empty value for the selectedItem property, even though the field is full populated. Trying to log the data to the console just results in undefined being displayed:
var pmtLookup = fd.field('PaymentLookup');
pmtLookup.$on('change', function(value) {
// Try to get the extra column values
var pmtData = pmtLookup.selectedItem;
console.log(pmtData);
if (pmtData) {
console.log(pmtData.PaidBy);
console.log(pmtData.ID);
console.log(pmtData.PmtDescription);
}
});
What am I doing wrong?
Edit: JavaScript is not my primary programming language, so it's possible I am doing something stupid here. LMK if so...
Dear @chs-web,
Have you added the Extra columns to the field property?
Hello Nikita. Yes, we have done.
Dear @chs-web,
Are you wrapping your code in fd.rendered()? It should be:
fd.rendered(function(){
var pmtLookup = fd.field('PaymentLookup');
pmtLookup.$on('change', function(value) {
// Try to get the extra column values
var pmtData = pmtLookup.selectedItem;
console.log(pmtData);
if (pmtData) {
console.log(pmtData.PaidBy);
console.log(pmtData.ID);
console.log(pmtData.PmtDescription);
}
});
});
It should also be outside of the commented out example area.
If it doesn't work still, please, include screenshots from the JS editor and from the browser's console.
Thank you Nikita.
This is interesting. The details don't matter, but we are trying to use the Drop Down control as a lookup for past payments in order to prevent duplicates from being processed. So, we load the payment history into the control when the form loads, then after the control is fully loaded, we set its value property in code and then attempt to get the extra columns from the selectedItem property.
What we have been doing is the following:
fd.rendered(function (vue) {
console.log('rendered');
// Bunch of initialization...
initPaymentLookup();
});
The initPaymentLookup() function looks like this:
// Initialize lookup array
function initPaymentLookup() {
var list = fd.field('PaymentLookup').widget.dataSource.data();
if (typeof list[0] == 'undefined') {
window.setTimeout(initPaymentLookup, 250);
} else {
// Check to see if a payment exists for this item
fd.field('PaymentLookup').value = fd.field('TargetSubmissionID').value;
$(".form-initializing-msg").css("display", "none");
paymentLookupChanged();
}
}
So, this is basically an async call to defer processing until the Drop Down control has populated. The paymentLookupChanged() function is where we are trying to get the selectedItem property.
This might place it outside the scope of fd.rendered()... Is this why it is failing?
Is there a better way to determine when the control is fully populated so that we can do this test?
I should add that we are using a workaround which is to simply check for the existence of the Drop Down text property:
function paymentLookupChanged() {
let matchingPmtFound = false;
var pmtDescription = fd.field('PaymentLookup').widget.text();
if (pmtDescription) {
// Found a payment
// Scope only to show entries for now
if (fd.field('TargetList').value == "Show Entries") {
matchingPmtFound = true;
}
}
//... other stuff here
}
This tells us that we have found a matching item, but does not allow us to check further details about the item in question.
Thanks for listening.
Hello Nikita. I'm back with further information.
To sanity check this, I temporarily disabled our production code an added the example code at the very top of our fd.rendered() function. There was no change in behavior I'm afraid.
I have attached screenshots of our code in the editor and the results in the console:
Not sure what could be going on, but it is still not working.
We have had this particular form in production for a couple of years. Is this functionality dependent on a newer version of the library that older forms would not see maybe?
Dear @chs-web,
You're using the web editor, so it should all be updated, though you can try with a new form as well.
Here's the table I've tested with:
Selected all the extra fields for the Dropdown field:
Here's the code I am running:
fd.rendered(function(){
var pmtLookup = fd.field('PaymentLookup');
pmtLookup.$on('change', function(value) {
// Try to get the extra column values
var pmtData = pmtLookup.selectedItem;
console.log(pmtData);
if (pmtData) {
console.log(pmtData.PaidBy);
console.log(pmtData.ID);
console.log(pmtData.PmtDescription);
}
});
});
Here's the result:
You can see it here - PaymentLookup
Hello and thanks for the example. It must be something on our end, though I'm puzzled as to what. I will create a dedicated test form to simplify things and try again.
Best,
Gary
Hello Nikita, back with more information.
I created a test form and could get it all to work when running the Preview of the form on the Plumsail site. So, I went back to our original form and implemented the same code, and lo and behold, it all worked fine in the Preview.
However--when I run the same form with the same code on our production web site, I still get the 'Undefined' output for the .selectedItem property.
I am at a loss as to what might be triggering this.
Do you have any thoughts on why this behavior might be site-specific? We are running WordPress using the Kriesi Enfold theme. We have a few plugins but there is nothing I can think of that should be interfering with your code.
Any thoughts would be welcome.
Gary
Dear @chs-web,
Sounds like something on the website is preventing the scripts from running - we'll need to investigate. Will you be able to share a link to the form with us? If you don't want to share it here, send it to us at support@plumsail.com
Thank you so much. I followed up via email.
Gary
Hello Nikita. One more data point to add to this:
I have now tested this on a brand-new form, and it is running as expected on our site (yay!). This means that the problem, whatever it is, is specific to the original form or page I had been using.
Given this, I think it is not necessary for you to further investigate this per my email follow up. We should be able to figure out why the original form is not working as expected, since it seems to be something with our code.
So if you haven't already looked into this, I would say hold off for now. I will try to circle back here when we eventually figure out what was going on and post a resolution.
Thank you!
