Page 1 of 2
Conditional formatting
Posted: 10 Jan 2014
by 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!
Re: Conditional formatting
Posted: 13 Jan 2014
by 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.
Re: Conditional formatting
Posted: 13 Jan 2014
by 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
Re: Conditional formatting
Posted: 15 Jan 2014
by 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');
Re: Conditional formatting
Posted: 15 Jan 2014
by marcwenger
Thank you!
Re: Conditional formatting
Posted: 16 Jan 2014
by meirinha
how to highlight only the field?
i use the code but all the line turn red
Re: Conditional formatting
Posted: 17 Jan 2014
by Dmitry Kozlov
Please, try the following CSS code:
Code: Select all
.highlighted input {
background-color: red;
}
Re: Conditional formatting
Posted: 25 Apr 2014
by 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
Re: Conditional formatting
Posted: 28 Apr 2014
by 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;
}
Re: Conditional formatting
Posted: 13 Jun 2014
by 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;
}