Issues with Dropdowns

bpurcell 7 months ago

I have a few dropdowns in my interface, however when selecting the dropdown, choices are being constrained by the UI component they are housed in. This is leading to dropdown options being unable to be selected. How can I have the dropdown choices overflow the UI elements?

(dev) (Prod)

The strangest thing about this issue is that the dropdowns overflow as expected in my prod org, but doesn't work in either my Dev or QA org. My Prod org is 23.4 vs my Dev and QA orgs being 24.1.

Any help would be greatly appreciated!

Discussion posts and replies are publicly visible

Top Replies

bpurcell 7 months ago in reply to bpurcell +1 suggested

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…

Parents

0 Srinivas
Certified Senior Developer
7 months ago

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
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Stefan Helzle
Certified Lead Developer
7 months ago in reply to Srinivas

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.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Mike Schmitt 7 months ago in reply to Stefan Helzle

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.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 bpurcell 7 months ago in reply to Mike Schmitt

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.
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel
0 Mike Schmitt 7 months ago in reply to bpurcell

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?
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel

Reply

0 Mike Schmitt 7 months ago in reply to bpurcell

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?
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel

Children

0 bpurcell 7 months ago in reply to Mike Schmitt

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!
Cancel
Vote Up 0 Vote Down

Sign in to reply

Verify Answer

Cancel

0 Stefan Helzle

Certified Lead Developer

7 months ago in reply to bpurcell

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"
  )
}

0 bpurcell 7 months ago in reply to Stefan Helzle

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"
)

0 bpurcell 7 months ago in reply to bpurcell

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.
Cancel
Vote Up +1 Vote Down

Sign in to reply

Verify Answer

Reject Answer

Cancel