Color-coding of variables is wrong

[aschoijett]

Hi,
I’m using Windows 10, Wappler 5.5.3, and NodeJS (but I know that the same happens with PHP)

Wappler uses 3 colours to denote variables:
Blue: the plain variable
Orange: meaning unclear
Green: when the variable is affected by a function, usually configured using the formatter.

Teodor clarified the meaning in this posting

Do The Colours of Variables Mean Something?

I’ve never really noticed this before, but sometimes the colours of variables that Wappler shows are different… see the example below with the blue variable in between the orange ones. Does the different colour mean something? [colours]

There is a minor bug with this that I reported a long while back but that it has not been fixed yet.

OBSERVED
If I select a variable using the dynamic selector, the variable is displayed in Blue, unless the variable name is 15 characters long or more, in which case the variable is displayed in Orange.

Example:
In the picture below, you can see that StartEndIsNull (15 characters) is shown in orange, but EndDateIsNull (13 characters) is shown in blue.

EXPECTED
Use the same colour (blue?) irrespective of the length of the name of the variable.

The problem is easy to reproduce.

Hope this helps.

Many thanks,

Alex

[patrick]

I think your observation is correct, the orange tag is when the variable name is truncated (15 characters long or more). The blue Teodor mentioned in his topic ( Dynamic link meaning of colors - Wappler General - Wappler Community) is the selected state, when selected you can apply formatting to that variable.

@George probably knows more about the color coding for the variables. I don’t think it is a bug but a design decision that was made.

From what I observed:
Blue: Variable
Orange: Truncated variable
Green: Formatted variable
Yellow: Operator

[aschoijett]

Thx Patrick for your quick answer. I am fully aware that this is a purely cosmetic discussion, but just want to mention that:

1. I think Wappler actually uses two shades of blue: A lighter / grayish blue that is shown when the variable is selected for formatting (the one mentioned in the documentation) and another, a tad darker blue, that seems to mean that the variable name is not truncated.

2. It may be useful to update the documentation explaining the colour-coding.

3. On a personal note, I don’t think the “truncated name” state requires a separate colour. For me, the ellipsis (…) is enough. The orange confused me and trigger all this thread.

4. Knowing that all this is likely low priority, I would make the difference between the two blues more marked and maybe reserve the use of the orange for something else, like to show that the referenced variable no longer exists.

Hope this helps!

Alex