Bixby Developer Center

References

duration-picker

optional

Generates a full-screen view of an interactive component that lets users select a duration of time. The duration input must be of type or subtype viv.core.BasePeriod.

Note

In order to use this component, you must have viv.time imported in your capsule.

Example

input-view {
match {
MyDuration (duration)
}

message ("How long of a duration?")

render {
duration-picker {
initial-value("#{durationBetween(addDuration(now(), 'PT1H'), now())}")
type (MyDuration)
}
}
}

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 duration structure you might use in your capsule. It explicitly uses role-of, so it is compatible with duration-picker.

// MyDuration.model.bxb
structure (MyDuration) {
role-of (viv.core.BasePeriod)
}

A CreateTimer action will take a required MyDuration model and two optional properties as inputs and output a Timer model:

structure (Timer) {
property (myDuration) {
type (MyDuration)
min (Required) max (One)
}
property (myTimerName) {
type (TimerName)
min (Optional) max (One)
}
property (myIntervalCount) {
type (IntervalCount)
min (Optional) max (One)
}
}

There are two ways to set the initial-value of a duration picker: Expression Language and 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 reservation dates. 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.

Setting initial-value with EL

The following CreateTimer action model requires a MyDuration structure (as well as optionally collecting a timer name and an interval count) to create a Timer structure:

// CreateTimer.model.bxb
action (CreateTimer) {
type (Search)
collect {
input (newDuration) {
type (MyDuration)
min (Required)
max (One)
}
input (newTimerName) {
type (TimerName)
min (Optional)
max (One)
}
input (newIntervalCount) {
type (IntervalCount)
min (Optional)
max (One)
}
}
output (Timer)
}

This view with a duration picker sets its initial-value using Expression Language:

// SelectDuration.view.bxb
input-view {
match: MyDuration (this)
message {
template (Select a duration)
}
render {
duration-picker {
initial-value("#{durationBetween(addDuration(now(), 'PT2H'), now())}")
}
}
}

The value will always be two hours from the current time every time this duration picker is displayed.

Setting initial-value with default-init

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

// SelectDuration.view.bxb
input-view {
match {
MyDuration (this) {
to-input: CreateTimer
}
}
message {
template (Select a duration)
}
render {
duration-picker {
initial-value (this)
}
}
}

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

// CreateTimer.model.bxb
action (CreateTimer) {
type (Search)
collect {
input (newDuration) {
type (MyDuration)
min (Required)
max (One)
default-init {
intent {
goal {
InitializeDuration
}
}
}
}
input (newTimerName) {
type (TimerName)
min (Optional)
max (One)
}
input (newIntervalCount) {
type (IntervalCount)
min (Optional)
max (One)
}
}
output (Timer)
}

The InitializeDuration action has a JavaScript implementation that does the actual work of initializing the duration:

// InitializeDuration.model.bxb
action (InitializeDuration) {
type (Search)
output (MyDuration)
}

// endpoints.bxb
endpoints {
action-endpoints {
action-endpoint (InitializeDuration) {
local-endpoint (InitializeDuration.js::initializeDuration)
}
}
}
export function createDuration(input) {
const { myDuration, $vivContext } = input
return {
myDuration: myDuration,
}
}

export function initializeDuration() {
return {
periodHours: 2,
periodMinutes: 0,
periodSeconds: 0,
}
}

Child Keys

initial-value
optional
The initial value to show the user in the duration-picker
submit-button
optional
Enables you to customize the text of the submit button for certain components
type
optional
Changes the default from BasePeriod to chosen type in the Duration Picker Component