How do I remove required field styling

There are 2 approaches I can think of to remove the styling:

1. Create a generic Custom Field Renderer Snippet called something like “RemoveRequired” on these fields whose only purpose is to remove the .required class from the Field’s elements. Here’s what this Snippet would look like:

var field = arguments[0],
   value = skuid.utils.decodeHTML(arguments[1]);
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;
setTimeout(function(){
   field.element.removeClass(‘required’);    
},1);

Then use this Custom Field Renderer for all of these fields.

I’d recommend this approach.

2. Override the required field styling using CSS. This is going to be difficult because you’ll have to make the CSS even more selective than Skuid’s default rules.

NOTE: I just modified the snippet, turns out that the required class is currently to the field element after the renderer is run, making it impossible to remove this class without using waiting until the next pass of the event loop with setTimeout(), but this approach will work consistently. 

How do I make it a picklist?

Ugh, that’s true, for Reference fields that you want to be picklists you’d have to have a separate snippet called “ReferenceFieldAsPicklist_RemoveRequired” or something like that, which would look like this:


var field = arguments[0],
   value = skuid.utils.decodeHTML(arguments[1]);
field.options.type = ‘REFPICK’;
skuid.ui.fieldRenderers[field.metadata.displaytype]field.mode;
field.options.type = ‘CUSTOM’;
setTimeout(function(){
   field.element.removeClass(‘required’);    
},1);

Why do we have to declare both REFPICK and CUSTOM?

You have to declare REFPICK so that the Reference field renders as a Picklist, then you have to reset it to CUSTOM so that your custom renderer will be run the next time, rather than the regular Reference-Picklist renderer. If you don’t reset it, your Required styling will “come back” the next time you go into Edit mode.