Customize buttons

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

Buttons support the styles as described in the documentation.

https://docs.appian.com/suite/help/23.2/Button_Component.html#button-styles-and-sizes

Thanks for the reply

 a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: "APPROVE",
                        color: "POSITIVE",
                        size: "MEDIUM",
                        style: "STRONG"
                      )
                      
                    },
                    align: "CENTER"
                  )
                },
                link: a!safeLink(uri: "test", openLinkIn: "NEW_TAB"),
                height: "AUTO",
                style: "SUCCESS",
                shape: "ROUNDED",
                showShadow: true
              )

a!formLayout(
  label: "",
  contents: {
    a!sectionLayout(
      contents: {
        a!columnsLayout(
          columns: {
            a!columnLayout(
              contents: {a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: {
                          "FORWARD"
                        },
                        color: "#ffffff",
                        size: "MEDIUM",
                        style: {
                          "STRONG"
                        }
                      )
                    },
                    align: "CENTER"
                  )
                },
                link: a!safeLink(uri: "test", openLinkIn: "NEW_TAB"),
                height: "AUTO",
                style: "#ff9900",
                shape: "ROUNDED",
                showShadow: true
              )}
            ),
            a!columnLayout(
              contents: {a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      a!richTextItem(
                        text: {
                          "REJECT"
                        },
                        color: "#ffffff",
                        size: "MEDIUM",
                        style: {
                          "STRONG"
                        }
                      )
                    },
                    align: "CENTER"
                  )
                },
                link: a!safeLink(uri: "test", openLinkIn: "NEW_TAB"),
                height: "AUTO",
                style: "#ff0000",
                shape: "ROUNDED",
                showShadow: true
              )}
            ),
            a!columnLayout(
              contents: {
                a!cardLayout(
                  contents: {
                    a!richTextDisplayField(
                      value: {
                        a!richTextItem(
                          text: {
                            "APPROVE"
                          },
                          color: "#ffffff",
                          size: "MEDIUM",
                          style: {
                            "STRONG"
                          }
                        )
                      },
                      align: "CENTER"
                    )
                  },
                 
                  height: "AUTO",
                  style: "#00ff00",
                  shape: "ROUNDED",
                  showShadow: true
                )
              }
            )
          }
        )
      }
    )
  },
 
)

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