Color picker

The color picker allows the user to select a color from either the full range of colors or a predefined color palette.

Label
The text that is displayed preceding the color picker.
Width of label
The number of pixels allocated for the text preceding the color picker.

If the text of the label is greater than the width specified, the label is truncated.

Size of palette tile
When the Mode is set to Palette, this specifies the width (in pixels) of each tile in the color palette.
Number of palette columns
When the Mode is set to Palette, this specifies the number of columns of tiles to display in the color palette.
To display an opacity slider?
When this option is selected, a slider that controls the opacity is displayed within the color picker.

Note: This option only applies when the Mode is set to Flat.
Show Apply/Cancel buttons?
When this option is selected, Apply and Cancel buttons are displayed as part of the color picker widget.

You can customize these by specifying values in the Label for Apply button and Label for Cancel button fields.

Show color preview?
When this option is selected, a color preview is shown in the color picker widget.

Enable the widget?
Specifies whether the user is able to interact with the color picker.

When this option is selected, the user can select a color from the color picker. If this item is cleared, the user will be able to see the color picker but may not interact with it.

Auto updating while typing?
Specifies whether the color should be changed automatically when the user types a valid value in the input field in the color preview.
Valid values include:
  • Any valid HTML color name (e.g., red, blue, cyan)
  • An RGB value (e.g., rgb(238,147,12))
  • A hex value (e.g., #d12345)
Note: This only applies when the Mode is set to Flat and Show color preview? is selected.
Mode
If no Mode is selected, the color picker is contained within a dropdown.

Flat
When this option is selected, the color picker is displayed in the QuickApp.

Palette
When this option is selected, a color palette is displayed in the QuickApp.

The color palette used is determined by the value of palettevalue_. See the 1010data Reference Manual for more details on specifying the color palette.

Label for Apply button
The text to appear on the button which applies any changes made in the color picker widget.
Label for Cancel button
The text to appear on the button which cancels any changes made in the color picker widget.
Variable for value
The variable to hold the hexadecimal value of the selected color.

You may select a variable from the dropdown, or you can create a new variable by clicking New... and entering the name in the field following the @ symbol.

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic selected_color="#5bf1ff">
  <widget class_="color" label_="Select a color:" labelwidth_="100" 
name="hmadded__1" preview_="0" relpos_="134,154" value_="@selected_color"/>
  <widget class_="text" name="hmadded__2" relpos_="375,157" 
text_="Selected color: {@selected_color}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic selected_color_flat="rgb(238,147,12)">
  <widget buttons_="1" class_="color" label_="Select a color:" 
labelwidth_="100" mode_="flat" name="hmadded__4" opacity_="1" 
relpos_="138,97" value_="@selected_color_flat"/>
  <widget class_="text" name="hmadded__5" relpos_="600,96" 
text_="Selected color: {@selected_color_flat}"/>
</dynamic>

Example

<note type="base">Applied to table: pub.demo.retail.item</note>
<dynamic selected_color_palette="white">
  <widget buttons_="1" class_="color" columns_="4" label_="Select a color:" 
labelwidth_="100" mode_="palette" name="hmadded__3" opacity_="1" relpos_="157,157" 
tilesize_="40" value_="@selected_color_palette"/>
  <widget class_="text" name="hmadded__6" relpos_="540,160" 
text_="Selected color: {@selected_color_palette}"/>
</dynamic>