I’m rendering fields with javascript, and in some cases (depending on user input elsewhere), rendering them as required.
In Broolyn, this worked:
field.required = true;
field.element.addClass(‘required’);
In Spark, the fields appear to be required (adding the class works), and the field metadata includes required=true. But the model does not trigger a warning if it is saved with the required fields empty.
Marking fields as required in skuid directly (not via the custom js field renderer) works as expected.
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.
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
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;
