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.

You could probably do this with side-by-side Cards and the number (in the middle card) is just a rich text component with its size set to "LARGE" (or whatever you prefer).  Depending on, of course, exactly what you want this control to *do* (simply increment a locally-stored number value, or something more complex than that, you haven't really specified).

lakshmipramodchakravarthyv0584 said:

If i want to create a drop down field with values associated in it, the data type should be stored as group

Dropdowns use standard Array values (text for the labels, whatever data type you want for the values) - this doesn't have much to do with "group".

Hi Mike Schmitt ,

Thanks for the reply.

I want to increment or decrement Invoices generated for a Banking Payment process. So I want this option

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

Thanks Mike Schmitt , that helped a lot by clarifying my doubt.

Hi Mike Schmitt 

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"

),


}


)

Hi Mike Schmitt 

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"

),


}


)

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