Bixby Developer Center

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

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.

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 on GitHub

Here is how selection-of appears on different devices:

MobileWatchTV (Expanded View)Fridge
selection-ofselection-ofselection-ofselection-of

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) {
layout-macro (shirt-image-card) {
param (shirt) {
expression (one)
}
}
}
}
}
}

View on GitHub

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

layout-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 on GitHub

Here is how it appears on mobile:

Shirt Input View, mobile

Here is how it appears on a watch:

Shirt Input View, mobile

Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

Child Keys

default-sort-order
optional
Provides a single sort option that overrides the natural-sort-order defined in the concept
footer[deprecated]
optional
This key is deprecated
hands-free-page-size[deprecated]
optional
This key is deprecated
has-details
optional
Determines if a particular item in a selection list displays a Details view
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