Conditiona Rendering and save issue in Skuid

  • 1
  • Question
  • Updated 4 years ago
  • Answered
I am facing one issue in Skuid conditional rendering and want to know if there is simple workaround for this in Skuid. When the component (e.g. field, tab) hides based on some defined render condition and if user has already entered the data in them before hiding..then what happens is data gets saved to SF record when the save button is clicked. Actually those hidden fields should be blank on the detail record when it is saved. Can you please let me know how I can accomplish this in Skuid? Do I need to customize the save button? Is there a point-and-click way? Thanks in advance!
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb

Posted 4 years ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
There is probably a way in javascript.

Would be nice to get the option to reset field values to their original state if hidden due to conditional rendering.
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
I think only way forward is to create custom javascript save button. Pls let me know if my understanding is not correct. Anyone has examples for such Skuid button ?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,704 Points 20k badge 2x thumb
Unless there is a method to detect which fields are hidden, then you'd have to recreate the conditional rendering results in javascript in order to know which are hidden. I as well would like to know the answer to this.

Best way forward would certainly be to have conditional rendering also automatically reset the values upon the hiding fields.
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb

I completely agree!! Thanks..!

Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
I think this is very common scenario and feel Skuid should address this issue on priority. The reason I started building Skuid pages for my client is because of conditional rendering feature it provides but did not know that it has this issue.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
Tan,

The reason why this is problematic to implement in Skuid is that you could technically have multiple input / output fields associated to a Model data field, so Skuid can't automatically "know" that it should clear data in fields when they are hidden, as this may not be desired behavior. 

We understand that this is an issue though, and are considering adding a "Clear data in field when hidden" option at the field level, which would accomodate this. 

In the meantime, this is achievable via JavaScript fairly easily.

You could implement this from a custom Save button, or you could have it happen immediately whenever an affected field's value is changed.

Here is sample JavaScript that you can use to clear values in hidden fields immediately when the values in certain fields are set to certain values. 

(a) This should be added as a JavaScript Resource with Resource Location "Inline"
(b) Here is the resource body:

(function(skuid){
   var $ = skuid.$;
   $(function(){
       
      var myModel = skuid.model.getModel('Case');
      var myRow = myModel.getFirstRow();
      
      var fieldsToClearByValueByField = {
          'Status': {
              'New': ['New_Sub_Status__c','AccountId','ContactId'],
              'Working': ['Working_Sub_Status__c','Description','AccountId','ContactId','Priority']
          },
          'Boolean_Field_1__c':{
              false: ['Boolean_Field_2__c','Secondary_Field__c']
          },
          'Boolean_Field_2__c':{
              false: ['Secondary_Field__c']
          }
      };
      
      skuid.events.subscribe('row.updated',function(changeInfo){
          if (myRow.Id===changeInfo.rowId){
              $.each(changeInfo.updates,function(fieldId,newValue){
                 var clearings = fieldsToClearByValueByField[fieldId];
                 if (clearings){
                     var fieldsToClear = clearings[newValue];
                     if (fieldsToClear){
                         var updates = {};
                        $.each(fieldsToClear,function(i,fieldToClear){
                            updates[fieldToClear]=null;
                        }); 
                        if (skuid.utils.size(updates)){
                            myModel.updateRow(myRow,updates);
                        }
                     }
                 }
              });
          }
      });
      
   });
})(skuid);

Some explanation here:

Where you will be making changes is to fieldsToClearByValueByField. Basically at the top level of this object we are saying, "When these fields are changed..." (e.g. when "Status" is changed, or when "Boolean_Field_1__c" is changed), then at the 2nd level we are saying, "If the field has been changed to this value" (e.g. when "Status has been changed to 'Working', then", or when "Boolean_Field_1__c" has been changed to false), and at the 3rd level we are saying "Go clear the values of all of these fields" (e.g. when Boolean_Field_1__c has been changed to false, go clear the values of Boolean_FIeld_2__c and Secondary_Field__c). 
Photo of TJ

TJ

  • 952 Points 500 badge 2x thumb
Thanks Zach for detailed reply! I think better way is to implement custom save button rather than immediate field value clearing. This way, user can still toggle between field hides and retain already eneterd values before clicking on save. However, all the values should be cleared for hidden fields when the save button is clicked. It would be really helpful for me if you can give me examples of such custom save button. Thanks again!
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,004 Points 20k badge 2x thumb
TJ,

Here is an example of a custom Save Snippet that would do this:

var params = arguments[0];
var model = params.model;
var row = params.row;
var $ = skuid.$;
var fieldsToClearByValueByField = {
'Status': {
'New': ['New_Sub_Status__c','AccountId','ContactId'],
'Working': ['Working_Sub_Status__c','Description','AccountId','ContactId','Priority']
},
'Boolean_Field_1__c':{
false: ['Boolean_Field_2__c','Secondary_Field__c']
},
'Boolean_Field_2__c':{
false: ['Secondary_Field__c']
}
};
var updates = {};
$.each(model.changes[row.Id],function(fieldId,newValue){
   var clearings = fieldsToClearByValueByField[fieldId];
   if (clearings){
  var fieldsToClear = clearings[newValue];
  if (fieldsToClear){
  $.each(fieldsToClear,function(i,fieldToClear){
  updates[fieldToClear]=null;
  }); 
  }
   }
});
if (skuid.utils.size(rowUpdates)){
model.updateRow(row,rowUpdates);
}
model.save();