Customize buttons

Question

Hi Team 
 
 Is it possible to customize the buttons? 
 1. To display different color in the buttons. 
 2. Adjust the size of the buttons. 
 
 What all different possibilities do we have to customize as below.

Harshitha Mangamuri · Answer

Hi, 
 You can display the button in different colors and in different sizes as shown in the above image with the help of cardLayout(). 
 For more details related to button component please check below link 
 https://docs.appian.com/suite/help/23.2/Button_Component.html

Konduru Chaitanya · Answer

Hello 
 
 You cannot use colors directly in Button Widgets but the sizes can be adjusted (Accepted Values for Sizes "SMALL" , "STANDARD" (default), and "LARGE" ). As a replacement you can use cards and achieve your requirement. Please look at the below images for different types of button styles and cards. 
 
 a!localVariables(
 local!cardsAsButtons:{
 a!map(
 color:"Red",
 style:"#FF0000"
 ),
 a!map(
 color:"Orange",
 style:"#FFA500"
 ),
 a!map(
 color:"Indigo",
 style:"#4B0082"
 ),
 a!map(
 color:"Blue",
 style:"#0000FF"
 ),
 },
 {
 a!textField(
 label: "Buttons",
 readOnly: true
 ),
 a!columnsLayout(
 columns: {
 
 a!columnLayout(
 contents: {
 a!buttonArrayLayout(
 align: "CENTER",
 buttons: {
 a!buttonWidget(
 label: "PRIMARY",
 style: "PRIMARY"
 )
 },
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!buttonArrayLayout(
 align: "CENTER",
 buttons: {
 a!buttonWidget(
 label: "SECONDARY",
 style: "SECONDARY"
 )
 }
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "DESTRUCTIVE",
 style: "DESTRUCTIVE"
 )
 },
 align: "CENTER",
 )
 }
 ),
 a!columnLayout(
 contents: {
 a!buttonArrayLayout(
 buttons: {
 a!buttonWidget(
 label: "LINK",
 style: "LINK"
 )
 },
 align: "CENTER",
 )
 }
 )
 }
 ),
 a!textField(
 label: "Cards as Buttons",
 readOnly: true
 ),
 a!columnsLayout(
 columns: a!forEach(
 items:local!cardsAsButtons,
 expression: {
 a!columnLayout(
 contents: a!cardLayout(
 contents: {
 a!richTextDisplayField(
 align: "CENTER",
 value: a!richTextItem(
 text: index(fv!item,"color",null)
 )
 )
 },
 style: index(fv!item,"style",null),
 link: a!dynamicLink()
 )
 )
 }
 )
 )
 }
)

Customize buttons

Top Replies