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.
Customizable text for the submit-button
is only available for multi-selection of images in image-picker
.
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)
}
}
}
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)
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
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)
}
}
}
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 |