use snippet to change field color

  • 1
  • Question
  • Updated 3 years ago
  • Answered
Is it possible to use on field in a table to change the color of another field.
I suspect the snippet looks something like this?

var field = arguments[0],    value = arguments[1],               $ = skuid.$;
            if(field.metadata.accessible)
           
            { if(value === 'Primary')
                {
            // do CSS stuff here...
                    field.element.css({'background-color':'#c6e28e','min-height':'10px', 'padding': '0px 0px 0px 0px','border-radius': '4px', 'color': '#000000'});
                }    }

See video
https://docs.google.com/file/d/0B409lhd9sYDcVU5qa19ETkZLalk/edit
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
A custom field renderer should do the trick.  Something like this:

// phoneFieldRenderer.js
var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var row = field.row;
switch (field.mode) {
    case 'edit':
        skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, value);
        break;
    case 'read':
    case 'readonly':
        var cellElem = field.element;
        var isPrimary = row.Is_Primary__c;
        if (isPrimary && isPrimary === 'Primary') {
            cellElem.css('background-color', '#c6e28e');
        }
        skuid.ui.fieldRenderers[field.metadata.displaytype].read(field, value)
        break;
}
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Thanks Irvin,

So, if the field name "Primary_Sequence__c" is the one I am looking for "Primary" and the field I want change to red is "Phone_Number_Stacked__c"

What would the code look like?
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Try this:

// phoneStackedFieldRenderer.js                                                  // (Phone_Number_Stacked__c)                                                                 
var $ = skuid.$;
var field = arguments[0];
var value = arguments[1];
var row = field.row;
switch (field.mode) {
    case 'edit':
        skuid.ui.fieldRenderers[field.metadata.displaytype].edit(field, value);
        break;
    case 'read':
    case 'readonly':
        var cellElem = field.element;
        var primarySequence = row.Primary_Sequence__c;
        if (primarySequence && primarySequence === 'Primary') {
            cellElem.css('background-color', '#c6e28e');
        }
        skuid.ui.fieldRenderPrimary_Sequence__cadata.displaytype].read(field, value)
        break;
}
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Almost.  
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Bill, I hacked this together in the world's greatest IDE, Notepad :).  Add a semi-colon at the end of the error line, like this:

skuid.ui.fieldRenderPrimary_Sequence__cadata.displaytype].read(field, value);
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Thanks Irvin
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
I have copied the code into JS and still seem to get the error.  I must admit I am not a Java person and do everything with as little scripting as possible.  This is my second script.  Can you see why this is happening?
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Yup, a few more bugs in Irvin's code.  We don't hold it against him.   Below just corrects the syntax: 

skuid.ui.fieldRender[Primary_Sequence__c.data.displaytype].read(field, value);
But you might also try:
skuid.ui.fieldRender[field.metadata.displaytype].read(field, value);
Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Sorry Bill. Was rushing and trying to edit with the Community inline editor. Oh well, guilty as charged.

Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Beggars can't be choosy Thanks!
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Getting Closer.  The snippet had no errors but the snippets breaks the page.
https://docs.google.com/file/d/0B409lhd9sYDcQ3BQTTBMRGo1OWc/edit?pli=1

Photo of Irvin Waldman

Irvin Waldman, Champion

  • 9,006 Points 5k badge 2x thumb
Open Chrome developer tools and see what sort of errors we're getting.
Photo of Bill Fox

Bill Fox

  • 7,924 Points 5k badge 2x thumb
Not sure how to use the google developer tools.