# Color picker

**Color picker** controls are visual cues which can be used as traffic light indicators to tag records with a meaningful color.

**Data type**: `string`

### Adding a Color picker control

1\. Edit your sheet\
2\. Click on the **Qommentary Writeback** extension\
3\. Expand **Input Column** section\
4\. Click on **Add column**

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZCvqSqKXuXT2WpbY2f%2F-MZCx6ezSPuMpGDkleyH%2Fimage.png?alt=media&#x26;token=c8a0c47a-fd65-447f-9bcf-fb1394cce274" alt=""></div>

5\. Select **Color picker** from the dropdown menu

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZNzTU6_jJ1Q3lXDg4M%2F-MZO28HOASt-m8Kr_2R8%2Fimage.png?alt=media&#x26;token=09e7f213-45ba-4721-9583-047899ca9509" alt=""></div>

6\. Add a **label** to be displayed as a column header

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZNzTU6_jJ1Q3lXDg4M%2F-MZO2TDQCnD43ylOzbqW%2Fimage.png?alt=media&#x26;token=382c3ebc-6bbf-4ceb-aa00-c825dc1a4827" alt=""></div>

7\. Add a **field** name

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZNzTU6_jJ1Q3lXDg4M%2F-MZO2b91o3MeNmIJzun9%2Fimage.png?alt=media&#x26;token=9b8bac86-552c-42df-84bb-83fad033d928" alt=""></div>

{% hint style="danger" %}
If database is selected as data connection, then field name **must map** to destination table column name.
{% endhint %}

{% hint style="warning" %}
Field name cannot contain spaces.
{% endhint %}

8\. Click on **Done**

**Color picker** input column can now be updated and saved.

![](https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZB8LSaaGzfuUPLm0Vo%2Fimage.png?alt=media\&token=3a45bdbd-095d-424c-8d13-b6207b87eb14)

### Adding color options

When you add a Color picker input column, you will be required to add color options.

To add a color option, please follow these steps:

1\. Edit your sheet\
2\. Click on the **Qommentary Writeback** extension\
3\. Expand the **Input Columns** section and **Color picker** column\
4\. Click on **Add option**

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZB9BlrNZ2lpu9um9ki%2Fimage.png?alt=media&#x26;token=15d84966-ef18-4191-8ca7-0fe7d8798c1f" alt=""></div>

5\. Give your color option a **Name**

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZB9bAFZFX960jZAvur%2Fimage.png?alt=media&#x26;token=52b43d26-093a-4d8e-93f4-c41c1da0d449" alt=""></div>

{% hint style="info" %}
Name will be saved in destination table. If no Tooltip text is provided, name will also be displayed in tooltip on color hover.
{% endhint %}

6\. Select a **Color**

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBAE8btKyIQ56s7N3z%2Fimage.png?alt=media&#x26;token=8a411fae-ff21-4bdb-bbac-f83692a6a453" alt=""></div>

7\. Check **Show tooltip** if you wish to display a tooltip for this color

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBAloC6PUKLRjK4SWR%2Fimage.png?alt=media&#x26;token=42a72f26-4030-4e90-ab77-dd96a4ce9b54" alt=""></div>

{% hint style="info" %}
If you wish to hide tooltips for all colors, please see Disabling tooltips section.
{% endhint %}

8\. Alternatively, you may provide a custom **Tooltip text**

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBBJWjDGTUG_wKk5tI%2Fimage.png?alt=media&#x26;token=c1c32a1d-8474-44a2-8c3a-a91cb56df211" alt=""></div>

Once applied, tooltip is displayed on hover

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZDjXOpMEX4GSfjdihL%2F-MZDkho4VOkvFYJlaVFV%2Fimage.png?alt=media&#x26;token=66e25a06-958d-44aa-b4a5-5eec8675dfe5" alt=""></div>

{% hint style="info" %}
Tooltip text will override the text provided in the Name field.
{% endhint %}

### Disabling tooltips

If you wish to disable tooltips in your color picker control, please follow these steps:

1\. Edit your sheet\
2\. Click on the **Qommentary Writeback** extension\
3\. Expand the **Input Columns** section and **Color picker** column\
4\. Click on the switch control to disable tooltips

<div align="left"><img src="https://1677646431-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M43RhGzV8Plu0tfknia%2F-MZB6XirtpSeD7DpaaOD%2F-MZBCNJdVTgR-6VMVVsp%2Fimage.png?alt=media&#x26;token=81dd2127-1785-4fcb-afe6-6e12fbac5b7f" alt=""></div>
