Conditional formatting

[marcwenger]

I'd like to apply a specific CSS formatting to a form object if a certain javascript condition is true (example: make text appear red if "due date" is less than or equal to "current date"). What is the best way to do this in SPForm?


Great product!

[Dmitry Kozlov]

If you want to add this functionality to Display form only, I can recommend you to use Forms Designer rules with user-defined condition. If you want to make form dynamic, highlight due date field while user changes it on Edit form, please, use our JS-framework.

[marcwenger]

Hi Dmitry,

I am trying to make the form more dynamic (uch as if the due date contains a value, change background colour to red). Would the JS be something along the lines of:

Code: Select all

fd.field('DueDateField').control()._el().find('input').style().backgroundColor('red'); 

?

regards,

-m

[Dmitry Kozlov]

Hello, sorry for the delay. I can recommend you to define CSS class in Forms Designer's CSS editor. Example:

Code: Select all

.highlighted {
  background-color: red;
}

Next, you can add it to your form fields:

Code: Select all

fd.field('End').control()._el().addClass('highlighted');

[marcwenger]

Thank you!

[meirinha]

how to highlight only the field?

i use the code but all the line turn red

[Dmitry Kozlov]

Please, try the following CSS code:

Code: Select all

.highlighted input {
  background-color: red;
}

[craigwat11]

Hi, regarding the above thread -

I want to amend the input background color of all fields on my form, your code works for standard text input fields but doesn't seem to work for fields like people picker and content type,

Code: Select all

.highlighted input {
  background-color: red;
} 

Do you knwo what i'm doing wrong?

Ta
Craig

[Dmitry Kozlov]

Hello,

I have extended the previous code to support Content Type and People Picker columns:

Code: Select all

.highlighted input,
.highlighted select,
.highlighted .ms-inputuserfield
{
  background-color: red !important; 
} 

[kjoeandy]

I want to hide the entire ribbon for the edit form when a condition is met, I am finding is hard implementing the CSS with the javascript.. Here is my script:

var status = fd.field('Test Status').value();
if (status == 'Completed') {
//hide the ribbon.
}


I know I can add the following CSS to the CSS editor and that would work but it hides the ribbon regardless of the status. How can I add the CSS to the script above to achieve my result, any help is appreciated.

#s4-ribbonrow
{
display: none;
}