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;
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!
Table highlighting/Un-Highlighting without having to query model
+1
+17Could 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?
+1So 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;
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.
+17You 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.
+1Now 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.
+17what 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
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.