# Configuration Description of Dialog Components - [Overview](#section177145394383) - [Enum Dialog](#section7797619153917) - [Radio Dialog](#section149204321448) - [Info Dialog](#section22496134515) - [Time Picker](#section13596193716458) - [Date Picker](#section11825192184617) - [Date and Time Picker](#section69732312462) - [Text Picker](#section1179325213461) - [Multi-column Picker](#section10946422184712) ## Overview **Dialog** components are classified into the following types: **Enum**, **Radio**, **Info**, and **Picker** \(time picker, date picker, date and time picker, text picker, and multi-column picker\). ## Enum Dialog The **Dialog** component of the **Enum** type displays one to eight areas for user selection. Each area is clickable. After an area is clicked, a new image \(or the same image with a different color\) is displayed, indicating a status change. Only one area can be activated at a time. The following figure shows an example. ![](figures/enum-dialog.png) The code for the example is as follows: ``` { "name": "Drinkings", "id": "drinkKind", "path": "drinkKind", "dialogType": "ENUM", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "Next", "type": "submit" } ], "command": [ { "name": "Grain", "icon": { "value": { "defaultTarget": "/ic_grains_nor.png", "target": "/ic_grains_on.png" }, "valueNight": { "defaultTarget": "/ic_grains_nor.png", "target": "/ic_grains_on.png" } }, "dialogList": ["duration", "temperature", "capacity", "speed"], "value": 1 }, { "name": "Soy milk", "icon": { "value": { "defaultTarget": "/ic_soy_milk_nor.png", "target": "/ic_soy_milk_on.png" }, "valueNight": { "defaultTarget": "/ic_soy_milk_nor.png", "target": "/ic_soy_milk_on.png" } }, "dialogList": ["duration", "temperature", "capacity", "speed"], "value": 2 } ] } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Drinkings.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: drinkKind.
path	Yes	String (1-128)	Dynamic content condition.	Example: drinkKind.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
command	Yes	Command[]	Array of commands available for the dialog box.	-

ControlItems

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of a control item.	Example: Cancel.
type	Yes	String (1-128)	Type of the control item.	The control item type can be submit or cancel.

Command

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of a command.	Example: Grain.
icon.value.defaultTarget	Yes	String (1-128)	URL of the default icon.	Example: /ic_soymilk_nor.png.
icon.value.target	Yes	String (1-128)	URL of the icon when being clicked.	Example: /ic_soymilk_on.png.
icon.valueNight.defaultTarget	Yes	String (1-128)	URL of the default icon in dark mode.	Example: /ic_soymilk_nor.png.
icon.valueNight.target	Yes	String (1-128)	URL of the icon when being clicked in dark mode.	Example: /ic_soymilk_on.png.
dialogList	No	Array	Dialog box list to play.	-
value	Yes	int	Property value in the command.	For example, the value 1 indicates that the first button is clicked.

## Radio Dialog The **Dialog** component of the **Radio** type provides a dialog box with radio buttons for user selection. The following uses the duration setting as an example. The following figure shows an example. ![](figures/radio-dialog.png) The code for the example is as follows: ``` { "name": "Duration", "id": "drinkTime1", "path": "drinkTime1", "dialogType": "RADIO", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "Next", "type": "submit" } ], "range": ["1 min", "3 min", "5 min", "10 min"], "value": [1, 3, 5, 10] } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Duration.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: duration.
path	Yes	String (1-128)	Dynamic content condition.	Example: duration.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
range	Yes	Array	Array of options for selection.	Example: ["1 min", "3 min", "5 min", "10 min"].
value	Yes	Array	Array of the values corresponding to the options.	Example: [1, 3, 5, 10].

## Info Dialog The **Dialog** component of the **Info** type is used to display an image and text. The following figure shows an example. ![](figures/info-dialog.png) The code for the example is as follows: ``` { "name": "Hand grinding coffee", "id": "handGrindingCoffee", "dialogType": "INFO", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "OK", "type": "submit" } ], "icon": "/ic_grand_coffee.png", "headline": "Tips", "desc": "Put the coffee powder in the dry-grinding cup into the coffee filter, and then touch Start to pour coffee." } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Hand grinding coffee.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: handGrindingCoffee.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
icon	Yes	String (1-128)	URL of the image to display.	Example: /ic_handGrindingCoffee.png.
headline	Yes	String (1-128)	Title.	Example: Tips"
desc	Yes	String (1-128)	Description.	Example: Put the coffee powder in the dry grinding cup into the coffee filter, and then touch Start to pour coffee.

