Select attempting to set the drop down to show the value that is present in the data

💬 App Building
1

I have a drop down that is not mapped to the data source since the field being used is sometimes not defined.

I try have tried to use a lot of different techniques to set the value in the dropdown and all that is happening is that the default selection is always being set.

The trigger to populate the form where the select object is located attempts to set the value in the Success event handler.

I send the select item to the console log before and after the script has attempted to set the selection.

Here is what the select control looks like

image
image1160×733 105 KB

This is how each of the drop down selection is setup
image

This is the code in the Success event handler

not_found.setHidden(true);
console.log("UID: ", button1ClickHandler.data[0].uid);
console.log("email: ", button1ClickHandler.data[0].email)
console.log("isTrusted: ", button1ClickHandler.data[0].isTrusted)
console.log("form: ", form1);
console.log("select: ", select1);
if (button1ClickHandler.data[0].isTrusted === true)
{
  console.log("Found Trusted");
  select1.selectedIndex = 0
  select1.selectedItem = select1.data[0] 
  select1.setValue("Trusted");
  select1.value = "Trusted";
  select1.label = "Trusted";
  select1.resetValue("Trusted");
}
else if (button1ClickHandler.data[0].isTrusted === false)
{
  console.log("Found Not Trusted");
  select1.setValue("Not Trusted");
  select1.selectedIndex = 1
  select1.selectedItem = select1.data[1] 
  select1.value = "Not Trusted";
  select1.label = "Not Trusted";
  select1.resetValue("Not Trusted");
}
else {
  console.log("Found undef");
  select1.setValue("Undefined");
  select1.selectedIndex = 2
  select1.selectedItem = select1.data[2] 
  select1.value = "Undefined";
  select1.label = "Undefined";
  select1.resetValue("Undefined");
}
console.log("select: ", select1);

As you can see I am attempting to use basically everything. I had tried each individually too with the same result the Undefined option always is selected.

The console log for the select1 control before making any changes has the following information, I needed to do two screenshots for the object

image
image451×777 64.2 KB

image
image445×534 43.9 KB

After the script runs and the select object has been altered the object now looks like the following again two screenshots.

image
image422×777 63.6 KB

image

Hope this is enough information for some one to tell me why the select dropdown is not showing the proper value

I commented out the resetValue method and this did not change the outcome

2

If I'm understanding correctly, you're running this script after fetching the data so that you can populate the menu? Have you considered tying the default value to the value in the data and allowing nulls to just be null until you change it? Then you'd have two options:

  • Update the database record on change and re-fetch the data. The select menu will again populate with the value stored in the key that you reference.
  • Use a variable to store a copy of the data that you initially fetch and populate your fields form that. On change use setIn on that variable to update the value.

The first method involves a bit less logic but can be slow as you're re-querying with changes.

And sorry that this doesn't directly address the question. I'm not sure why the select object shows one value and displays another, that isn't what I'd anticipate. However I think if you follow the patterns outlined above the component will stay in sync with the data.

3

I found a very simple solution that is to place the following javascript in the Default Value field

{{
('isTrusted' in table1.data[0] && table1.data[0].isTrusted === true) ? "Trusted" : ('isTrusted' in table1.data[0] && table1.data[0].isTrusted === false) ? "Not Trusted" : "Undefined"
}}

This checks to ensure the isTrusted exists and checks for the two states the boolean could be in. When isTrusted does not exist then the Undefined is the default value.

This works very well and gives me exactly what I was looking for.

Thank you for your reply

1 Like