Bixby Developer Center

References

time-picker

optional

Generates a full-screen view of an interactive component that lets users select a time.

Each time range (HH and mm) are in a separate, vertically scrolling column.
You can also set the increments between the minutes.

Note

To use this component, you must have viv.time imported in your capsule.

Examples

// TimePicker2.view.bxb
// you can also specify a step size
input-view {
match: MyTime (this)
message {
template (Give me the time!)
}
render {
time-picker {
initial-value (now().time)
// allow time to be changed in 10-minute increments
step (10)
}
}
}

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

This is an example of a time structure you might use in your capsule. It explicitly uses role-of, so it is compatible with time-picker.

// MyTime.model.bxb
structure (MyTime) {
role-of (time.Time)
}

A SetPickup action model will take a required MyTime model as input and output a Pickup model:

//Pickup.model.bxb
structure (Pickup) {
property (myTime) {
type (MyTime)
min (Required) max (One)
}
property (myReason) {
type (MyReason)
min (Optional) max (One)
}
}

There are two ways to set the initial-value of a time picker: by using an Expression Language function or by initializing a secondary concept with default-init.

  • If you set initial-value with Expression Language, the value will always be set to the initial-value from the EL function. If the user sets a different value, navigates away from the picker, and then returns to it during the same conversation, the value will be reset to its initial-value.
  • If you set initial-value using default-init, you can use any JavaScript code, including REST API calls, to set the value. This is necessary for editing existing values, such as a reservation time. Also, with default-init, state will be preserved. If the user sets a different value, navigates away from the picker, and then returns to it during the same conversation, the picker will retain the value the user had previously set.
  • If you do not set initial-value, it will default to the current time.

Setting initial-value with EL

The following SetPickup action model requires a MyTime structure to create a Pickup structure:

// SetPickup.model.bxb
action (SetPickup) {
type (Search)
collect {
input (time) {
type (MyTime)
min (Required) max (One)
}
}
output (Pickup)
}

The following view file generates a time picker, so that users can set a value for SetPickupTime. It includes an initial-value of the current time; as this is the default, this could be left out of the example.

// TimePicker.view.bxb
input-view {
match: MyTime (this)
message {
template (Give me the time!)
}
render {
time-picker {
initial-value (now().time)
// if "step" is included, it specifies the per-minute increment
// allowable for changes: this specifies 5-minute increments
step (5)
}
}
}

Setting initial-value with default-init

This method of setting initial-value is slightly more complicated, but it preserves state.

// TimePicker.view.bxb
input-view {
match {
MyTime (this) {
to-input: SetPickup
}
}
message {
template (Select a date)
}
render {
time-picker {
initial-value (this)
step (5)
}
}
}

The SetPickup action is similar to the previous one, but adds a default-init with an InitializeTime goal:

// SetPickup.model.bxb
action (SetPickup) {
type (Search)
collect {
input (time) {
type (MyTime)
min (Required) max (One)
default-init {
intent {
goal {
InitializeTime
}
}
}
}
}
output (Pickup)
}

The InitializeTime action has a JavaScript implementation that does the actual work of initializing the time:

// InitializeTime.model.bxb
action (InitializeTime) {
type (Search)
output (MyTime)
}

// endpoints.bxb
endpoints {
action-endpoints {
action-endpoint (InitializeTime) {
local-endpoint (InitializeTime.js::initializeTime)
}
}
}
// InitializeTime.js

export function initializeTime() {
// return a time one hour from now
const result = new Date()
result.setTime(result.getTime() + 60 * 60 * 1000)
return result
}

Child Keys

initial-value
optional
The initial value to show the user in the time-picker
step
optional
Minute intervals that users can choose between
submit-button
optional
Enables you to customize the text of the submit button for certain components
type
optional
Changes the default from BaseTime to chosen type in the Time Picker Component The type must be a sub-type of BaseTime