Issues with Dropdowns

RE: Issues with Dropdowns

Mike Schmitt — Fri, 26 Apr 2024 12:39:26 GMT

[quote userid="137801" url="~/discussions/f/user-interface/34784/issues-with-dropdowns/134331"]try to deploy that hotfix.[/quote]

FYI, for cloud customers, generally a site restart will automatically apply the latest hotfix, which is probably why Appian Support is suggesting a restart.

RE: Issues with Dropdowns

Ranjith shanmugam — Fri, 26 Apr 2024 10:24:12 GMT

Hello bpurcell ,

This issue is fixed with Appian hotfix try to deploy that hotfix.

we also faced the same, After hotfix working fine.

Hotfix : 24.1.236.0

RE: Issues with Dropdowns

bpurcell — Thu, 25 Apr 2024 19:02:06 GMT

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.

RE: Issues with Dropdowns

bpurcell — Thu, 25 Apr 2024 18:43:44 GMT

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

RE: Issues with Dropdowns

Stefan Helzle — Thu, 25 Apr 2024 18:20:51 GMT

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

RE: Issues with Dropdowns

bpurcell — Thu, 25 Apr 2024 18:09:20 GMT

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!

RE: Issues with Dropdowns

Stefan Helzle — Thu, 25 Apr 2024 17:13:33 GMT

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.

RE: Issues with Dropdowns

Mike Schmitt — Thu, 25 Apr 2024 16:56:33 GMT

[quote userid="229267" url="~/discussions/f/user-interface/34784/issues-with-dropdowns/134282"]the dropdown values get cut off by the component below the component holding the dropdown[/quote]

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?

RE: Issues with Dropdowns

bpurcell — Thu, 25 Apr 2024 16:41:25 GMT

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.

RE: Issues with Dropdowns

Mike Schmitt — Thu, 25 Apr 2024 13:48:31 GMT

[quote userid="274702" url="~/discussions/f/user-interface/34784/issues-with-dropdowns/134268"]The screenshots are a bit small to see the actual issue.[/quote]

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

RE: Issues with Dropdowns

Stefan Helzle — Thu, 25 Apr 2024 13:47:11 GMT

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.

RE: Issues with Dropdowns

Mike Schmitt — Thu, 25 Apr 2024 13:38:12 GMT

In cases where there's an issue that's seemingly internal to the component itself, it may be better to just raise a support case directly with Appian Support, as they're the only ones who can put things on the radar of the engineering team (much as i might try doing it myself here).

RE: Issues with Dropdowns

SRINIVAS M — Thu, 25 Apr 2024 04:16:47 GMT

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