## Time Picker The time picker provides time selection in the form of a dialog box. You can set the **hours** parameter to display the time in the 12-hour or 24-hour format. The following figure shows an example. ![](figures/time-picker.png) The code for the example is as follows: ``` { "name": "Time", "id": "time", "path": "time", "dialogType": "PICKER", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "OK", "type": "submit" } ], "pickerType": "time", "containSecond": true, "hours": 24 } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Time.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: time.
path	Yes	String (1-128)	Dynamic content condition.	Example: time.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
pickerType	Yes	String (1-128)	Type of the picker.	The value can be text, time, date, datetime, and multi-text.
containSecond	No	boolean	Whether seconds are contained.	Example: true.
hours	No	int	Time format used by the time picker.	The time format can be 12 (12-hour format) or 24 (24-hour format).

## Date Picker The date picker provides date selection in the form of a dialog box. You can set the **lunar** parameter to display the lunar calendar or Gregorian calendar. The following figure shows an example. ![](figures/date-picker.png) The code for the example is as follows: ``` { "name": "Date", "id": "date", "path": "date", "dialogType": "PICKER", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "OK", "type": "submit" } ], "pickerType": "date", "start": "1970-1-1", "end": "2100-12-31", "lunar": false } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Date.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: date.
path	Yes	String (1-128)	Dynamic content condition.	Example: date.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
pickerType	Yes	String (1-128)	Type of the picker.	The value can be text, time, date, datetime, and multi-text.
start	No	time	Start time of the data picker.	Format: YYYY-MM-DD.
end	No	time	End time of the data picker.	Format: YYYY-MM-DD.
lunar	No	boolean	Whether the date picker is displayed in the lunar calendar.	Example: false.

## Date and Time Picker The date and time picker provides date and time selection in the form of a dialog box. You can set the **hours** parameter to display the time in the 12-hour or 24-hour format. You can set the **lunar** parameter to display the lunar calendar or Gregorian calendar. The following figure shows an example. ![](figures/date-and-time-picker.png) The code for the example is as follows: ``` { "name": "Date & time", "id": "datetime", "path": "datetime", "dialogType": "PICKER", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "OK", "type": "submit" } ], "pickerType": "datetime", "lunar": false, "hours": 24 } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Date & time.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: datetime.
path	Yes	String (1-128)	Dynamic content condition.	Example: datetime.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
pickerType	Yes	String (1-128)	Type of the picker.	The value can be text, time, date, datetime, and multi-text.
lunar	No	boolean	Whether the date and time picker is displayed in the lunar calendar.	Example: false.
hours	No	int	Time format used by the date and time selector.	The time format can be 12 (12-hour format) or 24 (24-hour format).

## Text Picker The text picker is used for text selection in the form of a dialog box. The text content is configurable. The following figure shows an example. ![](figures/text-picker.png) The code for the example is as follows: ``` { "name": "Temperature", "id": "temperature", "path": "temperature", "dialogType": "PICKER", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "Next", "type": "submit" } ], "pickerType": "text", "range": ["40", "50", "60", "70", "80", "90", "100"], "value": [40, 50, 60, 70, 80, 90, 100], "postField": "℃" } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Temperature.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: temperature.
path	Yes	String (1-128)	Dynamic content condition.	Example: temperature.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
pickerType	Yes	String (1-128)	Type of the picker.	The value can be text, time, date, datetime, and multi-text.
range	Yes	Array	Range of the text picker.	Example: ["40", "50", "60", "70", "80", "90", "100"].
value	Yes	Array	Value range of the text picker.	Example: [40, 50, 60, 70, 80, 90, 100].
preField	No	String (1-128)	Prefix field added when a value is selected from the text picker.	Example: 1.
postField	No	String (1-128)	Suffix field added when a value is selected from the text picker.	Example: ℃

## Multi-column Picker The multi-column picker is used for multi-column text selection in the form of a dialog box. The text content is configurable. The following figure shows an example. ![](figures/multi-column-picker.png) The code for the example is as follows: ``` { "name": "Duration", "id": "duration", "path": "duration", "dialogType": "PICKER", "controlItems": [ { "name": "Cancel", "type": "cancel" }, { "name": "Next", "type": "submit" } ], "pickerType": "multi-text", "range": [ ["0 min","1 min","2 min","3 min","4 min","5 min","6 min"], ["0s","1s","2s","3s","4s","5s","6s"] ] } ``` The parameters are described as follows.

Name	Mandatory	Type	Description	Remarks
name	Yes	String (1-128)	Display name of the dialog box.	Example: Duration.
id	Yes	String (1-128)	Unique ID of the dialog box.	Example: duration.
path	Yes	String (1-128)	Dynamic content condition.	Example: duration.
dialogType	Yes	String (1-128)	Type of the dialog box.	The value can be RADIO, ENUM, PICKER, or INFO.
controlItems	Yes	ControlItems[]	Control items at the bottom of the dialog box.	-
pickerType	Yes	String (1-128)	Type of the picker.	The value can be text, time, date, datetime, and multi-text.
range	Yes	Two-dimensional array.	Values available for the multi-column text picker.	The array length indicates the number of columns, and each item in the array indicates the data in a column. Example: [["a","b"], ["c","d"]].