Side By Side Layout

Side By Side Layout

Function: a!sideBySideLayout()

Displays components alongside each other.

See also: Side By Side Item, Responsive Design

Parameters

Name Keyword Types Description

Items

items

Any Type

List of items that are displayed in the layout. Accepts a!sideBySideItem.

Vertical Alignment

alignVertical

Text

Determines vertical alignment of all content within the layout. Valid values are "TOP" (default), "MIDDLE", and "BOTTOM".

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.

Item Spacing

item spacing

Text

Determines the space between columns in the layout when they are not stacked. Valid values: "STANDARD" (default), "NONE", "DENSE", "SPARSE".

Margin Below

marginBelow

Text

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

Stack When

stackWhen

List of Text

Determines the window width at which column layouts stack vertically. List all widths where columns should stack. Valid Values: "PHONE" (default), "TABLET_PORTRAIT", "TABLET_LANDSCAPE","DESKTOP", "DESKTOP_WIDE", "NEVER".

Examples

Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.

Input fields with relative widths

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
a!sideBySideLayout(
  items: {
    a!sideBySideItem(
      width: "4X",
      item: a!textField(
        label: "First Name"
      )
    ),
    a!sideBySideItem(
      item: a!textField(
        label: "M.I."
      )
    ),
    a!sideBySideItem(
      width: "4X",
      item: a!textField(
        label: "Last Name"
      )
    )
  }
)

Displays the following:

Minimized width for icon and button

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
a!sideBySideLayout(
  alignVertical: "MIDDLE",
  spacing: "DENSE",
  items: {
    a!sideBySideItem(
      width: "MINIMIZE",
      item: a!richTextDisplayField(
        labelPosition: "COLLAPSED",
        value: a!richTextIcon(
          icon: "user",
          size: "LARGE"
        )
      )
    ),
    a!sideBySideItem(
      item: a!textField(
        labelPosition: "COLLAPSED"
      )
    ),
    a!sideBySideItem(
      width: "MINIMIZE",
      item: a!buttonArrayLayout(
        marginBelow: "NONE",
        buttons: {
          a!buttonWidget(
            label: "Check Availability",
            size: "SMALL",
            style: "SECONDARY"
          )
        }
      )
    )
  }
)

Displays the following:

The following patterns include usage of the Side By Side Layout.

  • Activity History Pattern (Formatting): The Activity History pattern provides a common style and format for displaying an organization's activity measures.

  • 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.

  • 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 Tags for Side-by-Side Layout Pattern (Formatting): This pattern shows the best practice for combining tags with standard-sized rich text, or plain text, using a side by side layout.

  • 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.

  • Milestone Stamp Pattern (Looping): Use the milestone stamp pattern to visually guide users through sequential steps to complete tasks and show users their progress as they move through the steps.

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

  • Refresh Data After Executing a Smart Service (Auto-Refresh, Smart Services):

  • Stamp Steps (Stamps): There are two similar stamp steps patterns. The stamp steps (icon) pattern is primarily icons and titles. It should be used for simple steps that don't require much information or instruction. The stamp steps (numbered) pattern is primarily text and should be used for steps that require context or explanation.

  • Timeline Patterns (Formatting): Use the timeline pattern to show progress through steps in a process or project. These patterns can be used to show progress in both completed and ongoing processes.

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

  • User List Pattern (Looping): The user list pattern retrieves all the users in a specified group and displays them in a single column.

  • 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.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page

FEEDBACK