Button Style Card Layout

RE: Button Style Card Layout

Konduru Chaitanya — Fri, 15 Nov 2024 07:04:24 GMT

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

RE: Button Style Card Layout

kl0001 — Thu, 14 Nov 2024 23:37:59 GMT

Do you happen to have a good example of the "card as a button" pattern? I've looked but nothing seems to resemble the a!buttonWidget and I need to have a!startProcessLink and a regular button side by side

RE: Button Style Card Layout

Mike Schmitt — Mon, 13 May 2024 17:34:18 GMT

Gotcha. Start Process Link is one of the things that requires the "card as button" pattern override to be used. Unfortunately that means you will need to work within the constraints of the Card Layout component. I would suggest that you can set its background color, that might simply need to be enough. Watch in future iterations of appian as they are likely to add new tweaks and/or enhance current capabilities, but I wouldn't let your current design depend on possible future additions that may or may not happen.

RE: Button Style Card Layout

spykid — Mon, 13 May 2024 16:54:02 GMT

Mike Schmitt

Each screen is created with a separate Process Model.
I want to return to the list screen after clicking the back button.
The list screen is not displayed when calling from site object.
create back button with card layout and set it to a!startprocesslink, a list screen will be displayed when call it from site object.

RE: Button Style Card Layout

Mike Schmitt — Mon, 13 May 2024 14:11:59 GMT

[quote userid="93495" url="~/discussions/f/general/34959/button-style-card-layout/135223"]How can I create the button design I want without using card layout?[/quote]

a!buttonWidget()

This is the standard button. It's usable in ALL but a VERY FEW use cases. What exactly is your situation?

RE: Button Style Card Layout

Stefan Helzle — Mon, 13 May 2024 11:32:06 GMT

I do not fully understand your question. Is a buttonWidget not an option for you?

RE: Button Style Card Layout

Richard Michaelis — Mon, 13 May 2024 10:34:13 GMT

special situation:
docs.appian.com/.../ux-record-actions.html

RE: Button Style Card Layout

spykid — Mon, 13 May 2024 10:33:50 GMT

Thanks

RE: Button Style Card Layout

Richard Michaelis — Mon, 13 May 2024 10:33:22 GMT

i suggest to read the following 4 articles from the documentation
https://docs.appian.com/suite/help/24.1/Button_Layout.html
https://docs.appian.com/suite/help/24.1/Button_Array_Layout.html
https://docs.appian.com/suite/help/24.1/Button_Component.html
https://docs.appian.com/suite/help/24.1/sail/ux-buttons.html

RE: Button Style Card Layout

Richard Michaelis — Mon, 13 May 2024 10:31:13 GMT

Edit: sorry i misread - answer incoming

RE: Button Style Card Layout

spykid — Mon, 13 May 2024 10:06:57 GMT

How can I create the button design I want without using card layout?

RE: Button Style Card Layout

spykid — Mon, 13 May 2024 10:06:32 GMT

Stefan Helzle

How can I create the button design I want without using card layout?

RE: Button Style Card Layout

Richard Michaelis — Mon, 13 May 2024 06:58:33 GMT

stefan said it already. Thats not possible

you can see the parameter you can set in the appian documentation
e.g.
https://docs.appian.com/suite/help/24.1/card_layout.html

the only parameter who influences the border are:
"showBorder" : whether the layout has an outer border
"shape " Determines the card shape

RE: Button Style Card Layout

Stefan Helzle — Mon, 13 May 2024 06:44:58 GMT

Card layouts do not support adjusting the border color.