Bixby Developer Center

Guides
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 on GitHub

Here is how duration-picker appears on different devices:

MobileWatchTV (Expanded View)Fridge
duration-pickerduration-pickerduration-pickerduration-picker
Note

The look and feel of this Views component might differ between devices, specifically with respect to spacing. Mobile, tablet, and fridge devices are similar in design, for example, but have varying resolution and spacing specifications.

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:

action (InitializeDuration) {
type (Search)
output (MyDuration)
}
function createDuration(myDuration) {
return {
myDuration: myDuration
}
}

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

module.exports = {
createDuration: createDuration,
initializeDuration: initializeDuration
}

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