Side By Side Item

SAIL Design System guidance available for Side by Side Layout When you want to split the available space evenly to create a visual balance in your design, use the side by side layout.

About the side by side item

Displays one or more components within a side by side layout.

Where to use the side by side item

Use a!sideBySideItem() in the items parameter of a!sideBySideLayout().

Supported components

The item parameter of a!sideBySideItem() supports a list of the following components:

• a!sideBySideLayout()
• Input components (except chat components such as the data fabric chatbot, documents chatbot, and records chatbot)
• Selection components
• Display components
• Action components
• Chart components
• Picker components

The item parameter of a!sideBySideItem() doesn't support the following components:

• Read-only (a!pagingGrid()) and editable (a!gridLayout()) grids
• a!eventHistoryListField()
• Browser components
• Layouts (except a!sideBySideLayout())

Parameters

a!sideBySideItem( item, width, showWhen )

Using the side by side item

The following sections cover important details about the side by side item.

Using the width parameter

The "MINIMIZE" width is appropriate for items with a fixed width, such as images or buttons. Use relative widths for items whose width is determined by the containing layout or user interaction, such as text inputs or dropdowns. For further explanation and examples, see UX Side by Side Guidance.

Examples

The following examples demonstrate the side by side item.

To experiment with examples, copy and paste the expression into an interface object.

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

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
35
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: "OUTLINE",
            color: "SECONDARY"
          )
        }
      )
    )
  }
)

Feature compatibility

Related recipes

The following recipes include usage of the Side By Side Item.

• Action Banner Pattern (Formatting, Buttons, Rich Text, Cards):

  Use the action banner pattern to display prominent messages that include interactive elements like links or buttons.

• Activity History Pattern (Formatting):

  The Activity History pattern provides a common style and format for displaying an organization's activity measures.

• Build a Wizard with Milestone Navigation (Conditional Display, Validation, Wizards):

  Create a wizard that divides a form into validated steps and uses the milestone component to display progress.

• Cards as Info Pattern (Cards, Formatting, Stamps):

  Use this pattern to display high level summaries of options with icons and descriptions. This pattern uses card layouts with stamp fields and rich text to create visually distinct information cards.

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

• Configure a Custom Search Box with Smart Search (Grids, Query Data, Records):

  Implement smart search in a custom search box for a read-only grid.

• Connect Document Viewer to an AI Chat Response:

  This pattern illustrates how to connect a!documentViewerField component to an AI chat response.

• Create a Custom Chat Interface:

  Build a custom chat interface by using the cardLayout component to give each message a distinct visual style.

• Document List Pattern (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.

• Duration Display (Rich Text, Events):

  Use the duration display pattern to show the amount of time in between events in a quick, easy-to-read way.

• Dynamic Inputs (Inputs, Dynamic Links):

  Use the dynamic inputs pattern to allow users to easily add or remove as many values as needed.

• Event Timelines (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 Stats Pattern (Formatting, Rich Text):

  Use this pattern to display data values with icons in a compact, horizontal layout. This pattern uses side by side layouts with rich text display components to create inline statistics.

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

• Limit the Number of Rows in a Grid That Can Be Selected (Validation, Grids, Records):

  Limit the number of rows that can be selected to an arbitrary number.

• Navigation Patterns (Conditional Display, Formatting, Navigation):

  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)
• Trend-Over-Time Report (Charts, Reports):

  This report provides an attractive, interactive design for exploring different series of data over time.

• Upload Multiple Documents and Edit Document Properties (Document Management, Records):

  Build a form that allows users to create a record and upload related documents. Users can edit the document name and add a document description before submitting the form.

• Upload and rename a file (Document Management, Records):

  Allow users to upload and rename a file.

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

Feedback