Function: a!cardLayout()
Displays any arrangement of layouts and components within a card on an interface. Can be styled or linked.
Name | Keyword | Types | Description |
---|---|---|---|
Contents |
|
Any Type |
Components and layouts to display within the card. |
Link |
|
Any Type |
Link to apply to the card. Create a link with |
Height |
|
Text |
Determines the card height. Valid values: |
Style |
|
Text |
Determines the card background color. Valid values: Any valid hex color or |
Show Border |
|
Boolean |
Determines whether the layout has an outer border. Default: true. |
Show Shadow |
|
Boolean |
Determines whether the layout has an outer shadow. Default: false. |
Tooltip |
|
Text |
Text to display on mouseover. |
Visibility |
|
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 |
|
Text |
Determines how much space is added below the layout. Valid values: |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Padding |
|
Text |
Determines the space between the card edges and its contents. Valid values: |
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
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:
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 Choices (Cards, Rich Text, Dynamic Links): Use this pattern to display sets of choices that are quick and easy to navigate.
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.
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): 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.