Free cookie consent management tool by TermsFeed Card Layout Component (a!cardLayout)
Card Layout Component

Function

a!cardLayout( contents, link, height, style, showBorder, showShadow, tooltip, showWhen, marginBelow, accessibilityText, padding, shape, marginAbove, decorativeBarPosition, decorativeBarColor )

Displays any arrangement of layouts and components within a card on an interface. Can be styled or linked.

See also:

Parameters

Name Keyword Types Description

Contents

contents

Any Type

Components and layouts to display within the card.

Link

link

Any Type

Link to apply to the card. Create a link with a!documentDownloadLink(), a!dynamicLink(), a!newsEntryLink(), a!processTaskLink(), a!recordLink(), a!reportLink(), a!safeLink(), a!startProcessLink(), a!submitLink(), a!userRecordLink(), or a!authorizationLink().

Height

height

Text

Determines the card height. Valid values: "EXTRA_SHORT", "SHORT", "SHORT_PLUS", "MEDIUM", "MEDIUM_PLUS", "TALL", "TALL_PLUS", "EXTRA_TALL", "AUTO"(default).

Style

style

Text

Determines the card background color. Valid values: Any valid hex color or "NONE" (default), "STANDARD", "ACCENT", "SUCCESS", "INFO", "WARN", "ERROR", "CHARCOAL_SCHEME", "NAVY_SCHEME", "PLUM_SCHEME".

Show Border

showBorder

Boolean

Determines whether the layout has an outer border. Default: true.

Show Shadow

showShadow

Boolean

Determines whether the layout has an outer shadow. Default: false.

Tooltip

tooltip

Text

Text to display on mouseover.

Visibility

showWhen

Boolean

Determines whether the layout is displayed on the interface. When set to false, the layout is hidden and is not evaluated. Default: true.

Margin Below

marginBelow

Text

Determines how much space is added below the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".

Accessibility Text

accessibilityText

Text

Additional text to be announced by screen readers. Used only for accessibility; produces no visible change.

Padding

padding

Text

Determines the space between the card edges and its contents. Valid values: "NONE", "EVEN_LESS", "LESS" (default), "STANDARD", "MORE", "EVEN_MORE".

Shape

shape

Text

Determines the card shape. Valid values: "SQUARED" (default), "SEMI_ROUNDED", "ROUNDED".

Margin Above

marginAbove

Text

Determines how much space is added above the layout. Valid values: "NONE" (default), "EVEN_LESS", "LESS", "STANDARD", "MORE", "EVEN_MORE".

Decorative Bar Position

decorativeBarPosition

Text

Determines where the decorative bar displays. Valid values: "TOP", "BOTTOM", "START", "END", "NONE" (default).

Decorative Bar Color

decorativeBarColor

Text

Determines the decorative bar color. Valid values: Any valid hex color or "ACCENT" (default), "POSITIVE", "WARN", "NEGATIVE".

Usage considerations

Using the decorativeBarPosition and decorativeBarColor parameters

  • The decorativeBarColor is ignored unless the decorativeBarPosition is set.
  • To create a consistent and orderly UI, use the same decorativeBarPosition for all cards on an interface.

Using the style parameter with color schemes and header content layouts

  • If you're using a predefined or custom color scheme for your interface, use the card layout's style parameter to select matching or complimentary card colors.

Examples

Copy and paste an example into an Appian Expression Editor to experiment with it.

Card with icon and rich text

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
a!cardLayout(
  style: "STANDARD",
  height: "AUTO",
  marginbelow: "STANDARD",
  contents: a!richTextDisplayField(
    value: {
      a!richTextIcon(
        icon: "calendar",
        color: "ACCENT",
        size: "LARGE"
      ),
      char(10),
      a!richTextItem(
        text: {
          "Time"
        },
        size: "LARGE"
      ),
      char(10),
      a!richTextItem(
        text: {"Timesheets, PTO"},
        style: "EMPHASIS"
      )
    },
    align: "CENTER"
  )
)

Displays the following:

screenshot of a card containing a calendar icon and text that reads "Time" with "Timesheets, PTO" underneath.

