Hi Pat and Irvin,
Thank you so much for the contribution! I was actually able to make it work, however not using component and component.context as in Irvin’s example (those would just come up as undefined).
The guidance regarding the .find and then setting the .css directly was what got me on the right tack. It renders beautifully and for our use case is more appropriate than cloning divisions, however will use Pat’s solution in scenarios with fewer variables.
Here is my working code, saved as Resource Javascript Snippet (Inline), and then assigned as custom field renderer to the field I want to evaluate in the deck I want to colour in:
var field = arguments[0],
value = arguments[1],
$ = skuid.$;
var csspath = field.item.element;
var Pro1 = “Awesome Product Name”;
var Pro2 = “Best Product Ever”;
if (value != null) {
if (~value.indexOf(Pro1)) {
field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “#B6CCFF” );
}
else if (~value.indexOf(Pro2)) {
field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “orange” );
} else {
field.element.text(value);
csspath.find(‘div.sm-card-inner’).css( “background”, “#1390CD” );
}
}
Will consider using French doors and bulldogs for inspiration in the next project since that definitely got the job done! #insidejoke
Very grateful for this community,
Robin