Bixby Developer Center

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.

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,
  }
}