Bixby Developer Center

Guides
References

image-picker

optionalvalue required

Generates a full-screen view of an interactive component that lets users select images. If only a single image can be selected, the selected image is then shown in Lightbox mode.

Note

Customizable text for the submit-button is only available for multi-selection of images in image-picker.

Examples

To select a single image:

input-view {  
match: Image (this) {
to-input: SelectImage //This to-input will depend on which action you've implemented
}

message {
template (Pick an image!)
}

render {
image-picker (this) {
size (Small)
}
}
}

View on GitHub

To select multiple images:

input-view {  
match: Image (this) {
to-input: MultiSelectImage //This to-input will depend on which action you've implemented
}

message {
template (Pick an image!)
}

render {
image-picker (this) {
size (Small)
}
}
}

View on GitHub

Here is how image-picker appears on different devices:

MobileWatchTV (Expanded View)Fridge
image-pickerimage-pickerimage-pickerimage-picker
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.

Usage

Example 1

You can have an Image structure in your capsule like the following:

// Image.model.bxb
structure (Image) {
role-of (viv.core.BaseImage)
}

For more information on images, see the viv.core library capsule documentation.

You might have a corresponding action model to collect images.

To collect a single image, you might use something like the following SelectImage action model:

// SelectImage.model.bxb
action (SelectImage) {
type (Search)
collect {
input (image) {
type (Image)
min (Required) max (One)

default-init {
intent {
goal: Image
value: Image {
url: viv.core.Url("http://via.placeholder.com/350x150")
}
value: Image {
url: viv.core.Url("http://via.placeholder.com/250x150")
}
value: Image {
url: viv.core.Url("http://via.placeholder.com/150x150")
}
}
}
}
}
output (Base)
}

To collect multiple images, you might use the following MultiSelectImagePicker action model:

// MultiSelectImagePicker.model.bxb
// Maximum selection is 2.
action (MultiSelectImagePickerAction) {
type (Search)
collect {
input (images) {
type (Image)
min (Required) max (Many)
default-init {
intent {
goal: FindImages
}
}
validate {
if (size(images) > 2) {
prompt {
candidates (images)
}
}
}
}
}
output (Base)
}

You could create an Image Picker view so users can select which images they need. For example, use this ImagePicker.view.bxb file for the SelectImage action:

// ImagePicker.view.bxb
// For single selection
input-view {
match: Image (this) {
to-input: SelectImage //This to-input will depend on which action you've implemented
}

message {
template (Pick an image!)
}

render {
image-picker (this) {
size (Small)
}
}
}

Child Keys

image-background-color
optional
Determines the background color of an image
size
optional
Determines how many columns of images are displayed on screen
submit-button
optional
Enables you to customize the text of the submit button for certain components
title
optional
Title of image