Force field to rerender

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Is it possible to force a field to re-render in a snippet?

Here's the use case:

We have two datetime fields, Out Date and In Date. The In Date shouldn't be before the Out Date. We have a field renderer on In Date that prevents the user from selecting a date in the datepicker that is before the out date:

var field = arguments[0],	
value = arguments[1];
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
if (field.mode==='edit'){ if (field.row.CheetahBMS__Out_Date__c !== undefined){ var dateInput = field.element.find('input.hasDatepicker'); dateInput.datepicker("option","defaultDate",skuid.time.parseSFDate( field.row.CheetahBMS__Out_Date__c )); dateInput.datepicker("option","minDate",skuid.time.parseSFDate( field.row.CheetahBMS__Out_Date__c )); dateInput.datepicker("refresh"); } }
This works when you just edit the In Date. However, if you edit the Out Date, it does not rerender the In Date and you are able to choose a date that is before the Out Date. My theory is I should be able to run a snippet when the Out Date is changed, rerendering the In Date, keeping the entire line in edit mode. 

I've used this:  

skuid.$C('progresstable').render();

to rerender an entire table before, but I'm not sure how to re-render just a field.
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
There are a number of ways to achieve this, here is one way:

1. Add a Model Action to your Model with Initiating Event: "Row in Model Updated" and "When which fields are updated?" set to Out Date.
2. For the Actions, have it run a snippet called something like "UpdateInDateFieldWhenOutDateChanged" with a body like this:


var FIELD_TO_RERENDER = 'CheetahBMS__In_Date__c';

var params = arguments[0],
   row = params.row,
   model = params.model,
   $ = skuid.$,
   fieldsByRow = model.registeredFieldsByRowThenField,
   uiFields;
    
if (fieldsByRow && fieldsByRow[row.Id]) {
    uiFields = fieldsByRow[row.Id][fieldToRerender];
    if (uiFields && skuid.utils.size(uiFields)) {
        $.each(uiFields,function(){
            this.render(); 
        });
    }
}
Photo of Craig Rosenbaum

Craig Rosenbaum

  • 4,776 Points 4k badge 2x thumb
Awesome, thanks Zach. It is very helpful to see how to grab the correct field.

For anyone trying to replicate this, you need to make sure that your variable names are the same. Zach uses  "FIELD_TO_RERENDER" and "fieldToRerender" but you need to make them both the same.