Question

How to display values from drop-down depending of the selected values

Forum|Forum|4 years ago
December 16, 2021
13 replies
0 views

How to code for "display values from drop-down depending of the selected values? Cany any one provide sample code using the rule inputs for this?

hrishikeshd997

If you are looking for a cascading dropdown pattern, here is the SAIL recipe for it

https://docs.appian.com/suite/help/21.4/recipe-configure-cascading-dropdowns.html

praveenm0008Author

a!formLayout(
  label: "Create Incident Management",
  contents: {
    a!boxLayout(
      label: "Requestor Details",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Requestor",
                  labelPosition: "ABOVE",
                  value: loggedInUser(),
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  readOnly: true(),
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Designation",
                  labelPosition: "ABOVE",
                  value: "Project Lead",
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  readOnly: true(),
                  validations: {}
                )
              }
            )
          }
        )
      },
      style: "ACCENT"
    ),

    
    ri!availableSubCategories: choose(
      if(isnull(ri!category),1,ri!category),
      {"Laptop Issue","Internet Issue"},
      {"Cabs Issue","AC Issue"},
      {"Salary Issue","Project Allocation Issue"},
      {"Finance Planning","Fund Raising"}
    ),
    
    a!sectionLayout(
      label: "Incident Category",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Category",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {"IT Support", "Admin Support", "HR Support", "Finance"},
                  choiceValues: {1,2,3,4},
                  value : ri!category,
                  saveInto:{
                    ri!category,
                    a!save(ri!subCategory, null)

                  }
                  /*searchDisplay: "AUTO",*/
                  /*validations: {}*/
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Sub Category",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels:ri!availableSubCategories,

                  choiceValues:ri!availableSubCategories,
                  value: ri!subCategory,
                  saveInto:{ri!subCategory},
                  disabled: isnull(ri!category),
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dateTimeField(
                  label: "Reporting Date and Time",
                  labelPosition: "ABOVE",
                  value: ri!reportingDateTime,
                  saveInto: ri!reportingDateTime,
                  validations: {}
                )
              }
            )
          }
        ),
        a!cardLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "Incident Title",
                      labelPosition: "ABOVE",
                      value : ri!incidentTitle,
                      saveInto: {ri!incidentTitle},
                      refreshAfter: "UNFOCUS",
                      validations: {}

                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!paragraphField(
                      label: "Description",
                      labelPosition: "ABOVE",
                      value: ri!Description,
                      saveInto: ri!Description,
                      refreshAfter: "UNFOCUS",
                      height: "MEDIUM",
                      validations: {}
                    )
                  }
                )
              }
            )
          },
          height: "AUTO",
          style: "SUCCESS",
          marginBelow: "STANDARD",
          showBorder: false()
        )
      }
    ),
    a!boxLayout(
      label: "SLA",
      style: "ACCENT"
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Submit",
        submit: true,
        style: "PRIMARY"
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: ri!cancel,
        submit: true,
        style: "NORMAL",
        validate: false
      )
    }
  )
)

As per your suggestion, I have used above code. I have used rule inputs instead of local variables in my form. Please check the code from line no.42 to 90. I am getting below error message.

Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!dropdownField [line 80]: Could not find variable 'ri!availableSubCategories'

Eventhough I have used ri!subCategory instead of ri!availableSubCategories, I am getting error message like below.

Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!dropdownField [line 80]: A dropdown component [label="Sub Category"] has an invalid value for "choiceValues". Choice values cannot be null.

csteward

Additionally, we could provide a little more assistance if you can share your use case. Otherwise, here is a random example of a dropdown populated based on a selection of another dropdown:

