> For the complete documentation index, see [llms.txt](https://docs.adapptio.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.adapptio.com/working-with-adapptio/examples/internal-tools/color-picker.md).

# Color Picker

### The Goal

Prepare the basic application containing advanced table loading data from the inMemory database, where any single record can be deleted.

For this task, we will use a color picker to send color codes into the inMemory database, in combination with advanced table gathering data.

![](https://lh6.googleusercontent.com/Uwm3cqSsCHe301jbDL8-m6ew9MqtzSmaJQzvLtNo_qYoZeJLoz8hyZaDXgubkgfbIaROm3c96ng0Y43QLjMDFNj19T_YKRmYIdvRmi1mDENWnnsHdMk1jSPBK-PJgk1Xei4bCboR2bjokVnhIRKsZQ)

### What We Are Going to Do

{% tabs %}
{% tab title="Project Structure" %}

* [ ] Integration inMemory DB\[`DB.Colors`]

* [ ] Action\[`UpsertColor`]

* [ ] Action\[`GetColors`]

* [ ] Action\[`DeleteColor`]

* [ ] Data Variable\[`colors`]

* [ ] View\[colorTable]
  * [ ] Sidebar Layout\[`sidebarLayout`]
  * [ ] Content(*content*)
    * [ ] Container\[`cntTable`]
      * [ ] Advanced Table\[`colorTable`]
        * [ ] Column1 -> Text\[`tblName`]
        * [ ] Column2 -> Icon\[`tblIcon`]
        * [ ] Column3 -> Property Item\[`tblProperty`]
        * [ ] Column4 -> Icon\[`tblHighlight`]
        * [ ] Column5 -> Button\[`btnDelete`]
  * [ ] Content(*sidebar*)
    * [ ] Box\[`sidebarBox`]
      * [ ] Color\[`fldColor`]
      * [ ] Text  Input\[`fldName`]
      * [ ] Button\[`btnSubmit`]
        {% endtab %}

{% tab title="View\[colorTable]" %}
![](/files/iOJxXBCBsYW4jZD76IwR)
{% endtab %}
{% endtabs %}

### 1. Create an application layout

The sidebar layout looks to fit our needs. Let's start with the basic layout preparation.

1. Create a new **View** and name it `colorTable`.
2. Place in a **Sidebar Layout**, set up its *ID* -> `sidebarLayout`, and *Item Flex* -> `Stretch`
3. Into the C*ontent* of the `sidebarLayout` put a **Container**, name it `contTable`, and set *Padding* -> `Wide`
4. Into the *Sidebar* of the `sidebarLayout` put a new **Box** and configure its property as follows: *ID* -> `sidebarBox`; *Background* -> `WHITE`; *Padding* -> `Wide`; *Spacing* -> `Medium`; *Item Flex* -> `Stretch`

### 2. Place and Configure Components in Sidebar

The sidebar panel contains a color picker where each picked color has its name. Submit button will send the configuration to our inMemory database, if both values are set up; we will assign submit action later.

1. A **Color** component will be placed first, carrying *ID* -> `fldColor`, and *Label Value* -> "`Choose color`"; *Label Text Style* -> `Bold`
2. Put under a **Text Input**, name it `fldName`, and set up as follows: *Placeholder* -> "`name...`"; *Label Value* -> "`Name`"; *Label Text Style* -> `Bold`; *Validation Required* -> `true`
3. A Submit **Button** will follow, with set up properties: *ID* -> `btnSubmit`; *Value* -> "`Save color`"
   1. *State Enabled* -> ƒx(`fldName.value != "" && fldColor.value != ""`)

### 3. Prepare an Advanced Table

Let's prepare an advanced table as an essential part of our layout. Binding its dynamical values will be done later.

1. Place an **Advanced Table** into `contTable`, name it `colorTable`,  *Spacing*-> `Narrow`, and set up the following properties.
   1. Add a *Name* column call its *Title text* -> "`Name`" 
   2. Add a *Color* column call its *Title text* -> "`Color`"; *Horizontal Alignment* -> `Left`; *Width* -> `50px` 
   3. Add a *Code* column call its *Title text* -> "`Code`"; *Horizontal Alignment* -> `Left`; *Width* -> `25%` 
   4. Add a fourth column and leave its *Title text* `blank`; *Horizontal Alignment* -> `Left`; *Width* -> `100px` 
   5. Add a fifth column and leave its *Title text* `blank`; *Horizontal Alignment* -> `Right`; *Width* -> `100px` 
2. Into the `Name` column put a **Text** component call it *`tblName`*, make it `Bold`, and its *Value* *\*keeps empty for a moment*.
3. The `Color` column will contain an **Icon**, name it `tblIcon`, select from the material library *Name* -> "`mdi/checkbox-blank`", and *Size* -> `Large`; *Foreground* -> *\*will be mapped dynamically later*
4. Into the third `Code` column put a **Property Item** component with copyable items, which is handy in our color case. Name it `tblProperty`, and add an`#1` item with following set up:
   1.  *Value* -> *\*we will bind it later*; *Text Style* -> `Bold`; *Enable copy button* -> `true`
5. Highlighting **Icon** of the latest added color has *ID* -> `tblHighlight`, and its place in the fifth column; *Name* -> "`mdi/palette`"; *Size* -> `Medium`; *Render* -> *\*will be set up later*
6. The last column belongs to a **Button**, named `btnDelete`. Its empty *Value* -> ""; *Icon Name* -> "`mdi/trash-can-outline`"; *Size* -> `Small`.
   1. *Button Style* -> `Custom`; *Background* -> `White`; *Foreground* -> `Text`; *Border Color* -> `Light_Gray`; *Border Width* -> `1px`; *Border Radius* -> `18px`
   2. *\*Binding with a delete action we will make it later*.

{% tabs %}
{% tab title="Current\[colorTable]" %}
![](/files/TGjtXinWvheJDS5ZIebB)
{% endtab %}

{% tab title="Advanced Table\[contTable]" %}
![](/files/bCHbGQZdMGr21KSM3Ez6)
{% endtab %}
{% endtabs %}

### 4. Connecting inMemory Database

Using of inMemory database is the best option for saving temporary values. For our case, saving color codes in incremental order.

1. Create a new Integration by selecting the **inMemory DB** option. Name it `DB.Colors` and set up *Primary Key* -> `color_id`; *Auto Generate* -> `Increment`
2. Saving the integration allows immediate use of internal memory.

### 5. Upserting Color into Memory Database

Let's prepare an action by sending the required color data to the in-memory database by submitting btnSubmit.

1. Create an **Action** and name it `UpsertColor`.
2. Add two Required *Strings,* name it `inpColor`, and `inpName`.
3. Place an **Insert** function from `DB.Colors` Integration panel to your flow canvas and wire it together; *ID* -> `insertDB`
4. There are two ways how to set up *Outgoing parameters* of `insertDB`;
   1. Add two *Key parameters*, name them `color`,  `name`, and its *Values* map dynamically as `ƒx(params.inpColor)`,  `ƒx(params.inpName)`
   2. Bind all parameters as a function map `ƒx{"color" : params.inpColor, "name" : params.inpName}`

{% tabs %}
{% tab title="Flow\[UpsertColor]" %}
![](/files/WZAlOnh0ShylK9JhrXZV)
{% endtab %}

{% tab title="Outline\[UpsertColor]" %}
![](/files/hQQT6LGfIhYqz4CT0dlX)
{% endtab %}

{% tab title="Key Parameters" %}
![](/files/oRMLygGjPChC0Q6Jsy7j)
{% endtab %}

{% tab title="Map Parameters" %}
![](/files/48aYIwhUaQJVgGYp8c1Z)
{% endtab %}
{% endtabs %}

### 6. Binding Action with the Submit Button

The submitting button must trigger the action of sending data into the in-memory database.

1. Open the `Click` *Event Editor* on the `btnSubmit` and wire together with the following functions:
   1. **Call Action** will be bound together with `UpsertColor` *Action*, and it's input parameters are as follows:
      1. *inpColor* -> `ƒx(fldColor.value)`; *inpName* -> `ƒx(fldName.value)`
   2. **Update State** forcing the View to clear the *Input Value* after submitting by a *Method* -> `fldName.clearValue`

{% tabs %}
{% tab title="Click Event\[btnSubmit]" %}
![](/files/2mdbAkAgIAEpeVH2uWhD)
{% endtab %}

{% tab title="btnSubmit\[Call Action]" %}
![](/files/FHFKnAPE3gMXxmwaN3yf)
{% endtab %}

{% tab title="btnSubmit\[Update State]" %}
![](/files/xZJOBsaXH0vw4eiCLK4K)
{% endtab %}
{% endtabs %}

### 7. Loading Colors from Memory Database

Loading all data from the in-memory database to `colors` *Variable* serving as the primary source for Advanced Table.

1. Create an **Action** and call it `GetColors`.
2. Wire together **InMemory DB / Get All** *function* and set up its *ID* -> `data`.
3. Place in a **Transform** function returning `data` from the `GetColors` Action as follows:

```
let data = $.data;    //association with local constant
return data;        //return data constant from the action
```

{% tabs %}
{% tab title="Action\[GetColors]" %}
![](/files/N6b1Wcr7viqPBhsMnBim)
{% endtab %}

{% tab title="GetColors\[inMemory DB / Get All]" %}
![](/files/JPbpSgyOHp5yxEHt05f4)
{% endtab %}

{% tab title="GetColors\[Fx Transform]" %}
![](/files/KKtKwuD5ZEhaT44dMeyy)
{% endtab %}
{% endtabs %}

### 8. Associate GetColors with Action Variable

1. Create a new **Action** *Variable* and name it `colors`.
2. Bind the `colors` with the `GetColors` *Action*.

{% tabs %}
{% tab title="Outline\[colors]" %}
![](/files/z4khTbCuUrwSwTp02yVr)
{% endtab %}

{% tab title="colors\[Action association]" %}
![](/files/zxwwSr44q5K1yzuaWvpG)
{% endtab %}
{% endtabs %}

### 9. Prepare a DeleteColor Action

Let's prepare to delete action from in-memory in advance. We will bind it with the delete button in the advanced table later.

1. Create a new **Action** and name it `DeleteColor`.
2. Add a new *Parameter*, call it `color_id`, and set up it as a *Number*.
3. Wire together **inMemory DB / Delete** function, where the *Key* value is referencing parameters as follows: `params.color_id`

{% tabs %}
{% tab title="Action\[DeleteColor]" %}
![](/files/aawJmTspsZDMeQMCp3ST)
{% endtab %}

{% tab title="DeleteColor\[Parameters]" %}
![](/files/lZrawxrmLdUbQlWAXvlT)
{% endtab %}

{% tab title="DeleteColor\[InMemory DB / Delete]" %}
![](/files/bTYuhT7dHXHsDXLoQmyO)
{% endtab %}
{% endtabs %}

### 10. Finalize the colorTable

Finally, we have to bind our actions with `colorTable`.

1. Select `tblName` Text component and bind its *Value* -> `item.name`.
2. Same do for the tblIcon and set up Foreground -> `item.color`.
3. Bind the `#1` item of the `tblProperty` *Value* -> `item.color`.
4. `tblHighlight` *Visibility Render* -> `ƒx(item.color == fldColor.value)`
5. `btnDelete` on *Click* Event set up as follows:
   1. Place in a **Call Action**, bind it with `DeleteColor`, and wire it together; as a *Parameter color\_id* set up -> `item.color_id`.
   2. As a second component put in **Update State** with *Method* -> `colors.reload`

{% tabs %}
{% tab title="Click Event\[btnDelete]" %}
![](/files/Z4GJssadERKIONFckYuA)
{% endtab %}

{% tab title="btnDelete\[Call Action]" %}
![](/files/2Y6YC1pL9AbxMOyuQkKB)
{% endtab %}

{% tab title="btnDelete\[Update State]" %}
![](/files/JjcsVG3isJSzxzErt9Rj)
{% endtab %}
{% endtabs %}

Update State of the`colors.reload` has to be also added with `btnSubmit` *Event*.

1. Open the `btnSubmit` *Event*, add and wire together **Update State** with *Method* -> `colors.reload`.

{% tabs %}
{% tab title="btnSubmit\[Upgrade Click Event]" %}
![](/files/4LTsBFsdK19CyKngENWb)
{% endtab %}

{% tab title="btnSubmit\[Update State]" %}
![](/files/s2wePo6PIbQ1SXycwNr4)
{% endtab %}
{% endtabs %}

We are done! Our advanced table with a bound in-memory database has to be working.