Queue Row Color

Questions
,
1

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!

2

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 {<br>&nbsp; &nbsp;background-color: red;<br>}


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


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!


3

Alright!  Much appreciated as usual.

4

Can this also apply to the table component somehow?

5

David you probably want to check out this thread:  https://community.skuid.com/t/can-i-highlight-the-background-of-a-cell-in-a-table