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.

Question

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.

Mike Schmitt · Answer

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

Mike Schmitt · Answer

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