Issues with Dropdowns

Hi,  

The discrepancy in dropdown behavior between Appian versions 23.4 and 24.1 might be due to updates in the newer version. Check the 24.1 release notes for changes to the dropdown UI component. If necessary, adjust your SAIL code to align with the new version’s requirements and test in both environments for consistency. If issues persist, contact Appian Support for version-specific guidance.

docs.appian.com/.../modifying-dropdown-lists.html

The link you shared is not relevant for the Appian base platform.

The screenshots are a bit small to see the actual issue.

Then, I think this will only be a temporary issue, as with the PROD being on a lower version, you cannot deploy anymore to it from the higher versions on DEV and QA. So your OPS team will update it soon.

Stefan Helzle said:

The screenshots are a bit small to see the actual issue.

yeah particularly the first screenshot, it's almost impossible to tell what the issue is and what the on-form context is.

Apologies - If you look in the below screenshot you can see that the dropdown values get cut off by the component below the component holding the dropdown;

Here is how a similar component looks in our prod org acting as expected. Instead of the drop down options filling the component it overflows into the component below. In this example you can see there is no 'Custom' option (because it is cut off)

I think this will definitely still be an issue as we update our Prod org because the functionality is working correctly in prod, but not in dev/qa which are both on the newer version. 

I tried trying to look where I can set the Z access for the dropdown, but I have not been able to find any solutions.

bpurcell said:

the dropdown values get cut off by the component below the component holding the dropdown

Is this happening live (i.e. in the actual site / task / etc) or in interface designer, or in both?  Is this an up-to-date appian version?  How exactly does this differ from the environment where it's working correctly?  Are you saying they're on different versions?  If so, what are the versions in question?

What is the code looking like? Can you share some example to replicate this? In case you report this to Appian, this would be the first thing they are asking for.

The first screenshot is in our dev org (Appian version 24.1)

The second screenshot is in our prod org (Appian version 23.4)

The issues are happening both live, and in the interface designer. What's strange is our QA environment also has the issue with the dropdown (version 23.4). Our QA environment and Prod environment code bases are identical as we haven't updated our QA environment since our last Prod release. 

I haven't been able to find anywhere to denote the Z axis of interface components. Maybe I'm missing something here?

Also, I have opened a case with Appian support - thank you for that suggestion!

I would really be interested in the code of that interface. The only way I know of to create something like this, is by using a card layout with a fixed height, and then place components inside. I tried this with a drop down which works as expected in Firefox and Chrome.

{
  a!cardLayout(
    contents: {
      a!dropdownField(
        choiceLabels: {"Option 1", "Option 2", "Option 3", "Option 4",
                        "Option 5", "Option 6", "Option 7", "Option 8",
                        "Option 9", "Option 10", "Option 11", "Option 12"},
        choiceValues: {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12},
        label: "Dropdown",
        labelPosition: "ABOVE",
        placeholder: "--- Select a Value ---",
        saveInto: {},
        searchDisplay: "AUTO",
        validations: {}
      )
    },
    height: "EXTRA_SHORT",
    style: "TRANSPARENT",
    marginBelow: "STANDARD"
  )
}

Below is the code for the a!cardLayout. It is close to 400 lines, so apologies for the length.