a!localVariables(
  local!carData: {
    a!map(type: "BMW X5", colors: {"Black","Red","White"}),
    a!map(type: "Porsche Cayenne", colors: {"Blue","Gold","Grey"})
  },
  local!carSelected,
  local!colorSelected,
  local!index: a!refreshVariable(
    value: index(
      wherecontains(
        local!carSelected,
        a!forEach(items: local!carData.type, expression: tostring(fv!item))
      ),
      1,
      0
    )
  ),
  local!colorOptions: a!refreshVariable(
    value: property(index(local!carData,local!index,{}),"colors",{})
  ),
  
  a!sideBySideLayout(
    items: {
      a!sideBySideItem(
        item: a!dropdownField(
          label: "Car",
          placeholder: "Select..",
          choiceLabels: local!carData.type,
          choiceValues: local!carData.type,
          value: local!carSelected,
          saveInto: {
            local!carSelected,
            a!save(local!colorSelected,null)
          }
        )
      ),
      a!sideBySideItem(
        item: a!dropdownField(
          label: "Color",
          placeholder: "Select..",
          disabled: isnull(local!carSelected),
          choiceLabels: local!colorOptions,
          choiceValues: local!colorOptions,
          value: local!colorSelected,
          saveInto: local!colorSelected,
        )
      )
    }
  )
)

praveenm0008Author

a!formLayout(
  label: "Create Incident Management",
  contents: {
    a!boxLayout(
      label: "Requestor Details",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Requestor",
                  labelPosition: "ABOVE",
                  value: loggedInUser(),
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  readOnly: true(),
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Designation",
                  labelPosition: "ABOVE",
                  value: "Project Lead",
                  saveInto: {},
                  refreshAfter: "UNFOCUS",
                  readOnly: true(),
                  validations: {}
                )
              }
            )
          }
        )
      },
      style: "ACCENT"
    ),

    
    ri!availableSubCategories: choose(
      if(isnull(ri!category),1,ri!category),
      {"Laptop Issue","Internet Issue"},
      {"Cabs Issue","AC Issue"},
      {"Salary Issue","Project Allocation Issue"},
      {"Finance Planning","Fund Raising"}
    ),
    
    a!sectionLayout(
      label: "Incident Category",
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Category",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {"IT Support", "Admin Support", "HR Support", "Finance"},
                  choiceValues: {1,2,3,4},
                  value : ri!category,
                  saveInto:{
                    ri!category,
                    a!save(ri!subCategory, null)

                  }
                  /*searchDisplay: "AUTO",*/
                  /*validations: {}*/
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Sub Category",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels:ri!availableSubCategories,

                  choiceValues:ri!availableSubCategories,
                  value: ri!subCategory,
                  saveInto:{ri!subCategory},
                  disabled: isnull(ri!category),
                  searchDisplay: "AUTO",
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!dateTimeField(
                  label: "Reporting Date and Time",
                  labelPosition: "ABOVE",
                  value: ri!reportingDateTime,
                  saveInto: ri!reportingDateTime,
                  validations: {}
                )
              }
            )
          }
        ),
        a!cardLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "Incident Title",
                      labelPosition: "ABOVE",
                      value : ri!incidentTitle,
                      saveInto: {ri!incidentTitle},
                      refreshAfter: "UNFOCUS",
                      validations: {}

                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!paragraphField(
                      label: "Description",
                      labelPosition: "ABOVE",
                      value: ri!Description,
                      saveInto: ri!Description,
                      refreshAfter: "UNFOCUS",
                      height: "MEDIUM",
                      validations: {}
                    )
                  }
                )
              }
            )
          },
          height: "AUTO",
          style: "SUCCESS",
          marginBelow: "STANDARD",
          showBorder: false()
        )
      }
    ),
    a!boxLayout(
      label: "SLA",
      style: "ACCENT"
    )
  },
  buttons: a!buttonLayout(
    primaryButtons: {
      a!buttonWidget(
        label: "Submit",
        submit: true,
        style: "PRIMARY"
      )
    },
    secondaryButtons: {
      a!buttonWidget(
        label: "Cancel",
        value: true,
        saveInto: ri!cancel,
        submit: true,
        style: "NORMAL",
        validate: false
      )
    }
  )
)

As per your suggestion, I have used above code. I have used rule inputs instead of local variables in my form. Please check the code from line no.42 to 90. I am getting below error message.

Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!dropdownField [line 80]: Could not find variable 'ri!availableSubCategories'

