Bixby Developer Center

Generates a full screen view of an interactive component that lets users browse content from a specified data range.

As users provide more information in the Search field, Bixby further filters and displays the results with each item in a cell-card. A common use for autocomplete is selecting contacts to send messages, share content, or choose points of interest for pickup or delivery.

Examples

input-view {
  match {
    Person (this) {
      to-input: SelectPersonAutocomplete
    }
  }

  message ("Search for people using autocomplete:")

  render {
    auto-complete {
      type (Person)
      no-result-text ("No results")
      placeholder ("Search for people")
      source {
        collect-with (query) {
          intent {
            goal {
              FindPersons
            }
            value {
              SearchTerm$expr(query)
            }
          }
        }
        label ("Search results")
        where-each (person) {
          display {
            primary-text {
              template ("#{value (person.firstName)} #{value (person.lastName)}")
            }
            secondary-text {
              template ("#{value (person.gender)}")
            }
          }
          on-select {
            intent {
              goal {
                Person
              }
              value {
                viv.core.FormElement(person)
              }
            }
          }
        }
      }
      default-source {
        collect {
          intent {
            goal {
              FindPersons
            }
          }
        }
        where-each (person) {
          display {
            primary-text {
              template ("#{value (person.firstName)} #{value (person.lastName)}")
            }
            secondary-text {
              template ("#{value (person.gender)}")
            }
          }
          on-select {
            intent {
              goal {
                Person
              }
              value {
                viv.core.FormElement(person)
              }
            }
          }
        }
      }
    }
  }
}

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

Consider the following Thing structure:

// Thing.model.bxb
structure (Thing) {
  property (primitive) {
    type (MyPrimitive)
    min (Required) max (One)
  }
}

You might have a corresponding FindThings action model, which returns a Thing that you're looking for:

// FindThings.model.bxb
action (FindThings) {
  type (Search)
  collect {
    input (query) {
      type (Query)
      min (Required) max (One)
    }
  }
  output (Thing)
}

Additionally, you might need a FindDefaultThings action model like the following:

// FindDefaultThings.model.bxb
action (FindDefaultThings) {
  type (Search)
  output (Thing)
}

From this, you can create the following autocomplete view file, which displays information on the Thing concept:

// autocomplete.view.bxb
input-view {
  match: Thing (this)

  message {
    template (Give me a thing!)
  }

  render {
    auto-complete {
      type (Thing)
      no-result-text { template ("Got nothing") }
      placeholder { template ("this is just a placeholder") }

      // you can define a default source that will be called when no text has been entered into the search field of the autocomplete component - if not defined, your sources will be called with an empty string
      default-source {
        collect {
          // this will call your "FindDefaultThings" action
          intent {
            goal: FindDefaultThings
          }
        }
        label { template ("default things") }
        where-each (thing) {
          display {
            primary-text { template ("primary text: #{value(thing.primitive)}") }
            secondary-text { template ("secondary text: #{value(thing.primitive)}") }
          }
          on-select {
            intent {
              goal: Thing
              value: viv.core.FormElement(thing)
            }
          }
        }
      }

      // you can define multiple sources, each calling a different action
      source {
        collect-with (query) {
          // this will call your "FindThings" action, passing the text entered by the user in the search field of the autocomplete component into the query field
          intent {
            goal: FindThings
            value: test.viewTest.Query$expr(query)
          }
        }
        label { template ("what I found") }
        where-each (thing) {
          display {
            primary-text { template ("primary text: #{value(thing.primitive)}") }
            secondary-text { template ("secondary text: #{value(thing.primitive)}") }
          }
          on-select {
            intent {
              goal: Thing
              value: viv.core.FormElement(thing)
            }
          }
        }
      }
    }
  }
}

If an item from the from the auto-complete list is selected, that selected item's information is passed to the system as an input.