How do I remove required field styling

  • 1
  • Question
  • Updated 4 years ago
  • Answered
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 4 years ago

  • 1
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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](field,value);
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.
(Edited)
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
How do I make it a picklist?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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,value);
field.options.type = 'CUSTOM';
setTimeout(function(){
   field.element.removeClass('required');    
},1);
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Why do we have to declare both REFPICK and CUSTOM?
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
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.