Skip to main content
G
ghanashyamm0004
April 18, 2022
Question

Using text as italics in a dropdown field

  • April 18, 2022
  • 8 replies
  • 0 views

Hi Folks,

Is there a way to show the value in a dropdown in italics?

Regards,

Ghanashyam

8 replies

N
nareshs945
April 18, 2022

Hi,

I don't think Appian have that functionality. If you really want to display list of available options in italic use rich text display filed (to display your options) along with an selection Icon or card layout with rich text field. 

stefanhelzle0001
stefanhelzle0001
Brainy
April 18, 2022

Drop down fields do not support any formatting. What is the use case here?

G
ghanashyamm0004Author
April 19, 2022

I need to show some values in the dropdown in italics font like this below

You can see "Commonly Used icon " are in italics

stefanhelzle0001
stefanhelzle0001
Brainy
April 19, 2022

Got it. I would like to refer to what [mention:b45a4f6a20b14a008e4e0ec732a8bf98:e9ed411860ed4f2ba0265705b8793d05] already said a few times. A requirement is about functionality, but not about the looks.

Why do these need to be italic? Should the user prefer to select on of these? Could you sort these to the top?

    paoloc0002
    paoloc0002
    February 22, 2023

    Good Day Ghanashyam, 

    Appian doesn't support this functionality yet in a drop down component. Alas, you can take your choice labels, and utilize a rich text display field inside of an a!forEach. This will return the desired display for each field. From there, you can utilize these values in another component that could provide similar functionalities as needed. I would definitely mind the size of your list you are utilizing due to the fact that it would be non-performant if your list is too large. 

    Best of luck! 

    stewart.burchell
    stewart.burchell
    February 22, 2023

    There are other ways if you want to draw attention to specific items in the list...like the use of Unicode values for symbols...like as follows:

      komalj3844
      komalj3844
      March 5, 2023

      Hi Ghanashyam

      Here is the solution 

      a!localVariables(
      local!commonvalue: concat(
      a!forEach(
      items: {
      10090/*(*/
      ,
      119914/*C*/
      ,
      119952/*o*/
      ,
      119950/*m*/
      ,
      119950/*m*/
      ,
      119952/*o*/
      ,
      119951/*n*/
      ,
      119949/*l*/
      ,
      119962/*y*/
      ,
      32/* */
      ,
      119932/*U*/
      ,
      119956/*s*/
      ,
      119942/*e*/
      ,
      119941/*d*/
      ,
      32/* */
      ,
      119920/*I*/
      ,
      119940/*c*/
      ,
      119952/*o*/
      ,
      119951/*n*/
      ,
      10091/*)*/

      },
      expression: char(fv!item)
      )
      ),
      local!choicelabel: {
      "Series 23- GP (Principal)",
      "Series 26-IP (Principal)",
      concat("Series 3 - NFA ", local!commonvalue)
      },
      local!value,
      a!dropdownField(
      label: "Field",
      choiceLabels: local!choicelabel,
      choiceValues: local!choicelabel,
      placeholder: "--Select--",
      value: local!value,
      saveInto: local!value
      )
      )

      You can concat local!commonvalue to any of you choice label and make a common rule so that its easy to be used any time

      stefanhelzle0001
      stefanhelzle0001
      Brainy
      March 5, 2023

      Using unicode characters to simulate font styling is a neat idea! Thanks a lot for sharing.

      BTW, there is no need to beat such a simple problem using a foreach.

      a!localVariables(
  local!commonvalue: joinarray(
    char(
      {
        10090,
        119914,
        119952,
        119950,
        119950,
        119952,
        119951,
        119949,
        119962,
        32,
        119932,
        119956,
        119942,
        119941,
        32,
        119920,
        119940,
        119952,
        119951,
        10091
      }
    ),
    ""
  ),
  local!choicelabel: {
    "Series 23- GP (Principal)",
    "Series 26-IP (Principal)",
    concat("Series 3 - NFA ", local!commonvalue)
  },
  local!value,
  a!dropdownField(
    label: "Field",
    choiceLabels: local!choicelabel,
    choiceValues: local!choicelabel,
    placeholder: "--Select--",
    value: local!value,
    saveInto: local!value
  )
)

        Terms & ConditionsAccessibility statement