How to configure show when

So, I need to use visibility/showWhen to display a dropdown if a certain choice of radio button is selected.

The format is kind of like this, the two dropdowns are supposed to be hidden until 'Yes' is selected in the group of the second radio buttons.

This is currently the code I have. I'm still fairly new to Appian and trying to figure things out!

I have experience w/Python/C#/Vis Basic so explaining in those terms could be helpful as well

if(
  a!radioButtonField(choiceLabels: "Yes"),
 	showWhen:true()

  Discussion posts and replies are publicly visible

Parents Reply Children
  • 0
    Certified Lead Developer
    in reply to davinar9817

    I think you'll need to provide a more comprehensive code snippet - what you have above does not look like a valid format at all.

  •            a!radioButtonField(
                  label: "Is Jira Access Required?",
                  labelPosition: "ABOVE",
                  choiceLabels: {"Yes", "No"},
                  choiceValues: {1, 2},
                  value: ri!choiceValues,
                  saveInto: ri!choiceValues,
                  required: true,
                  choiceLayout: "COMPACT",
                  validations: {}
    
                ),
              
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Which Department Requires Access?",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {                                                   /*check AT_employeeForm when needed*/
                    "Engineering",
                    "Legal",
                    "Accounting",
                    "Corporate Ops",
                    "Flight Ops",
                    "In-Space R&M",
                    "Safety",
                    "IT",
                    "Medical"
                  }
              ,
    
                  choiceValues: {                                              /*check AT_employeeForm when needed*/
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9
                  },
                  searchDisplay: "AUTO",
                  showWhen: if(
                    ri!choiceValues = true(),
                    showWhen:true()
                    ),
                
                  required: true,
                  validations: {}
                ),
        

    Edited;

    Rule Input used: 



    These are the two components that need to interact.

    When yes is selected in the radio button menu, the corresponding dropdown needs to be shown, assumedly using showWhen. It's just the actual implementation that I'm having issues with. I've looked at the documentation and reviewed the Appian video tutorials regarding Interfaces but didn't find much information in either source.

  • 0
    Certified Lead Developer
    in reply to davinar9817

    Your radio button will need to save its value somewhere - either to a Local Variable or to a Rule Input (both will work, and which one would be better depends on context that doesn't matter as much at the moment).  I notice neither of your radio button fields above saves their value anywhere (i.e. neither has a "saveInto" parameter, or a "value" parameter, meaning they will appear to not.. do anything, when you try to use them on your current interface).

    After you have that resolved, you'll need to reference the saved value from the radio button in the showWhen parameter of your dropdown.

  • I had saved their values but had forgotten to save the changes. Adding them back in now, does the if statement I used previously seem to be configured correctly? If not, what needs to change? (besides using the ri!)

  • 0
    Certified Lead Developer
    in reply to davinar9817

    Please update your code snippet above (or less preferably, repost it in a new comment) because I still can't tell what you're trying to do given the original post's small snippet.

  • +1
    Certified Lead Developer
    in reply to davinar9817

    You can replace the entire highlighted block with simply the following:

    showWhen: ri!choiceValues = 1,

  • So when I do that this is the error I get: "Could not display interface. Please check definition and inputs. Interface Definition: Expression evaluation error at function a!dropdownField:", however it doesn't explain any further

  • 0
    Certified Lead Developer
    in reply to davinar9817

    please post your current full code snippet - that error indicates a syntactical issue has crept in, most likely.

  • a!formLayout(
      label: "Contractor Form",
      contents: {
        a!sectionLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "First Name",
                      labelPosition: "ABOVE",
                      value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{6576c50e-e121-46f9-ac66-80f275bdd60b}firstName'],
                      saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{6576c50e-e121-46f9-ac66-80f275bdd60b}firstName'],
                      refreshAfter: "UNFOCUS",
                      required: true,
                      validations: {}
                    )
                  }
                ),
                a!columnLayout(
                  contents: {
                    a!textField(
                      label: "Last Name",
                      labelPosition: "ABOVE",
                      value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{9ad498eb-f112-4373-9f83-98d98fe98f1d}lastName'],
                      saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{9ad498eb-f112-4373-9f83-98d98fe98f1d}lastName'],
                      refreshAfter: "UNFOCUS",
                      required: true,
                      validations: {}
                    )
                  }
                )
              }
            )
          }
        ),
        a!sectionLayout(
          label: "",
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(
                  contents: {
                    a!columnsLayout(
                      columns: {
                        a!columnLayout(
                          contents: {
                            a!integerField(
                              label: "Contractor's Phone Number ",
                              labelPosition: "ABOVE",
                              instructions: "Please submit a number that is easily accessible.",
                              value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{f2502f28-185b-4cdb-87eb-56e09d28d249}conphoneNum'],
                              saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{f2502f28-185b-4cdb-87eb-56e09d28d249}conphoneNum'],
                              refreshAfter: "UNFOCUS",
                              required: true,
                              validations: {}
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Contractor's Company Name",
                              labelPosition: "ABOVE",
                              value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{2476f354-8a05-4418-a463-61d9127ee99d}conCompanyName'],
                              saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{2476f354-8a05-4418-a463-61d9127ee99d}conCompanyName'],
                              refreshAfter: "UNFOCUS",
                              required: true,
                              validations: {}
                            )
                          }
                        ),
                        a!columnLayout(
                          contents: {
                            a!textField(
                              label: "Contractor's Email",
                              labelPosition: "ABOVE",
                              instructions: "Their company email address.",
                              value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{2952c2ae-aeb6-47f0-9655-0628f009e981}contractorEmail'],
                              saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{2952c2ae-aeb6-47f0-9655-0628f009e981}contractorEmail'],
                              refreshAfter: "UNFOCUS",
                              validations: {}
                            )
                          }
                        )
                      }
                    )
                  }
                )
              }
            )
          }
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Project Name",
                  labelPosition: "ABOVE",
                  value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{797f8093-85fb-4e18-b4b9-e5e85a7ccbe7}projName'],
                  saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{797f8093-85fb-4e18-b4b9-e5e85a7ccbe7}projName'],
                  refreshAfter: "UNFOCUS",
                  required: true,
                  validations: {}
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!dateField(
                  label: "Start Date",
                  labelPosition: "ABOVE",
                  saveInto: {},
                  required: true,
                  validations: {}
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!dateField(
                  label: "End Date",
                  labelPosition: "ABOVE",
                  saveInto: {},
                  required: true,
                  validations: {}
                )
              },
              width: "NARROW"
            )
          },
          spacing: "SPARSE"
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Axiom Manager's Name",
                  labelPosition: "ABOVE",
                  value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{acd634c0-572b-45e4-9327-9a76ffa8ed82}mngrName'],
                  saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{acd634c0-572b-45e4-9327-9a76ffa8ed82}mngrName'],
                  refreshAfter: "UNFOCUS",
                  required: true,
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {
                a!textField(
                  label: "Axiom Manager's Email",
                  labelPosition: "ABOVE",
                  value: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{3e72a18f-c6b9-4223-a4e9-37631f23a060}mngrEmail'],
                  saveInto: ri!record['recordType!{d327a5dc-18d4-4ffd-8bdf-6a22b134677f}DS Contractor.fields.{3e72a18f-c6b9-4223-a4e9-37631f23a060}mngrEmail'],
                  refreshAfter: "UNFOCUS",
                  required: true,
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {}
            )
          }
        ),
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {
                a!radioButtonField(
                  label: "Is Jama Access Required?",
                  labelPosition: "ABOVE",
                  choiceLabels: {"Yes", "No"},
                  choiceValues: {1, 2},
                  value: ri!radioValues,
                  saveInto: ri!radioValues,
                  required: true,
                  choiceLayout: "COMPACT",
                  validations: {}
                ),
                a!radioButtonField(
                  label: "Is Jira Access Required?",
                  labelPosition: "ABOVE",
                  choiceLabels: {"Yes", "No"},
                  choiceValues: {1, 2},
                  value: ri!radioValues2,
                  saveInto: ri!radioValues2,
                  required: true,
                  choiceLayout: "COMPACT",
                  validations: {}
    
                ),
                a!radioButtonField(
                  label: "Is Confluence Access Required?",
                  labelPosition: "ABOVE",
                  choiceLabels: {"Yes", "No"},
                  choiceValues: {1, 2},
                  value: ri!radioValues,
                  saveInto: ri!radioValues,
                  required: true,
                  choiceLayout: "COMPACT",
                  validations: {}
    
                )
              },
              width: "NARROW"
            ),
            a!columnLayout(
              contents: {
                a!dropdownField(
                  label: "Which Department Requires Access?",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {                                                /*check AT_employeeForm when needed*/
                    "Engineering",
                    "Legal",
                    "Accounting",
                    "Corporate Ops",
                    "Flight Ops",
                    "In-Space R&M",
                    "Safety",
                    "IT",
                    "Medical"
                  },
    
                  choiceValues: {                                          /*check AT_employeeForm when needed*/
                    1,
                    2,
                    3,
                    4,
                    5,
                    6,
                    7,
                    8,
                    9
                  },
                  searchDisplay: "AUTO",
                  showWhen: if(
                  ri!radioValues2 = true(),
                  showWhen:true()
    ),
                  
                
                  required: true,
                  validations: {}
                ),
                  
                  
                  
                  
                a!dropdownField(
                  label: "Which Engineering Department Requires Access?",
                  labelPosition: "ABOVE",
                  placeholder: "--- Select a Value ---",
                  choiceLabels: {"AIT",
    
                  "ASCB",
    
                  "Avionics",
    
                  "AxPAC",
    
                  "AxPLSS",
    
                  "CAD",
    
                  "Crew Systems",
    
                  "EAM",
    
                  "ECLSS"},
                  choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9},
                  saveInto: {},
                  searchDisplay: "AUTO",
                  required: true,
                  validations: {}
                )
              }
            ),
            a!columnLayout(
              contents: {}
            )
          },
          spacing: "SPARSE"
        )
      },
      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
          )
        }
      )
    )