Color Buttons Made Easy
Read on to find out how 2 simple changes to an Aware Query will give you colorful buttons seen here.
(In a similar way, you can also change PANEL OPERATION buttons in a Form - see below.)
Preparation
For my examples, you have to have some new elements defined in your custom CSS.
I use the CSS from w3schools.com.
You can go to any of their pages, and View Source. You’ll see this link to their CSS: https://www.w3schools.com/w3css/4/w3.css
An easy thing to do is grab the section of colors they use and add it to your CSS.
This will add many colors like “w3-blue”, “w3-green” etc.
The Problem
Panel Button and Operations with Rows buttons do not offer a place to assign a class - which means their styling is set in the Theme.
In the Name of a button, where you would usually put the button name like “Edit” or “Details”, you can put a <span> around that to assign a color to the TEXT, plus you can add a color to the icon (fa fa-plus greenbutton), but still the button itself will be gray or blue or whatever the Theme assigns.
Easy Color Buttons to the rescue.
CHANGE # 1
In the Description field (which is used for a ToolTip at runtime) you can PREFIX any existing ToolTip you might be using (or even if you’re not using a ToolTip) with a string which will be added as a class to the button.
For example: btn-w3-orange| (thats a PIPE symbol / vertical bar at the end)
will cause a button to turn Orange by adding the class “w3-orange” to the button.
The Render Script code for the Query looks for a specific string, in this case btn- and then adds the string AFTER that as the Class. The PIPE is Required and signals the end of the class. It also separates the Class string from your ToolTip. (Yes, I could have not used the Pipe, but it would have required more JavaScript in the function.)
NOTE: You are free to change “btn-“ to anything else you want as long as you change the similar string in the JS.
You could make it be X9orange if you wanted as long as you alter the JS accordingly.
CHANGE # 2
A simple line is entered for the Render Script for your Query:
_ColorButtons ( parser, widget );
This is looking for a function which we put in our CUSTOM JS for our application.
That simple JS file is attached IN THE NEXT post.
Place it in your AwareIM/CUSTOM/JS directory and regardless of what it is physically named, it will be loaded at runtime.
Thats it. At runtime your buttons will be in color.
FORMS
Most buttons on a form are either Save or Close, OR have been put on the form via HTML.
Aware does not pass a ToolTip to a Save button, so this procedure will not work to change those colors, and you can change your HTML buttons yourself.
Panel Operation buttons can be altered by using this same technique in the Description (Tool Tip) field.
HOWEVER, the Render Script must be different:
_FormColorButtons ( parser );
CLOSING THOUGHTS
1) Learn how to use the INSPECTor in your Browser. If you’re not seeing the output you expect, INSPECT the grid or form and look in the Error Console for an error message. But the most likely reason is your CSS tag was mispelled somewhere. Did you hold down SHIFT when re-freshing the Browser?
2) Before you start adding w3-green all over the place, step back and consider this:
Think about 3 major functions... Add Edit Delete
So, after you decide on your 3 main colors, COPY those lines in the CSS and rename them:
btn-w3-create
btn-w3-edit
btn-w3-delete
This way, if you later want to change the DELETE color, you can do it in 1 place systemwide.
I also made
btn-w3-process
btn-w3-upload
btn-w3-details
Barcelona Beerware
You are free to use this code in ANY application. You are not allowed to sell it. It is released under the common rights something or other, Berkley GNU-xyz amendment of 2018.
You MAY purchase a beer for me at the next user conference in Barcelona if you feel this helped improve your app enough that its worth a beer. If it hurts your App, then don't come to Barcelona 🙂
Special thanks to John Talbott for steering me in the right direction.
