Global Field Renderer Overrides for Individual Fields

  • 1
  • Problem
  • Updated 3 years ago
This is a continuation of this other thread, but I'm reposting because I'm in a hurry and the other thread was marked 'Answered' for some reason.

Simplified use case:

Everywhere the ui finds a picklist field called Primary_Phone_Type__c, run a custom field renderer snippet called "renderPhoneTypes"
Everywhere the ui finds a picklist field called STD__c, run a custom field renderer called "renderSTDs"
Etc.

I have an inline static resource which includes this code:
// Get references to our original picklist field renderers
var fieldRenderers = skuid.ui.fieldRenderers; 
var PICKLIST = fieldRenderers.PICKLIST;
// My custom Phone field renderer
var checkPicklistRenderer = function(field, value) {
//Object as switch statement
var globalPickFields = {
'Case_Type__c': 'renderCaseTypes',
'Primary_Phone_Type__c': 'renderPhoneTypes',
'Alternate_Phone_Type__c': 'renderPhoneTypes',
'Interaction_Intention__c': 'renderPregnancyIntentions',
'Pregnancy_Intention__c': 'renderPregnancyIntentions',
'Pregnancy_Intention_on_Intake__c': 'renderPregnancyIntentions',
'Father_of_the_Baby_Intention__c': 'renderPregnancyIntentions',
'Role__c': 'renderStaffRoles',
'Primary_Staff_Role__c': 'renderStaffRoles',
'Additional_Staff_Role__c': 'renderStaffRoles',
'STD__c': 'renderSTDs',
'Sexual_Exposure_to_What_STD__c' : 'renderSTDs',
'STD_Picklist': 'renderSTDs',
'Referral_Source__c': 'renderReferralSources',
'Results__c': 'renderPregnancyTestResults',
};
// If the field is one of the global picklist fields, run the snippet for it
if (globalPickFields[field.id]){
skuid.snippet.getSnippet(globalPickFields[field.id])(field,value);
//*** PROBLEM : when snippets attempt to call standard renderer in edit mode 
// they get this checkPicklistRenderer again. Infinite loop.
} else { //Otherwise run the standard renderer
PICKLIST[field.mode](field,value);
//*** PROBLEM : infinite loop
  }
};
   // Override all of Skuid's standard Picklist field renderers to call our custom renderer
   PICKLIST.edit = function(){
       checkPicklistRenderer.apply(this,arguments);
   };
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Barry Schnell

Barry Schnell, Champion

  • 18,086 Points 10k badge 2x thumb
Hey Matt -

Your encountering an infinite loop because in your override of PICKLIST.edit you are calling your custom renderer which then calls PICKLIST so while in edit mode, it will then call your custom renderer again, etc.

What you need to do here is store off the original PICKLIST object in a variable, override PICKLIST and then when you need to call the original PICKLIST, use your variable that contains the original PICKLIST renderer.

Something like:

var origPhoneEdit = fieldRenderers.PICKLIST.edit;

Then in your custom renderer, call the following instead of PICKLIST[field.mode](field, value)

origPhoneEdit.apply(this, arguments);
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Makes sense.

I've been puzzling over "How can I access the original renderer after I've overridden it?"

Store it as a variable, of course!

Thanks, Barry!