Hello All,
I have a product table that has a list of colors to select from when setting up the product.
I have color name, hex value, red value, green value, blue value.
Is there some way to fill in the background on each row with the hex value color that I already have stored on each row in the table?
I understand how this might not be practical for a drop down box, but that would be nice.
Otherwise in just the list view that would be fine.
Thanks.
You may use Client Side Script (see the topic Field Setup → Edit Tag in the help file) to add an onchange event to the value field.
Thanks for the reply. I am really new to this, but I have a couple follow on questions.
I assume you are talking about:
a) clicking on the table in the left hand pane
b) clicking on the column name in the upper right hand pane
c) click on the “Client side events” in the Edit Tag section of the lower right hand side of the pane.
That spot, correct?
I added this code just to see if I could force the color:
{ // keys = event types, values = handler functions
“change”: function(e) {
// Your code
background-color: rgb(0,191,255)
}
}
My code is literally the one line there on the background-color.
When I regenerated I didn’t see anything in the list view nor in the actual edit view.
Clearly I am doing the wrong thing here.
Part of what I have to sort out is actually getting a reference at the record level for what is contained in the columns (no idea there).
But I am not sure that to put in the area in the first place.
What I am trying to do is just turn that box/field in the list view to the color represented in the hex field.
Thanks.
craigbert wrote:
{ // keys = event types, values = handler functions
“change”: function(e) {
// Your code
background-color: rgb(0,191,255)
}
}
You cannot put CSS styles into JavaScript directly, you may try, .eg.
{ // keys = event types, values = handler functions
“change”: function(e) {
// Your code
$(this).css(“background-color”, this.value); // Assume it is an field storing color like “#abcdef”
}
}
That is correct. It is a text field.
I put that bit of code in that spot and it didn’t do anything.
I googled around and saw something like this:
$(this).style.backgroundColor = this.value
That didn’t do it either.
As I look around it looks like this is a pretty common question so part of me is wondering if maybe it is overridden somewhere, I will keep looking and digging around.
If you have any other thoughts I would certainly like to hear them ~ thanks for all your help so far.
PHPMaker uses Bootstrap form control which has background color defined, you can override it by CSS !important (read https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity), e.g.
$(this).css(“background-color”, this.value + " !important");
Thanks. I appreciate all the help!
I will read up on this and play around with it a bit to see what I can figure out and post back here.
Thanks!