Skip to main content
Nintex Community Menu Bar
Question

Queue Row Color

  • July 9, 2024
  • 4 replies
  • 15 views

Forum|alt.badge.img+3

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!

This topic has been closed for replies.

4 replies

Forum|alt.badge.img+13

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!



Forum|alt.badge.img+3
  • Author
  • 16 replies
  • July 9, 2024

Alright!  Much appreciated as usual.


Forum|alt.badge.img+8
  • Novice
  • 137 replies
  • July 9, 2024

Can this also apply to the table component somehow?


Forum|alt.badge.img+9