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.
To use this component, you must have viv.time
imported in your capsule.
// 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)
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
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
.
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
.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.initial-value
, it will default to the current time.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)
}
}
}
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
}
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 |