# Vue Widgets

The Vue UPIL plugin comes with several built-in widgets. Some widgets are only available in form-mode based scripts (form mode and wizard mode).

# Date

The date widget allows users to select a date from a calendar. To use it in your script, use a TEMPLATE date entity. The user's input is saved as a Javascript Date object in the UPIL state.

DIALOG birthday
  TEMPLATE date
    {
      formText: "Birthdate",
      calendarType: "calendar"
    }
    "What is your birthday?"
    >>birthday
  /TEMPLATE
/DIALOG
RUN birthday

1
2
3
4
5
6
7
8
9
10
11

# Numeric mode

It also has a numeric mode, which uses selects instead of a calendar for inputting the date. There are several text overrides that can be used in numeric mode:

These labels will continue showing after selecting a value:

yearSelectLabel: The label for the year-select
monthSelectLabel: The label for the month-select
daySelectLabel: The label for the day-select

Placeholders disappear after a user selects a value:

yearSelectPlaceholder: The placeholder for the year-select
monthSelectPlaceholder: The placeholder for the month-select
daySelectPlaceholder: The placeholder for the day-select

unitYear: The unit that is shown to the right of the year-options inside of the select menu
unitMonth: The unit that is shown to the right of the month-options inside of the select menu
unitDay: The unit that is shown to the right of the day-options inside of the select menu
unitSeparator: A seperator to be displayed between the year, month, and day select menus

DIALOG birthday
  TEMPLATE date
    {
      formText: "Birthdate",
      calendarType: "numeric"
    }
    "What is your birthday?"
    >>birthday
  /TEMPLATE
/DIALOG
RUN birthday

1
2
3
4
5
6
7
8
9
10
11

# Date-time

The date-time widget allows users to select a date from a calendar, and a time on that date. To use it in your script, use a TEMPLATE date-time entity.

DIALOG birthday
  TEMPLATE date-time
    {
      formText: "Birthday party"
    }
    "When is your birthday party?"
    >>birthday
  /TEMPLATE
/DIALOG
RUN birthday

1
2
3
4
5
6
7
8
9
10

# Time-input

The time-input widget allows users to input a time. To use it in your script, use a TEMPLATE time-input entity.

The user's input is saved as an object with signature {hours: Number, minutes: Number} in the UPIL state. There are several label overrides that can be used as well:

hoursSelectLabel: The label on the hours-dropdown select
minutesSelectlabel: The label on the minutes-dropdown select
unitHour: A unit that shows to the right of each hour in the select-menu
unitMinute: A unit that shows to the right of each minute in the select-menu
defaultNow: A boolean that defaults the widget's value to the current time

Additionally, timeInputMin and timeInputMax can be passed in to set inclusive minimum and maximum times that users can choose from. These expect an object with the same signature that is saved by the time-input widget. This way the input of one time-input widget can be the min or max time used by another one.

DIALOG meetingTime
    TEMPLATE time-input
    {
      formText: "Meetings start time",
      timeInputMax: meetingsEnd,
      i18n: {
        ja: {
          formText: "ミーティング時間の開始",
          text: "ミーティング時間はいつから始まる？",
          hoursSelectLabel: "何時",
          unitHour: "時",
          minutesSelectlabel: "何分",
          unitMinute: "分"
        }
      }
    }
    "When do your meetings start?"
    >>meetingsStart
    /TEMPLATE
    TEMPLATE time-input
    {
      formText: "Meetings end time",
      timeInputMin: meetingsStart,
      i18n: {
        ja: {
          formText: "ミーティング時間のお終い",
          text: "ミーティング時間はいつまで続く？",
          hoursSelectLabel: "時間",
          unitHour: "時",
          minutesSelectlabel: "分",
          unitMinute: "分"
        }
      }
    }
    "When do your meetings end?"
    >>meetingsEnd
    /TEMPLATE
    TEMPLATE 
    {
      i18n: {
        ja: {
          text: "ミーティング時間が${meetingsStart}から${meetingsEnd}まではけっこう長いんでしょう～"
        }
      }
    }
    "From ${meetingsStart} to ${meetingsEnd} is a pretty long time don't you think?" 
    /TEMPLATE
  /DIALOG
  RUN meetingTime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

DIALOG start
    TEMPLATE time-input
    {
      formText: "Meetings start time",
      defaultNow: true
    }
    "When do you want to start?"
    >>startTime
    /TEMPLATE
  /DIALOG
  RUN start

1
2
3
4
5
6
7
8
9
10
11

# Range

The range widget lets users choose a number between min and max values that the scriptwriter chooses. The scriptwriter can also add an optional default value, an optional step value, and choose an optional unit label.

DIALOG minutesQuestion
  TEMPLATE range
    {
      formText: "Minutes",
      min: 10,
      max: 11,
      step: ".1",
      unit: "分"
    }
  "How long did it take?"
  >>minutes
  /TEMPLATE
/DIALOG
RUN minutesQuestion

1
2
3
4
5
6
7
8
9
10
11
12
13
14

With default value:

DIALOG minutesQuestion
  TEMPLATE range
    {
      formText: "Minutes",
      min: 1,
      max: 200,
      default: 100,
      unit: "分"
    }
  "How long did it take?"
  >>minutes
  /TEMPLATE
/DIALOG
RUN minutesQuestion

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Dynamic-list

The dynamic-list widget lets users enter items into a list. The variable is stored as an array in the UpilInstance. The scriptwriter can also pass an optional placeholder label.

DIALOG jobsSearch
  TEMPLATE dynamic-list
  {
    formText: "Job Openings",
    i18n: {
      ja: {
        formText: "募集中の職種",
        text: "今回募集する職種を教えてください。",
        placeholder: "カンマで区切ると選択肢が出来上がります"
      }
    }
  }
  "Please list your available job types"
  >>jobTypes
  /TEMPLATE
  TEMPLATE 
  {
    i18n: {
      ja: {
        text: "${jobTypes}を見つけたらいいね！"
      }
    }
  }
  "I hope you find success in your search for ${jobTypes}!"
  /TEMPLATE
/DIALOG
RUN jobsSearch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

← Vue Application development