How to trigger changes and refresh editors?

  • 2
  • Question
  • Updated 5 years ago
So I have a scenario where I change a couple of fields on the Opportunity object from a related list: a row action will update the amount of the oppourtunity. I have that working the issue is that the change is not shown in the main field editor. If I go up to the field and click the pen it shows the right value and if I navigate away from it the change displays correctly. How can I trigger the editor to refresh after I have made the change?

This is the code I use to change the value:
<code>

var params = arguments[0];
var quote = params.item.row;
var quotes = params.model;
var newAmount = quotes.getFieldValue(quote, 'Grand_Total__c');

var opportunity = skuid.model.getModel('Opportunity');
opportunity.updateRow(opportunity.getFirstRow(), 'Amount', newAmount);
Photo of William Sporrong

William Sporrong

  • 396 Points 250 badge 2x thumb

Posted 5 years ago

  • 2
Photo of Zach McElrath

Zach McElrath, Employee

  • 48,984 Points 20k badge 2x thumb
Skuid Tables and Field Editors both internally use the skuid.ui.List component, each of which has a collection of rendered Items (for Field Editors, there's usually only one Item), corresponding to each Row in the Model that the List is iterating over. Each Item has a set of Fields.

Skuid Lists register themselves on Models. However, they do not (at present) separately register each individual Item / Field. But you can get at each child Item / Field by examining each List registered on a Model.

So, to re-render any Field elements within a Skuid Table or Field Editor, you will need to access the Lists registered on their associated Models, and then, depending on how "localized" you want your "re-rendering" to be, you can do one of several things:

1. Rerender the entire List.
2. Rerender all Fields on each Item in a List (more efficient than 1 if you don't need to recreate Row Actions / Table Navigation, etc.).
3. Rerender particular Field(s) in each Item (more efficient than 2)

IN your case, I would recommend doing 3 --- finding skuid.ui.Field object children of each skuid.ui.List's child skuid.ui.Items, and, if the Field is associated with the "Amount" field, re-rendering just that skuid.ui.Field. This is the most reliable, most-performant re-rendering scenario. Here's how you'd do it, modifying your code:



<code>
var params = arguments[0];
var quote = params.item.row;
var quotes = params.model;
var newAmount = quotes.getFieldValue(quote, 'Grand_Total__c');
var opportunity = skuid.model.getModel('Opportunity');
opportunity.updateRow(opportunity.getFirstRow(), 'Amount', newAmount);

// Re-render any skuid Ui elements associated with the 'Amount' field
var $ = skuid.$;
$.each(opportunity.registeredLists,function(){
$.each(this.renderedItems,function(){
$.each(this.fields,function(){
if (this.id === 'Amount') this.render();
});
});
});