Change status color based on availability condition

Wappler General How To
#1

Hi everyone!

I’ve just started to build my first app together with some friends, and I’m trying to get the ins and outs of Wappler. So far, it’s been great but I cannot figure out the following so I thought I’d ask for help.

We have a status indicator for our users that shows availability:
image

On click, it opens up five options:
image

In our DB, we have a column “availability” for each user that can be 1 (available) or 0 (not available), and another column “available_at” that can have the value of 30, 60, 120 or NULL minutes.

So far, I’ve used 5 different server actions and connections to update these two columns using dmx-on:click= for each of the divs.

What I cannot figure out, however, is how to update the color of the status indicator based on the values in the database.

In theory, the conditions should be:

  1. IF available = 1 THEN background-color: green
  2. IF available = 0 AND available_at > 0 THEN background-color: yellow
  3. IF available = 0 AND available_at = NULL THEN background-color: red

I tried playing around with conditions and setting values on server connect and then passing them to the div that serves as the status indicator via dynamic attributes but couldn’t figure this out. I’d really appreciate some help here. Many thanks!

#2

Something like:

dmx-style:background-color="available ? 'green' : available_at ? 'yellow' : 'red'"
#3

Another solution will be to create 3 classes:

.bg-green {
    background-color: green;
}
.bg-yellow{
    background-color: yellow;
}
.bg-red{
    background-color: red;
}

And just toggle them using the dynamic attributes > styling > class toggle like:

Screenshot_13
Screenshot_13463×579 61.9 KB

Which results in this in the code:

dmx-class:bg-green="available == 1" dmx-class:bg-yellow="available > 0" dmx-class:bg-red="!available"
1 Like
#4

Thanks, Patrick! Could you perhaps tell me what server actions and server connects I should create to get to this? I understand that instead of “available” and “available_at” there should be dynamic data selectors.

Also, is the ? and : part of the Wappler syntax?

Thank you!

#5

Yes, the ? and : are part of expressions supported by Wappler.

When using the UI it is called a Ternary Operation.

image

2 Likes
#6

Hi everyone! Just realized I forgot to thank you - I was able to figure out how to make this work with ternary operators. Thanks again!

1 Like