I want to add new field in Appian UI with number associated with Increment and Decrement icons. can I know where they are in UI Design. I am unable to figure it out in Appian Site where I am trying to develop.

I wan to implement a field as below in Appian UI.

This component I have searched in Pallete on all tabs 1) Components 2) Patterns .

Along this few more questions, please confirm,

1)If i want to create a check box field, the data type in table should be boolean for this field? If selected it will store as True otherwise False

2) If i want to create a drop down field with values associated in it, the data type should be stored as group for this field in Appian?

Is my understanding correct, thanks in advance.

  Discussion posts and replies are publicly visible

Parents Reply Children
  • The interface pattern is pretty simple - i whipped this up real quick for you as a working example.

    a!localVariables(
      local!counter: 1,
    
      a!columnsLayout(
        spacing: "NONE",
        columns: {
          a!columnLayout(
            width: "EXTRA_NARROW",
            contents: a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "CENTER",
                  value: a!richTextItem(
                    text: "-",
                    size: "LARGE"
                  )
                )
              },
              link: a!dynamicLink(
                saveInto: {
                  a!save(local!counter, local!counter - 1)
                }
              ),
              tooltip: "Subtract 1"
            )
          ),
          a!columnLayout(
            width: "EXTRA_NARROW",
            contents: a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  value: a!richTextItem(
                    size: "LARGE",
                    text: local!counter
                  )
                )
              }
            )
          ),
          a!columnLayout(
            width: "EXTRA_NARROW",
            contents: a!cardLayout(
              contents: {
                a!richTextDisplayField(
                  labelPosition: "COLLAPSED",
                  align: "CENTER",
                  value: a!richTextItem(
                    text: "+",
                    size: "LARGE"
                  )
                )
              },
              link: a!dynamicLink(
                saveInto: {
                  a!save(local!counter, local!counter + 1)
                }
              ),
              tooltip: "Add 1"
            )
          )
        }
      )
    )

  • Hi  

    I want to customize the yesterday interface component : Number Input with Incremental and Decremental operator

    I want to place this field in a single column and richTextDisplayField at the Top and component and operators below with side by side layout.

    As of now, It looks absurd.

    Code Snippet for this field in Appian UI.

    a!columnsLayout(
    columns: {
    a!columnLayout(
    contents: {
    a!richTextDisplayField(
    label: "Number of Invoices",
    labelPosition: "ABOVE"

    ),


    a!cardLayout(

    contents: {

    a!richTextDisplayField(
    label: "Number of Invoices",
    labelPosition: "COLLAPSED",
    value: a!richTextItem(
    text: "-",
    size: "SMALL"
    ),
    align: "CENTER"
    )

    },
    link: a!dynamicLink(
    saveInto: {
    a!save(local!counter, local!counter-1)
    }
    ),
    tooltip: "Subtract 1"
    ),
    a!cardLayout(
    contents: {

    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: a!richTextItem(
    text: local!counter,
    size: "SMALL"
    )
    )
    }
    ),
    a!cardLayout(
    contents: {
    a!richTextDisplayField(
    labelPosition: "COLLAPSED",
    value: a!richTextItem(
    text: "+",
    size: "SMALL"
    )
    )
    },
    link: a!dynamicLink(
    saveInto: {
    a!save(local!counter,local!counter+1)
    }
    ),
    tooltip: "Add 1"
    )
    },
    width: "EXTRA_NARROW"

    ),


    }


    )

  • 0
    Certified Senior Developer
    in reply to lakshmipramodchakravarthyv0584

    Is this how you want it to be displayed ? or do you want the number and operator to be in the same column as well ?

    a!localVariables(
      local!counter: 1,
      {
        a!richTextDisplayField(
          label: "Number of Invoices",
          labelPosition: "ABOVE"
        ),
        a!columnsLayout(
          spacing: "NONE",
          columns: {
            a!columnLayout(
              width: "EXTRA_NARROW",
              contents: a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    align: "CENTER",
                    value: a!richTextItem(text: "-", style: "STRONG", ),
                    marginBelow: "NONE"
                  )
                },
                link: a!dynamicLink(
                  saveInto: { a!save(local!counter, local!counter - 1) }
                ),
                tooltip: "Subtract 1"
              )
            ),
            a!columnLayout(
              width: "EXTRA_NARROW",
              contents: a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    value: a!richTextItem(style: "STRONG", text: local!counter),
                    marginBelow: "NONE",
                    align: "CENTER"
                  )
                }
              )
            ),
            a!columnLayout(
              width: "EXTRA_NARROW",
              contents: a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    labelPosition: "COLLAPSED",
                    align: "CENTER",
                    value: a!richTextItem(text: "+", style: "STRONG", ),
                    marginBelow: "NONE"
                  )
                },
                link: a!dynamicLink(
                  saveInto: { a!save(local!counter, local!counter + 1) }
                ),
                tooltip: "Add 1"
              )
            )
          }
        )
      }
    )