Bixby Developer Center

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.

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 master 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 master 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)
    }
  }
}