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.

What We Are Going to Do

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]

View[colorTable]

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

Current[colorTable]

Advanced Table[contTable]

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}

Flow[UpsertColor]

Outline[UpsertColor]

Key Parameters

Map Parameters

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

Click Event[btnSubmit]

btnSubmit[Call Action]

btnSubmit[Update State]

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

Action[GetColors]

GetColors[inMemory DB / Get All]

GetColors[Fx Transform]

8. Associate GetColors with Action Variable

1. Create a new Action Variable and name it colors.

2. Bind the colors with the GetColors Action.

Outline[colors]

colors[Action association]

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

Action[DeleteColor]

DeleteColor[Parameters]

DeleteColor[InMemory DB / Delete]

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

Click Event[btnDelete]

btnDelete[Call Action]

btnDelete[Update State]

Update State of thecolors.reload has to be also added with btnSubmit Event.

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

btnSubmit[Upgrade Click Event]

btnSubmit[Update State]

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