a!cardLayout(
  contents: {
    a!columnsLayout(
      columns: {
        a!columnLayout(
          contents: {
            a!horizontalLine(),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: { a!richTextItem(text: { "    " }) }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!dropdownField(
                    choiceLabels: {
                      "All",
                      "7 Days",
                      "30 Days",
                      "90 Days",
                      "Custom"
                    },
                    choiceValues: {
                      "All",
                      "7 Days",
                      "30 Days",
                      "90 Days",
                      "Custom"
                    },
                    label: "Time Period",
                    labelPosition: "ABOVE",
                    value: if(
                      a!isNullOrEmpty(local!defaulttimeperiod),
                      local!timeperiod,
                      local!defaulttimeperiod
                    ),
                    saveInto: {
                      local!defaulttimeperiod,
                      a!save(
                        if(
                          a!isNullOrEmpty(local!defaulttimeperiod),
                          local!timeperiod,
                          local!defaulttimeperiod
                        ),
                        local!defaulttimeperiod
                      ),
                      a!save(local!Assignedto, null),
                      a!save(local!casesubtype, null),
                      a!save(local!priority, null),
                      a!save(local!search, null),
                      a!save(local!Caseintitated, null),
                      a!save(local!topAllCases, null),
                      /*a!save(local!CreatedBy, null),*/
                      a!save(local!fromdate, null),
                      a!save(local!todate, null)
                    },
                    searchDisplay: "AUTO",
                    validations: {}
                  ),
                  width: "AUTO"
                )
              }
            ),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: { a!richTextItem(text: { "       " }) }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!dateField(
                    label: "From",
                    labelPosition: "ABOVE",
                    value: local!fromdate,
                    saveInto: local!fromdate,
                    showWhen: if(
                      local!defaulttimeperiod = "Custom",
                      true,
                      false
                    ),
                    required: if(
                      local!defaulttimeperiod = "Custom",
                      true,
                      false
                    ),
                    validations: {
                      if(
                        todate(local!fromdate) > today(),
                        "From Date must not be greater than today",
                        if(
                          and(
                            local!defaulttimeperiod = "Custom",
                            a!isNullOrEmpty(todate(local!todate)),
                            (todate(local!fromdate))
                          ),
                          " To Date is Required",
                          if(
                            and(
                              todate(local!fromdate) > todate(local!todate),
                              a!isNotNullOrEmpty(todate(local!todate))
                            ),
                            "From Date must not be greater than ToDate",
                            null
                          )
                        )
                      )
                    }
                  )
                ),
                a!sideBySideItem(
                  item: a!dateField(
                    label: "To",
                    labelPosition: "ABOVE",
                    value: local!todate,
                    saveInto: local!todate,
                    showWhen: if(
                      local!defaulttimeperiod = "Custom",
                      true,
                      false
                    ),
                    required: if(
                      local!defaulttimeperiod = "Custom",
                      true,
                      false
                    ),
                    validations: {
                      if(
                        todate(local!todate) > today(),
                        "To Date must not be greater than today",
                        if(
                          and(
                            local!defaulttimeperiod = "Custom",
                            a!isNullOrEmpty(todate(local!fromdate)),
                            a!isNotNullOrEmpty(todate(local!todate))
                          ),
                          " From Date is Required",
                          ""
                        )
                      )
                    }
                  )
                )
              },
              spacing: "NONE"
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!horizontalLine(),
            a!sideBySideLayout(
              items: {
                a!sideBySideItem(
                  item: a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: { a!richTextItem(text: { "" }) }
                  ),
                  width: "MINIMIZE"
                ),
                a!sideBySideItem(
                  item: a!dropdownField(
                    choiceLabels: {
                      "All",
                      "Billing",
                      "Client Service",
                      "Recon",
                      "Compliance"
                    },
                    choiceValues: {
                      0,
                      1,
                      2, 
                      5,
                      6
                    },
                    label: "Case Type",
                    labelPosition: "ABOVE",
                    value: if(
                      a!isNullOrEmpty(local!defaultCaseType),
                      local!caseType,
                      local!defaultCaseType
                    ),
                    saveInto: {
                      local!defaultCaseType,
                      a!save(
                        if(
                          a!isNullOrEmpty(local!defaultCaseType),
                          local!caseType,
                          local!defaultCaseType
                        ),
                        local!defaultCaseType
                      ),
                      a!save(local!Assignedto, null),
                      a!save(local!casesubtype, null),
                      a!save(local!priority, null),
                      a!save(local!search, null),
                      a!save(local!Caseintitated, null),
                      a!save(local!topAllCases, null),
                      /*a!save(local!CreatedBy, null),*/
                      a!save(local!fromdate, null),
                      a!save(local!todate, null)
                    },
                    searchDisplay: "AUTO",
                    validations: {}
                  ),
                  width: "AUTO"
                )
              }
            )
          }
        ),
        a!columnLayout(
          contents: {
            a!dateField(
              label: "Date",
              labelPosition: "ABOVE",
              saveInto: {},
              /*showWhen:local!defaulttimeperiod="Year to date",*/
              validations: {}
            )
          },
          showWhen: local!defaulttimeperiod = "Year to date"
        ),
        a!columnLayout(
          contents: {
            a!horizontalLine(),
            a!dropdownField(
              choiceLabels: {
                a!forEach(
                  items: fn!reject(
                    fn!isnull,
                    {
                      union(
                        local!CreatedByCases,
                        append(local!CreatedByCases,local!CreatedBy)
                      )
                    }
                  ),
                  expression: a!match(
                                value: fv!item,
                                equals: "All",
                                then: "All",
                                default: concat(
                                  user(username: fv!item, property: "firstName"),
                                  " ",
                                  user(username: fv!item, property: "lastName")
                                )
                              )
                )
              },
              choiceValues: {
                fn!reject(
                  fn!isnull,
                  {
                    union(
                      local!CreatedByCases,
                      append(local!CreatedByCases,local!CreatedBy)
                    )
                  }
                )
              },
              label: "Created By",
              labelPosition: "ABOVE",
              value: if(
                a!isNullOrEmpty(local!CreatedBy),
                fn!reject(
                  fn!isnull,
                  {
                    union(
                      local!CreatedByCases,
                      local!CreatedByCases
                    )
                  }
                ),
                local!CreatedBy
              ),
              saveInto: {
                local!CreatedBy,
                a!save(
                  if(
                    a!isNullOrEmpty(local!CreatedBy),
                    fn!reject(
                      fn!isnull,
                      {
                        union(
                          local!CreatedByCases,
                          local!CreatedByCases
                        )
                      }
                    ),
                    local!CreatedBy
                  ),
                  local!CreatedBy
                ),
                a!save(local!Assignedto, null),
                a!save(local!casesubtype, null),
                a!save(local!priority, null),
                a!save(local!search, null),
                a!save(local!Caseintitated, null),
                a!save(local!topAllCases, null)
              },
              searchDisplay: "AUTO",
              validations: {}
            )
          }
        ),
        a!columnLayout(contents: {}, width: "1X"),
        a!columnLayout(
          contents: {
            a!columnsLayout(
              columns: {
                a!columnLayout(contents: {}, width: "1X"),
                a!columnLayout(
                  contents: {
                    a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                    a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                    a!sideBySideLayout(
                      items: {
                        a!sideBySideItem(
                          item: a!recordActionField_23r3(
                            actions: {
                              a!recordActionItem(
                                action: 'recordType!{b58350e3-af30-4f26-b350-464f7238c988}BOP_IntakeForm.actions.{0d7166b5-e7bf-4154-9ed9-b2d28519127c}OpenCase'
                              )
                            },
                            style: "TOOLBAR",
                            display: "LABEL_AND_ICON",
                            align: "END"
                          ),
                          width: "AUTO"
                        )
                      }
                    )
                  },
                  width: "6X"
                ),
                a!columnLayout(
                  contents: {
                    a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                    a!horizontalLine(weight: "THIN", color: "#E5EDFF"),
                    a!cardLayout(
                      contents: {
                        a!richTextDisplayField(
                          labelPosition: "COLLAPSED",
                          value: {
                            a!richTextIcon(icon: "plus"),
                            " OPEN CASE"
                          },
                          align: "RIGHT"
                        )
                      },
                      link: a!safeLink(
                        label: "",
                        uri: local!backofficelink,
                        openLinkIn: "SAME_TAB"
                      ),
                      height: "AUTO",
                      style: "#7C0058",
                      shape: "SEMI_ROUNDED",
                      marginBelow: "STANDARD"
                    )
                  },
                  width: "4X"
                )
              }
            )
          }
        )
      }
    )
  },
  height: if(
    local!defaulttimeperiod = "Custom",
    "SHORT_PLUS",
    "SHORT"
  ),
  showWhen: if(
    or(
      toboolean(local!ReviewForm) = true,
      toboolean(local!opencase) = true
    ),
    false,
    true
  ),
  style: "#FFE7F8",
  padding: "NONE",
  marginAbove: "NONE",
  marginBelow: "NONE"
)

I wanted to reply to this because I received info from Appian support -

Hi Brian,

The behavior reported appears to be a known issue in which the choice values of a dropdown component would get cut off by the containing layout. This was fixed in 24.1.236.0, so I'd like to try restarting the environment to see if this fixes the issue. Could you provide a 2-hour maintenance window for us to restart the site and apply the hotfix?

Best,

Lyann

Final Edit: The update did fix this issue.

I wanted to reply to this because I received info from Appian support -

Hi Brian,

The behavior reported appears to be a known issue in which the choice values of a dropdown component would get cut off by the containing layout. This was fixed in 24.1.236.0, so I'd like to try restarting the environment to see if this fixes the issue. Could you provide a 2-hour maintenance window for us to restart the site and apply the hotfix?

Best,

Lyann

Final Edit: The update did fix this issue.