I am trying cascading dropdown with query rules. I have this SAIL expression but

I am trying cascading dropdown with query rules. I have this SAIL expression but it doesn't work: could you help me? Thanks!
=load(
local!selectedFoodType: tointeger(null),
local!fruitChoice:tointeger(null),
local!vegetableChoice,
a!formLayout(
label: "SAIL Example: Cascading Dropdowns",
firstColumnContents: {
a!dropdownField(
label: "Food Type",
choiceLabels: rule!getTypeExp(),
choiceValues: rule!getTypeExp(),
placeholderLabel: "--- Select Food Type ---",
value: local!selectedFoodType,
saveInto: local!selectedFoodType
),
if(local!selectedFoodType = "",{},
a!dropdownField(
label: "Fruits",
choiceLabels:rule!getFailureDescription(local!selectedFoodType),
choiceValues: rule!getFailureDescription(local!selectedFoodType),
placeholderLabel: "--- Select Fruit Type ---",
value: local!fruitChoice,
saveInto: local!f...

OriginalPostID-96788

OriginalPostID-96788

  Discussion posts and replies are publicly visible

  • ...ruitChoice
    ) )
    },
    buttons: a!buttonLayout(
    primaryButtons: a!buttonWidgetSubmit(label: "Submit")
    )
    )
    )
  • Hello,one thing is that the if statement hiding the second dropdown wouldn't hide it initially because local!selectedFoodType is an integer and is being compared to a string.
  • Hi, you are right and now it works! My code is the following ("foods" is multiple, "choiceFoodType" and "fruitChoice" are single variables):
    = a!formLayout(
    label: "SAIL Example: Cascading Dropdowns",
    firstColumnContents: {
    a!dropdownField(
    label: "Food Type",
    choiceLabels: ri!foods,
    choiceValues: ri!foods,
    placeholderLabel: "--- Select Food Type ---",
    value: ri!choiceFoodType,
    saveInto: ri!choiceFoodType
    ),
    if(
    ri!choiceFoodType = "",
    {},
    a!dropdownField(
    label: "Fruits",
    choiceLabels: rule!getFailureDescription(
    ri!choiceFoodType
    ),
    choiceValues: rule!getFailureDescription(
    ri!choiceFoodType
    ),
    placeholderLabel: "--- Select Fruit Type ---",
    value: ri!fruitChoice,
    saveInto: ri!fruitChoice
    )
    )
    },
    buttons: a!buttonLayout(
    primaryButtons: a!buttonWidgetSubmit(
    label: "Submit"
    )
    )
    )
    One strange behavior I notice is the following: I choose in 1st dropdown one value (ex. "Fruits"), in the 2nd I have filtered values (ex."Banana","Orange"). I select "Orange" and then I come back to the 1st dropdown and I change to another value (ex. "Vegetables"). It show a message "The Requested Task Is Not Available
    The task may have been deleted or completed by another assignee.", but noone has taken the task because I am the only one in my test environment: maybe is it an error in my code? Thanks again!
  • But, if I blank out the 2nd drop before changing the values in the 1st drop, the error doesn't show!
  • Your dropdown values must always match an item in the choiceValues array. So when you're switching the first dropdown, the previously selected value in the second dropdown no longer matches any item in the choiceValues array, and errors out. The error message isn't return correctly right now (we have an open ticket to fix this).

    Therefore, you should clear out the value of the second dropdown whenever the user selects something in the first dropdown. In your case, you would update the saveInto field in your first dropdown to be:

    saveInto: {
    ri!choiceFoodType,
    ri!fruitChoice << rule!ucReturnFirstInput(null, _)
    }

    Look up rule!ucReturnFirstInput in the SAIL Recipes page for its definition. The same pattern is used in a couple places, so this will be a useful utility rule to have.
  • We'll update the cascading dropdown recipe to describe this scenario. Thanks for your feedback!