Header content layout with rounded cards

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
a!headerContentLayout(
    header: {
      a!cardLayout(
        contents: {
          a!richTextDisplayField(
            labelPosition: "COLLAPSED",
            value: {
              a!richTextItem(
                text: {
                  "Campus Events - Spring Semester 2021"
                },
                color: "#efefef",
                size: "LARGE"
              )
            }
          )
        },
        height: "AUTO",
        style: "#666666",
        marginBelow: "NONE",
        showBorder: false
      )
    },
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      char(10),
                      a!richTextIcon(
                        icon: "building-o",
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "Campus Social"
                        },
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "On-Campus Housing Meet & Greet"
                        },
                        color: "SECONDARY"
                      )
                    },
                    align: "CENTER"
                  )
                },
                height: "SHORT_PLUS",
                style: "NONE",
                shape: "ROUNDED",
                marginBelow: "STANDARD"
              ),
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      char(10),
                      a!richTextIcon(
                        icon: "sun-o",
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "Heritage Hike"
                        },
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "Hiking Club's Alumni Hike "
                        },
                        color: "SECONDARY"
                      )
                    },
                    align: "CENTER"
                  )
                },
                height: "SHORT_PLUS",
                style: "NONE",
                shape: "ROUNDED",
                marginBelow: "STANDARD"
              )
            },
            width: "NARROW_PLUS"
          ),
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      char(10),
                      a!richTextIcon(
                        icon: "graduation-cap",
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "Post-Grad Prep"
                        },
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {
                          "Q&A About Life After Graduation"
                        },
                        color: "SECONDARY"
                      )
                    },
                    align: "CENTER"
                  ) 
                },
                height: "SHORT_PLUS",
                style: "NONE",
                shape: "ROUNDED",
                marginBelow: "STANDARD"
              ),
              a!cardLayout(
                contents: {
                  a!richTextDisplayField(
                    value: {
                      char(10),
                      a!richTextIcon(
                        icon: "leaf",
                        color: "ACCENT",
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {"Green Clean"},
                        size: "LARGE"
                      ),
                      char(10),
                      a!richTextItem(
                        text: {"Campus Clean-Up with Green Club"},
                        color: "SECONDARY"
                      )
                    },
                    align: "CENTER"
                  )
                },
                height: "SHORT_PLUS",
                style: "NONE",
                shape: "ROUNDED",
                marginBelow: "STANDARD"
              )
            },
            width: "NARROW_PLUS"
          )
        }
      )
    },
    backgroundColor: "#d9d9d9"
  )

Displays the following:

screenshot of cards with rounded corners

Card with charcoal background

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
a!localvariables(
  local!salesLeaders: {
    a!map(rank: "1st", name: "Cindy Pratt", revenue: "$3.72M"),
    a!map(rank: "2nd", name: "Kyong-Ok Yi", revenue: "$2.94M"),
    a!map(rank: "3rd", name: "Linda Smith", revenue: "$2.51M")
  },
  a!headerContentLayout(
    header: {},
    contents: {
      a!columnsLayout(
        columns: {
          a!columnLayout(
            contents: {
              a!cardLayout(
                contents: {
                  a!sectionLayout(
                    contents: {
                      a!richTextDisplayField(
                        labelPosition: "COLLAPSED",
                        value: {
                          a!richTextItem(
                            text: upper("Sales Revenue Leaderboard"),
                            color: "STANDARD",
                            size: "MEDIUM",
                            style: "STRONG"
                          )
                        }
                      ),
                      /* Displays a row for each sales leader */
                      a!forEach(
                        items: local!salesLeaders,
                        expression: a!sideBySideLayout(
                          items: {
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.rank,
                                    color: "STANDARD",
                                    size: "MEDIUM",
                                    style: "STRONG"
                                  )
                                }
                              ),
                              width: "2X"
                            ),
                            a!sideBySideItem(
                              item: a!imageField(
                                labelPosition: "COLLAPSED",
                                images: a!userImage(),
                                size: "SMALL",
                                isThumbnail: false,
                                style: "AVATAR"
                              ),
                              width: "MINIMIZE"
                            ),
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.name,
                                    size: "MEDIUM",
                                    style: "STRONG"
                                  )
                                }
                              ),
                              width: "8X"
                            ),
                            a!sideBySideItem(
                              item: a!richTextDisplayField(
                                labelPosition: "COLLAPSED",
                                value: {
                                  a!richTextItem(
                                    text: fv!item.revenue,
                                    color: "STANDARD",
                                    size: "MEDIUM_PLUS"
                                  )
                                },
                                align: "RIGHT"
                              ),
                              width: "MINIMIZE"
                            )
                          },
                          alignvertical: "MIDDLE"
                        )
                      )
                    },
                    marginBelow: "NONE"
                  )
                },
                height: "AUTO",
                style: "CHARCOAL_SCHEME",
                padding: "STANDARD",
                showBorder: false
              )
            },
            width: "MEDIUM_PLUS"
          )
        }
      )
    },
    backgroundColor: "CHARCOAL_SCHEME"
  )
)

Displays the following:

screenshot of a card with a charcoal background

