Button color based on query value

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
sacgtdev
Veteran Member
Posts: 75
Joined: 2020-06-10 11:14

Button color based on query value

Post by sacgtdev » 2022-07-22 03:10

How to code the button color so that the button color based on certain conditional value?

eg. if query_value >0, then color = green, otherwise, red.

Button is currently generated using jquery.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 1807
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: Button color based on query value

Post by jsetzer » 2022-07-22 05:48

Assuming you have created a button using jQuery and already set the Bootstrap classes btn btn-default (and perhaps btn-md | btn-lg), stored in variable YOURBUTTON:

Code: Select all

YOURBUTTON.removeClass('.btn-default').addClass('btn-success');
Or

Code: Select all

YOURBUTTON.removeClass('.btn-default').addClass('btn-danger');
Depending on the selected Bootstrap theme, *-success will give the theme-wide-defined color for success messages and *-danger for error messages. Using those Bootstrap theme defined, side-wide classes is recommended for best user-recognition.

---

If you want different colors (not recommended), instead of replacing btn-default class by btn-danger/btn-success use something like ...

Code: Select all

YOURBUTTON.css('background-color', 'green !important');
---

Tip
Always remember that 8% of male users are color blind (and only very few females), most of them red-green. Those guys will barely see differences between red and green buttons, but just gray or gray. I recommend putting a different icon and caption, additionally, for best possible user guidance.
Kind regards,
<js />

My AppGini Blog:
https://appgini.bizzworxx.de/blog

You can help us helping you:
Please always put code fragments inside [code]...[/code] blocks for better readability

AppGini 24.10 Revision 1579 + all AppGini Helper tools

Post Reply