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

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

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