Bixby Developer Center

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.

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.