Table highlighting/Un-Highlighting without having to query model

  • 1
  • Question
  • Updated 2 years ago
I currently have a table that highlights a row based on the value of a field (checkbox). The user can modify the value of that field with a row action that checks/unchecks the box. The javascript used on my table is

var field = arguments[0];var value1 = arguments[1];
var row = field.row;
var value2 = row.Action_Required__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1); 

if ((field.mode == 'readonly') && (value2 === true))

{ field.item.element.addClass("LeadTab_highlighted-row");}


the CSS to highlight the row is

table.nx-skootable-data tbody tr.LeadTab_highlighted-row td
{background-color: LightCoral;}


My row action is
1. Update Field to True
2. Save Model: Opportunity

When the user clicks the row action, the row is highlighted lightcoral and works as intended.
Then there is another row action that
1. Updates Field to False
2. Save Model: Opportunity

This row action doesn't un-highlight the row and stays red unless I refresh the page. Currently, I have it set to re-query the model (step 3) which solves my issue but it does slow down the process of unhighlighting a bit. Is there a way to have to get the row to un-highlight without having to query the model again?

I couldn't find the thread where I got the JS and CSS for table highlighting but thank you for everyone's help!
Photo of Victor Wong

Victor Wong

  • 156 Points 100 badge 2x thumb

Posted 2 years ago

  • 1
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
Could you add another CSS class where the row is not highlighted, then add another if statement to the JavaScript that activates the second CSS class if the field is false?
Photo of Victor Wong

Victor Wong

  • 156 Points 100 badge 2x thumb
So I made another CSS class to make the background yellow if the field value is false (it should be white but I can't tell if it does anything if I have it as white)

My snippet is below. I don't know JS at all and am writing based on what I see in the community and some googling. So please correct me if it is wrong.

var field = arguments[0];var value1 = arguments[1];
var row = field.row;
var value2 = row.Action_Required__c;

skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value1); 

if ((field.mode == 'readonly') && (value2 === true))



field.item.element.addClass("LeadTab_highlighted-row");

}

else 
{field.item.element.addClass("LeadTab_unhighlighted-row");}


The result when I remove the re-query on the row action is the background just stays yellow even if I flag the value as True. If i refresh the page, then the row with the value=True, turns Red. I click the row action again to make value = False and it unhighlights/changes to yellow without having to refresh or re-query.
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
You have:
if ((field.mode == 'readonly') && (value2 === true))

Maybe the read only is causing a problem????
Try
If (value2 == true)

Also, you might try two separate Java snippets run by two separate actions on the row action button. The first to check if true and Marks one color, then a separate one that checks for false and marks another color.

I don't write code, so I'm not a great resource for this kind of thing.
Photo of Victor Wong

Victor Wong

  • 156 Points 100 badge 2x thumb
Now it's running into the first scenario where it will highlight red but not un-highlight unless re-queried or the page is refreshed.  Not sure why it would highlight without a query but need to be queried to un-highlight. I tried it without readonly as well as leaving readonly in the snippet. 
Photo of Skuidward Tentacles (Raymond)

Skuidward Tentacles (Raymond), Champion

  • 17,224 Points 10k badge 2x thumb
what about writing the Java as a snippet and then calling the snippet as part of your action sequence?
Row actions:
1) update field
2) save model
3) run snippet that highlights