# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.adapptio.com/working-with-adapptio/examples/internal-tools/color-picker.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.