core2-jvm (latest)
core2-jvm (latest)core-jvm
  • Home
  • Features
  • Spec
  • Guides
  • Sandbox
  • Step Studio
  • Step
    • Action
    • External
    • Help
    • Link Handler
    • Navigation
    • Persist Async
    • Polling
    • Refresh On Change
    • Schema On Change
    • Step Error
    • Suggestions
    • Summary
    • Toolbar
    • Upload
    • Validate Async
    • Schema
    • All Of Schema
    • Array Schema
    • Blob Schema
    • Boolean Schema
    • Const Schema
    • Integer Schema
    • Number Schema
    • Object Schema
    • One Of Schema
    • String Schema
    • Layout
    • Alert Layout
    • Box Layout
    • Button Layout
    • Columns Layout
    • Decision Layout
    • Divider Layout
    • Form Layout
    • Heading Layout
    • Image Layout
    • Instructions Layout
    • List Layout
    • Loading Indicator Layout
    • Markdown Layout
    • Media Layout
    • Modal Layout
    • Paragraph Layout
    • Progress Layout
    • Review Layout
    • Search Layout
    • Section Layout
    • Status List Layout
    • Tabs Layout
    • Upsell Layout
    • Behavior
    • Action Behavior
    • Copy Behavior
    • Dismiss Behavior
    • Link Behavior
    • Modal Behavior
    • Refresh Behavior
    • Subflow Behavior
    • Subflow
    • Dynamic Launch Config
    • Launch Config
    • Modal Presentation
    • Native Launch Config
    • Presentation
    • Push Presentation
    • Action Response Body
    • Error Response Body
    • Flow Response
    • Modal Response Body
    • No Op Response Body
    • Search Initial Layout Config
    • Search Initial Results Config
    • Search Initial State
    • Search Layout Response Body
    • Search Response
    • Search Response Body
    • Search Result
    • Search Results Response Body
    • Subflow Response Body
    • Additional Info
    • Align
    • Autocapitalization Type
    • Autocomplete Token
    • Context
    • Icon
    • Image
    • Inline Alert
    • Media
    • Native Capabilities
    • Request
    • Size
    • Supporting Values
    • Control
    • Tag

List Layout

Android - 8.101.0 iOS - 8.96 Web - 3.33.0

A list of read-only fields displaying information with optional images or icons for the user.

list {
    title = "Transactions"
    items {
        item {
            title = "Starbucks"
            description = "Coffee"
            supportingValues {
                value = "+100 GBP"
                subvalue = "Refund"
            }
            media = Media.Avatar.build {
                content { uri { uri = "urn:wise:icons:takeaway" } }
            }
        }
        item {
            title = "BBC"
            description = "TV License"
            supportingValues {
                value = "-5 GBP"
                subvalue = "Payment Success"
            }
            media = Media.Avatar.build {
                content {
                    uri {
                        uri = "urn:wise:icons:person"
                        badgeUri = "urn:wise:icons:bills"
                    }
                }
                accessibilityDescription = "An image of the BBC"
            }
        }
        item {
            title = "Pineapple Pizza Express"
            description = "Pizza"
            supportingValues {
                value = "-13 GBP"
                subvalue = "Transaction pending"
            }
            media = Media.Avatar.build {
                content { text { text = "PE" } }
            }
        }
    }
}

When to use

  • When each item represents an entity with meaning to the user.
  • When building experiences to manage/edit a list of entities, for example a list of saved bank cards.

When not to use

  • When each item represents a choice, rather than an existing entity, consider using a Decision Layout instead.
  • If the purpose of the list is to provide a summary of information which the user needs to check, consider using a Review Layout instead.

Properties

PropertyTypeRequiredDescription
analyticsIdStringNoAn optional identifier to be used in analytics tracking.
callToActionListLayout.CallToActionNoA titled call to action which can be performed by the user.
controlStringNoSpecify a particular control to use to represent the layout. If the control is unknown, it will be ignored.
itemsArray<ListLayout.Item>YesArray of items.
marginSizeNoThe vertical margin to apply after this component. Defaults to md.

tags

Array<String>

No

An optional list of identifiers used to configure renderers.

Android - 8.131.0 iOS - 8.125 Web - 4.33.0

titleStringNoThe user-facing title.
typeStringYesIt must be list.

Related Types

Item

A single entry in a List Layout.

Properties

PropertyTypeRequiredDescription

additionalInfo

AdditionalInfo

No

Additional information to be displayed to the user, with optional interactivity.

Android - 8.111.0 iOS - 8.119 Web - 4.25.0

analyticsId

String

No

An optional identifier to be used in analytics tracking.

Android - 8.118.0 iOS - 8.119 Web - 4.15.6

callToAction

ListLayout.CallToAction

No

A titled call to action which can be performed by the user.

Android - 8.131.0 iOS - 8.125 Web - 4.33.0

descriptionStringNoA user-facing description.
iconIconNoAn icon to represent the item.
imageImageNoAn image to represent the option.

inlineAlert

InlineAlert

No

An alert that will be displayed inline with the item.

Android - 8.111.0 iOS - 8.119 Web - 4.25.0

media

Media

No

A media object (avatar, icon, image) which the client can use to represent this item.

Android - 8.123.0 iOS - 8.119 Web - 4.25.0

subtitle

String

No

A user-facing subtitle.

⚠️ Deprecated - Please use 'description' instead

subvalue

String

No

A user-facing subvalue.

⚠️ Deprecated - Please use 'supportingValues' instead

supportingValues

SupportingValues

No

An object containing two strings representing two user-facing values. One being clearly more important than the other.

Android - 8.111.0 iOS - 8.119 Web - 4.25.0

tag

String

No

An optional identifier to be used in custom renderers.

Android - 8.101.0 iOS - 8.96 Web - 4.0.0

⚠️ Deprecated - Please use 'tags' instead

tags

Array<String>

No

An optional list of identifiers used to configure renderers.

Android - 8.131.0 iOS - 8.125 Web - 4.33.0

titleStringNoA user-facing title.

value

String

No

A user-facing value.

⚠️ Deprecated - Please use 'supportingValues' instead

Call To Action

The call to action configuration used by List Layout. For example, it could be used to provide an edit action.

Properties

PropertyTypeRequiredDescription
accessibilityDescriptionStringNoA description of the call to action to be used by screen readers.
behaviorBehaviorYesThe Behavior that should be performed when user interacts with call to action.

context

Context

No

The semantics of the call-to-action button. Defaults to neutral.

Android - 9.12.0 iOS - 9.12 Web - 5.7.0

titleStringYesA user-facing title.