Bixby Developer Center

References

selection-of

optionalvalue required

Generates a full-screen Selection List component that enables users to select one or more items in a given list using the selection-of key in input-view. This is also known as the value picker in the Design Guides. Only card components can be in a selection-of list.

Note

Customizable text for the submit-button is only available for multi-selection of items in selection-of. No button is displayed for users when selecting a single value.

If you want to display the details of an item after a user taps it, make sure to define the on-click key with a view-for that maps it to the details layout. The user can then choose to select that item on the details page by tapping on the Select button.

If you allow multi-selection and set an on-click on cards within the list, the on-click definition will be ignored.

Watch devices do not support conversation drivers in an input view with selection-of.

Examples

    selection-of (this) {
where-each (one) {
// you can use conditional logic to control how candidates are displayed, using either a standard layout with a match pattern, or a layout macro

cell-card {

slot2 {
content {
primary {
template ("#{value (one.firstName)} #{value (one.lastName)}")
}
secondary {
template ("#{value (one.gender)}")
}
}
}
}

}
}

View 078b450 on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Here is the input-view of the example.shirt sample capsule, so the user can select a shirt:

input-view {
match: Shirt (this)

message (Which shirt?)

render {
selection-of (this) {
where-each (one) {
macro (shirt-image-card) {
param (shirt) {
expression (one)
}
}
}
}
}
}

View master on GitHub

This is the macro definition of shirt-image-card:

macro-def (shirt-image-card) {
params {
param (shirt) {
type (Shirt)
min (Required) max (One)
}
}
content {
image-card {
aspect-ratio (4:3)
image-url ("[#{value(shirt.images[0].url)}]")
title-area {
halign (Start)
slot1 {
text {
value ("#{value(shirt.title)}")
style (Title_M)
}
}
slot2 {
single-line {
text {
value ("#{value(shirt.brand)}")
style (Title_XS)
}
}
}
slot3 {
single-line {
text {
value ("#{value(shirt.price)}")
style (Detail_L)
}
}
}
}
}
}
}

View master on GitHub

You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.

Child Keys

default-sort-order
optional
Provides a single sort option that overrides the natural-sort-order defined in the concept
has-details
optional
This key is deprecated
header
optional
Header container for Bixby Views
highlights
optional
Highlight specific results on the first page of a rendered list in result-view and input-view of a selection list
navigation-mode
optional
Navigation mode defines the list navigation experience for the user
select-button-text
optional
Selection button text
submit-button
optional
Enables you to customize the text of the submit button for certain components
where-each
optional
Determines what displays in the view for users per the specified binding variable
where-each-page[deprecated]
optional
This key is deprecated