How to get the handle of an input field of a field editor in skuid to add CSS class conditionally in javascript ?

  • 1
  • Question
  • Updated 2 years ago
  • Answered
Hi,

I have a scenario where I would have to add a specific CSS to an input field conditionally .

How can we get the access of input fields of a field editor ( I haven't found anything like uniqueID on field properties for a field ) in javascript snippet to add CSS class ?
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
a few ways to do this. The easiest is probably a custom field renderer, like this:

var $ = skuid.$, field=arguments[0], value=arguments[1];

if (SOME CONDITION){
field.element.addClass('myCSSclass');
}
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb
Hey Matt,

Thanks for your quick response!

But what I am trying to achieve here is , I have a button "Submit" , when a user click on this , this would  make a call to some APEX remote function to validate the address entered , if I get success response , I have to add green checkmarks  for these fields to show user this field is having corrected address value, if not add error mark to field to show it's having incorrect address value.

For such cases, how could I get to access that field and add those CSS dynamically.

Appreciate your help!
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
KVin,

A couple ways to handle this. Perhaps the easiest is to just add a class to your field in the builder. For example, give your field a class called 'test-class'. Then you could run javascript like this to select the DOM element for that field and add another class to it:

skuid.$('.test-class').removeClass('error-mark-class').addClass('green-checkmark-class');