Button Style Card Layout

Question

Hi 
 Need some one help!! 
 I want to create a button style card layout.I cannot change outer line color .How can i change outline color 
 
 a!columnsLayout(
 columns: {
 a!columnLayout(
 contents: {
 a!cardLayout(
 contents: a!richTextDisplayField(
 value: {
 a!richTextItem(
 text: "Back",
 color: "ACCENT",
 style: "STRONG"
 
 )
 },
 
 align: "CENTER",
 marginAbove: "NONE",
 marginBelow: "EVEN_LESS"
 ),
 link: a!dynamicLink(
 value: "ACCEPT"
 /*saveInto: local!acceptTask,*/
 /*showWhen: count(tointeger(local!selected)) <= 50*/
 )
 
 /*style: "INFO"*/
 )
 }
 ),
 a!columnLayout(
 contents: {}
 ),
 a!columnLayout(
 contents: {}
 )
 }
 ) 
 My desire image is below.

Mike Schmitt · Answer

spykid said: How can I create the button design I want without using card layout? 
 a!buttonWidget() 
 This is the standard button. It's usable in ALL but a VERY FEW use cases. What exactly is your situation?

Konduru Chaitanya · Answer

Below is an example. you can re-work according to your requirement. {
 a!localVariables(
 local!options: {
 a!map(name: "House"),
 a!map(name: "Condo")
 },
 local!selectedCard,
 {
 a!columnsLayout(
 columns: {
 a!forEach(
 items: local!options,
 expression: a!columnLayout(
 width: "2X",
 contents: {
 a!cardLayout(
 padding: "",
 borderColor: "ACCENT",
 contents: {
 a!richTextDisplayField(
 labelPosition: "COLLAPSED",
 value: {
 a!richTextItem(
 text: fv!item.name,
 color: "ACCENT",
 size: "MEDIUM",
 style: ""
 ),
 char(32)
 },
 align: "CENTER"
 )
 },
 link: a!startProcessLink(),
 height: "",
 shape: ""
 )
 }
 )
 ),
 a!columnLayout(
 width: "10X",
 contents: {
 a!buttonArrayLayout(
 align: "START",
 buttons: a!buttonWidget(label: "House")
 )
 }
 ),
 a!columnLayout()
 }
 )
 }
 )
}

Button Style Card Layout

Top Replies