Hi All,
This is a little tutorial for my sake, but if you get value from it, then that is great.
So, I had previously used a couple of images for some buttons I had, one being green and one being red to signify if there was an issue somewhere. I thought it needed a bit of a revamp, but dealing with images was always a bit convoluted and you had to upload the images etc, but the css option is actually quite simple.
-
So, I first started by sourcing a button generator that provided me with css code. I used http://buttonoptimizer.com/ but I am sure there are others. It provided me with the css code I could start with.
-
On my app (a control app) I created a new php method. I called it button_css().
-
I added a new field {Fix1} (Label type) to house the button.
-
I pasted in the button code into the new php method. The code was -
print("<style type=‘text/css’>.button1 {
display: inline-block;
text-align: center;
vertical-align: middle;
padding: 3px 12px;
border: 3px solid #54a147;
border-radius: 0px;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#b3b3b3));
background: -moz-linear-gradient(top, #ffffff, #b3b3b3);
background: linear-gradient(to bottom, #ffffff, #b3b3b3);
font: normal normal bold 12px arial;
color: #54a147;
text-decoration: none;
}
.button1:hover,
.button1:focus {
border: 3px solid #6dd15c;
background: #ffffff;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d7d7d7));
background: -moz-linear-gradient(top, #ffffff, #d7d7d7);
background: linear-gradient(to bottom, #ffffff, #d7d7d7);
color: #54a147;
text-decoration: none;
}
.button1:active {
background: #b3b3b3;
background: -webkit-gradient(linear, left top, left bottom, from(#b3b3b3), to(#b3b3b3));
background: -moz-linear-gradient(top, #b3b3b3, #b3b3b3);
background: linear-gradient(to bottom, #b3b3b3, #b3b3b3);
}
</style>");
- I then added a line in the ScriptInit event
button_css();
- Then in the OnLoad event I added the following code to determine with button to display
if ([errors_found] > 0){
{status_trans} = "Failed - ".[errors_found]." unbalanced transactions found";
{Fix1} = "<a href= '../grid_transactions_notbalanced/'><button class='button2' type='button'>Fix Issues</button>";;
}else{
{status_trans} = "No unbalanced transactions found";
{Fix1} = "<button class='button1' type='button'>No Issues</button>";
}
{status_trans} is a field to hold a message only. Also note the link to the app to fix the problems (missing if all is OK).
So now when I run the app, the button changes if there are errors to be reported.
I have attached images below.
Hope that helps someone
See ya
Tony
