Queue Row Color

  • 3
  • Question
  • Updated 5 years ago
  • Answered
Hi there,

We have a field on our events object called IsBehind__c.  It determines if we are behind on one of several steps we have to accomplish when we plan events.  Is there a way to conditionally change a row in a queue so that it appears with a red background and white text if IsBehind__c = "Yes" for that record?

Thanks!

Photo of abfleis

abfleis

  • 392 Points 250 badge 2x thumb

Posted 5 years ago

  • 3
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes this is absolutely possible. To do it, you need to define a Queue Item Render Snippet that will conditionally add a CSS class to a row in a Queue if it meets your conditional criteria --- e.g. here, if the row's "IsBehind__c" field = "Yes".

For our example, we'll use an Accounts Queue, and we'll conditionally make a red background for a row if that row has field Industry = "Education", will look like this:



So here goes!

1. Add a new CSS Resource of type "Inline" to define the red-background CSS class you'll be applying conditionally to items in your queue:



Paste the following into the CSS Resource Body:
.highlighted-queue-item {
   background-color: red;
}

2. Add a new JavaScript Resource of type Inline (Snippet) called "queueItemRenderer" that will define the Item Renderer for your Queue --- what will be shown for each Item in the Queue. Paste in the following, modifying only the line 



var params = arguments[0],    
    el = params.element,
    item = params.item,
    row = item.row,
    model = params.model,
   $ = skuid.$;
var displayTemplate = '{{{'+skuid.utils.getNameField(model.objectName)+'}}}';
// Uncomment this line if you want to have a Custom Display Template.
// displayTemplate = '{{{Subject}}} - {{{Status}}}';
el.append(
    model.mergeRow(row,displayTemplate)
);
// Define any conditional logic here
if (model.getFieldValue(row,'IsBehind__c',true) === 'Yes') {
    el.addClass('highlighted-queue-item');
}

3. Go to your Queue component, and go to the Item Display properties, then change Item Renderer Type to be Snippet and Render Snippet to be "queueItemRenderer":



4. Save your page, and preview!


Photo of David Forder

David Forder

  • 2,144 Points 2k badge 2x thumb
Can this also apply to the table component somehow?

Photo of abfleis

abfleis

  • 392 Points 250 badge 2x thumb
Alright!  Much appreciated as usual.