Card with decorative bar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
{
  a!columnsLayout(
    columns: {
      a!columnLayout(
        contents: {
          a!cardLayout(
            contents: {
              a!sideBySideLayout(
                items: {
                  a!sideBySideItem(
                    item: a!stampField(
                      labelPosition: "COLLAPSED",
                      icon: "database",
                      backgroundColor: "#1c4587",
                      contentColor: "#dde8fb",
                      size: "SMALL"
                    ),
                    width: "MINIMIZE"
                  ),
                  a!sideBySideItem(
                    item: a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: {
                            "Appian Records"
                          },
                          color: "#1c4587",
                          size: "MEDIUM",
                          style: {
                            "STRONG"
                          }
                        )
                      },
                      marginAbove: "STANDARD"
                    )
                  )
                },
                alignVertical: "MIDDLE"
              ),
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  "Use Appian Records to seamlessly access, manage, and reference your enterprise data throughout your application.",
                  char(10)
                }
              )
            },
            height: "AUTO",
            style: "NONE",
            shape: "ROUNDED",
            marginBelow: "STANDARD",
            decorativeBarPosition: "TOP",
            decorativeBarColor: "#1c4587"
          )
        },
        width: ""
      ),
      a!columnLayout(
        contents: {
          a!cardLayout(
            contents: {
              a!sideBySideLayout(
                items: {
                  a!sideBySideItem(
                    item: a!stampField(
                      labelPosition: "COLLAPSED",
                      icon: "robot",
                      backgroundColor: "#660000",
                      contentColor: "#f9dddd",
                      size: "SMALL"
                    ),
                    width: "MINIMIZE"
                  ),
                  a!sideBySideItem(
                    item: a!richTextDisplayField(
                      labelPosition: "COLLAPSED",
                      value: {
                        a!richTextItem(
                          text: {
                            "Appian RPA"
                          },
                          color: "#660000",
                          size: "MEDIUM",
                          style: {
                            "STRONG"
                          }
                        )
                      },
                      marginAbove: "STANDARD"
                    )
                  )
                },
                alignVertical: "MIDDLE"
              ),
              a!richTextDisplayField(
                labelPosition: "COLLAPSED",
                value: {
                  "Use our Robotic Process Automation (RPA) to automate  manual processes and free up your workforce to focus on tasks that require problem solving."
                }
              )
            },
            height: "AUTO",
            style: "NONE",
            shape: "ROUNDED",
            marginBelow: "STANDARD",
            decorativeBarPosition: "TOP",
            decorativeBarColor: "#660000"
          )
        }
      )
    }
  )
}

Displays the following:

screenshot of two cards with colored decorative bars

Feature compatibility

The table below lists this SAIL component's compatibility with various features in Appian.
Feature Compatibility Note
Portals Compatible
Offline Mobile Compatible
Custom Record Field Expressions Incompatible
Process Reports Incompatible

You cannot use this function to configure a process report.

Process Events Incompatible

You cannot use this function to configure a process event node, such as a start event or timer event.

The following patterns include usage of the Card Layout Component.

  • Alert Banner Patterns (Choice Components): The alert banners pattern is good for creating a visual cue of different types of alerts about information on a page.

  • Call to Action Pattern (Formatting): Use the call to action pattern as a landing page when your users have a single action to take.

  • Cards as Buttons Pattern (Choice Components, Formatting, Conditional Display): The cards as buttons pattern is a great way to prominently display a select few choices.

  • Cards as List Items Patterns (Choice Components, Images): Use the cards as list items pattern to create visually rich lists as an alternative to grids or feeds. This pattern uses a combination of cards and billboards to show lists of like items. You can easily modify the pattern to change the card content or the number of cards per row to fit your use case.

  • Comments Patterns (Comments, Looping): Use this pattern when displaying a chronological list of messages from different users, such as comments on a topic or notes on a case.

  • Document List (Documents): Use the document list items pattern to display a list of documents that can be searched and filtered. This pattern uses a combination of cards and rich text to show an easy to navigate list of documents of different types.

  • Dual Picklist Pattern (Choice Components, Cards, Checkboxes, Buttons): Use this pattern to view side-by-side lists and move items from one list to the other. The dual picklist is great for moving items from one state to another, like from active to inactive.

  • Event Timeline (Timeline, Events): Use the event timeline pattern to display a dated list of events and actions in chronological order. This pattern uses a combination of cards, rich text, and user images to show an easy to navigate list of dated events.

  • Inline Survey (Radio Buttons, Checkboxes, Buttons): Use this pattern to create a clean and easy to navigate survey.

  • KPI Patterns (Formatting): The Key Performance Indicator (KPI) patterns provide a common style and format for displaying important performance measures.

  • Leaderboard (Looping): Use the leaderboard pattern to show a selection of your data in an easy to read ranked display.

  • Milestone Bar Pattern (Looping): Use the milestone bar pattern to guide users through sequential steps to complete a task and show the user their progress as they move through the steps. This pattern can be used to either break up longer forms into more manageable sections or combine smaller forms into a more streamlined process.

  • Navigation Patterns (Conditional Display, Formatting, Navigation): Use the navigation patterns to help orient users and enable them to easily navigate pages and content.

  • Trend-Over-Time Report (Charts, Reports): This report provides an attractive, interactive design for exploring different series of data over time.

  • Year-Over-Year Report (Charts, Reports, Formatting): This is a feature-rich, interactive report for sales and profits by products over select periods of time.

  • Year-Over-Year Sales Growth (Records, Reports, Formatting): This pattern illustrates how to calculate year-over-year sales growth and display it in a KPI.

Open in Github Built: Fri, Feb 23, 2024 (09:12:49 PM)

Card Layout Component

FEEDBACK