Set value based on selected value in another component

App Building
1

I have a select component called frontConclusion. Based on the value selected, I want another component, Front_Conclusion_Acronym, to populate with the corresponding abbreviation. From what I've read, I thought a ternary operator would be the way to go. Here is the code I tried as the value for Front_Conclusion_Acronym, which did not work:

{{ frontConclusion.value }} = "Real" ? "GE"
: {{ frontConclusion.value }} = "Data Replacement" ? "TE"
: {{ frontConclusion.value }} = "Digital Capture" ? "DI"
: {{ frontConclusion.value }} = "Fake Front" ? "FA"
: {{ frontConclusion.value }} = "Fake Barcode" ? "FA"
: {{ frontConclusion.value }} = "Paper Replica" ? "PA"
: {{ frontConclusion.value }} = "Paper DMV ID" ? "DP"
: {{ frontConclusion.value }} = "Digital DMV Issued ID" ? "DW"
: {{ frontConclusion.value }} = "N/A Images Deleted" ? "NA"
: {{ frontConclusion.value }} = "N/A Not an ID" ? "NO"
: {{ frontConclusion.value }} = "Headshot Replacement" ? "HE"
: {{ frontConclusion.value }} = "Scanned Document" ? "SD"
: {{ frontConclusion.value }} = "Unsure - Extreme Bad Quality" ? "UN"
: {{ frontConclusion.value }} = "Unsure - Needs Review" ? "UN"
: {{ frontConclusion.value}} = "Not Submitted" ? "NA";

I appreciate any suggestions on how to make this work.

2

Hi @StaceyG!

Not sure where you placed this ternary operator but it won't work as you are only expressing the frontConclusion.value to be in JS space. You should be including the whole thing in the curly brackets to make it work if you are putting this directly to a component's data source/mapped value.

However, I'd approach this by creating a JS transformer and just use switch-case instead of doing this long ternary operation.

3

If your frontConclusion's Data source property is an object array like this:

[{
   id: 1,   
   conclusion: 'Real',
   abbr: 'GE'
},{
   id: 2,   
   conclusion: 'Data Replacement',
   abbr: 'TE'
}]

Then the Default value of Front_Conclusion_Acronym would simply be {{frontConclusion.selectedItem.abbr}}

selectedItem is the entire object that is selected, not just the value and is the most powerful thing about Select components in my opinion. The key to getting the most from selectedItem is pass the entire object array to it which in your case would be the select query that get your conclusions.

image
image1255×687 41.9 KB

image
image1235×399 22.5 KB

Edit, Oh, and another other thing you could do is put the abbreviation in the Caption field of the Select rather than its own component. Make the caption Abbr: {{item.abbr}} and it will show up below the conclusion in gray. However after the user makes their selection the abbr disappears unless you are using a List.

1 Like
4

Thank you, @bradlymathews ! That worked perfectly, and I learned something new! :slight_smile:

1 Like
5