spark: custom renderer to make field required fails

bump

Interesting… let me try to reproduce. v2? v1? both?

Is there a reason that you are using Javascript to mark the fields required instead of doing this declaratively and using logic to show / hide conditionally rendered fields? (Something cool that I just learned, since I’ve been away for a while, is that conditionally rendered fields marked required are only required when they are shown to the user, not when they are hidden… which makes sense, but is low-key awesome)

v1.

I have to render with Javascript (at least, I think that’s the easiest way) because I have a separate object for settings that the users input, and I’m rendering fields based on the settings data. Users can either make each of the fields hidden, shown, or required. Rather than set up each individual field’s rendering conditions, I’ve written a single renderer in javascript which can handle all the fields, finding the correct setting field based on a field naming convention (i.e. Field__c and Setting_Field__c).

Yeah, sounds like it makes sense to use the Javascript in that case, especially if it’s more granular (individual fields with different settings, rather than a block of fields you want to show/hide uniformly based on that user input). 

Do you mind sharing a simplified version of the snippet here so I can repro it and log the issue?

Here’s an abbreviated version of the inline javascript. Every field is using the renderSCH snippet as the custom rendering snippet.

// Custom Scheduling Form Renderers
(function (skuid){
//////////////////////////////////////////////
//Shortcuts, Variables & Functions //
//////////////////////////////////////////////
var $ = skuid.$,
$s = skuid.snippet.getSnippet,
SCH_defaults; 
var getSCH_Defaults = function(){
var model = skuid.$M(‘SchedulingCustom_Defaults’) || skuid.$M(‘Defaults’);
return model && model.getFirstRow();
};

var onFunction = function(field,value){
skuid.ui.getFieldRenderer(field,field.metadata.displaytype)field.mode;
},
offFunction = function(field,value){
field.wrapperElement.hide();
},
requiredFunction = function(field,value){
field.required = true;
field.element.addClass(‘required’);
skuid.ui.getFieldRenderer(field,field.metadata.displaytype)field.mode;
};
var renderActions = {
‘On’: onFunction,
‘Off’: offFunction,
‘Required’: requiredFunction
};
//////////////////////////////////////////////
//Snippets //
//////////////////////////////////////////////
var snippets = {
renderSCH : function(field,value){
value = skuid.utils.decodeHTML(value);
if (!SCH_defaults) SCH_defaults = getSCH_Defaults();
var action = SCH_defaults[‘SCH_’+field.id] || ‘On’;
renderActionsaction;
}
};
//////////////////////////////////////////////
//Register Snippets //
//////////////////////////////////////////////
$.each(snippets,function(name,func){ skuid.snippet.registerSnippet(name,func); });
})(skuid);

Thanks, I’ll take a look and let you know what I figure out.

Any progress?

Progress update: I asked for eyes from someone better versed in Javascript than me.

Matt, I’d recommend using the skuid.ui.List “addRequiredField()” API (https://docs.skuid.com/latest/en/skuid/api/skuid_ui.html#skuid.ui.List.addRequiredField) to conditionally make the field required. The approach you’re taking, modifying field.required directly, does not register a required field with the Field Editor’s associated skuid.ui.List, so when you go to save the associated Model, it will not know that a given skuid.ui.Field should be treated as required and its inputs validated accordingly.

So from within a custom field renderer, you could do this:

if (fieldShouldBeRequired) {
   field.item.list.addRequiredField(field);
}```

NOTE: I modified the above slightly, to get the list for a field you have to go through its item

field.item.list —> gives you access to the skuid.ui.List

Thanks, Zach!

Perfect! Thanks.

Hi Team! A few issues that we’re having with this approach…

If a field made required by this approach is subsequently hidden by rendering conditions, the model/list still views it as required.

Also (but less significantly), field.item.list.addRequiredField(field) apparently does not add the “required” class to the field itself, so we need to include field.element.addClass(‘required’) in the code;