Edit document
Color List
Color List is gh-element that contains a list of colors and allows to select one or few of them.
Functional Characteristics
This element is useful in online stores. It allows you to set the colors of the product. The buyer can then choose one or more of them for his order.
Value Format
The color list value is the ID of the option that is selected in a string type.
{
"field_value": "2"
}
If multiple values are enabled, IDs of all selected values will be stored in the field_value, separated by commas.
Element Options
This element has options that allows to configure it or set its values.
Field Settings
Field settings of this list contain options we are already familiar with. Field Name and Name Space are standard for all gh-elements.
| Name | Description |
|---|---|
| Multiple value | allows to select a few colors at the same time when it is on |
Multiple value
This is an option that allows you to configure how many colors the user can select. If multiple value is false, user have to choose only one color. Opposite, if it is true, user have no limit on the number of selected colors.
Options Settings
Options Settings is a table of options and their properties.
| Name | Description |
|---|---|
| Name | column that contains; details... |
| Color | selected option color; details... |
| Edit | buttons that allows to edit options;details... |
Name
This is the name that you gives to the option. In most of interpretations, it will be displayed in the field.
Color
This is the color that you set for the option. It is displayed as a color circle and can be selected by user in application. Colors are chosen in the color picker.
Edit
Edit is a set of two buttons. The first one has an icon of the pencil and allows to edit the option data. The second has a rubbish icon and allows to delete options.
Element Style
The style of this element can be configured with the only help of standard options and interpretation. Read about that in Setting Overview article.
Data Model
The color list has data model which contains all of its options.
{
"data_model":{
"interpretation": [],
"multiple_value": 0,
"options": [{
"color": "#000000",
"name": "Black",
"value": 1
}]
}
}
| Name | Type | Description |
|---|---|---|
| interpretation | array |
contains all interpretation types of the color list |
| multiple_value | boolean |
shows whether user select one or more colors |
| options | array |
contains option objects |
| color | string |
contains the color hex code |
| name | string |
contains the color name |
| value | number |
unique option ID |
Filtration
The color list elements can be filtrated out by the value name or by the presence of any value.
Interpretation
The color list has only many interpretation types:
Color list
This interpretation allows display list elements as color circles. Selection is marked with a check mark.
Color list with colors name
This type allows to display list elements as color circles with names under them. Selection is marked with a check mark.
Current value
This interpretation type allows to select color from the popup list and display its name.
Default
That allows the list to be displayed as an entry editable field. After clicking on it, the pop-up list will be appeared.
Value
This type displays only the ID of the selected color option.