Eventhough I have used ri!subCategory instead of ri!availableSubCategories, I am getting error message like below.

Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!dropdownField [line 80]: A dropdown component [label="Sub Category"] has an invalid value for "choiceValues". Choice values cannot be null.

csteward

Regarding line 42-48, you cannot declare ri! (rule inputs) in your interface as you do here. Documentation is here related to Interface Variables and Inputs.

Instead this would be declared as a local variable, such as:

a!localVariables(
  local!availableSubCategories: choose(
    if(isnull(ri!category),1,ri!category),
    {"Laptop Issue","Internet Issue"},
    {"Cabs Issue","AC Issue"},
    {"Salary Issue","Project Allocation Issue"},
    {"Finance Planning","Fund Raising"}
  ),

  a!formLayout(
    label: "Create Incident Management",
    contents: {
      a!boxLayout(
        label: "Requestor Details",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Requestor",
                    labelPosition: "ABOVE",
                    value: loggedInUser(),
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    readOnly: true(),
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!textField(
                    label: "Designation",
                    labelPosition: "ABOVE",
                    value: "Project Lead",
                    saveInto: {},
                    refreshAfter: "UNFOCUS",
                    readOnly: true(),
                    validations: {}
                  )
                }
              )
            }
          )
        },
        style: "ACCENT"
      ),

      a!sectionLayout(
        label: "Incident Category",
        contents: {
          a!columnsLayout(
            columns: {
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    label: "Category",
                    labelPosition: "ABOVE",
                    placeholder: "--- Select a Value ---",
                    choiceLabels: {"IT Support", "Admin Support", "HR Support", "Finance"},
                    choiceValues: {1,2,3,4},
                    value : ri!category,
                    saveInto:{
                      ri!category,
                      a!save(ri!subCategory, null)

                    }
                    /*searchDisplay: "AUTO",*/
                    /*validations: {}*/
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dropdownField(
                    label: "Sub Category",
                    labelPosition: "ABOVE",
                    placeholder: "--- Select a Value ---",
                    choiceLabels:local!availableSubCategories,
                    choiceValues:local!availableSubCategories,
                    value: ri!subCategory,
                    saveInto:{ri!subCategory},
                    disabled: isnull(ri!category),
                    searchDisplay: "AUTO",
                    validations: {}
                  )
                }
              ),
              a!columnLayout(
                contents: {
                  a!dateTimeField(
                    label: "Reporting Date and Time",
                    labelPosition: "ABOVE",
                    value: ri!reportingDateTime,
                    saveInto: ri!reportingDateTime,
                    validations: {}
                  )
                }
              )
            }
          ),
          a!cardLayout(
            contents: {
              a!columnsLayout(
                columns: {
                  a!columnLayout(
                    contents: {
                      a!textField(
                        label: "Incident Title",
                        labelPosition: "ABOVE",
                        value : ri!incidentTitle,
                        saveInto: {ri!incidentTitle},
                        refreshAfter: "UNFOCUS",
                        validations: {}

                      )
                    }
                  ),
                  a!columnLayout(
                    contents: {
                      a!paragraphField(
                        label: "Description",
                        labelPosition: "ABOVE",
                        value: ri!Description,
                        saveInto: ri!Description,
                        refreshAfter: "UNFOCUS",
                        height: "MEDIUM",
                        validations: {}
                      )
                    }
                  )
                }
              )
            },
            height: "AUTO",
            style: "SUCCESS",
            marginBelow: "STANDARD",
            showBorder: false()
          )
        }
      ),
      a!boxLayout(
        label: "SLA",
        style: "ACCENT"
      )
    },
    buttons: a!buttonLayout(
      primaryButtons: {
        a!buttonWidget(
          label: "Submit",
          submit: true,
          style: "PRIMARY"
        )
      },
      secondaryButtons: {
        a!buttonWidget(
          label: "Cancel",
          value: true,
          saveInto: ri!cancel,
          submit: true,
          style: "NORMAL",
          validate: false
        )
      }
    )
  )
)

Sign up

Login with SSO

Login to the community

Login with SSO