Conditional formatting

rss

Posted by marcwenger - Jan 10 ’14 at 08:10

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
    Dmitry Kozlov
    Admin
    Member for: 6 years 22 days
    #1 by Dmitry Kozlov Jan 13 ’14 at 02:58

    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
    Member
    Member for: 5 years 9 months 25 days
    #2 by marcwenger Jan 13 ’14 at 01:58

    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:

     

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

    regards,

    -m

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 22 days
    #3 by Dmitry Kozlov Jan 15 ’14 at 12:01

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

    .highlighted {
      background-color: red;
    }
    

    Next, you can add it to your form fields:

    fd.field('End').control()._el().addClass('highlighted');
    
  • marcwenger
    Member
    Member for: 5 years 9 months 25 days
    #4 by marcwenger Jan 15 ’14 at 02:26

    Thank you!

  • meirinha
    Member
    Member for: 5 years 8 months 27 days
    #5 by meirinha Jan 16 ’14 at 11:35

    [#4]: how to highlight only the field?

    i use the code but all the line turn red

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 22 days
    #6 by Dmitry Kozlov Jan 17 ’14 at 03:15

    [#5]: Please, try the following CSS code:

    .highlighted input {
      background-color: red;
    } 
    
  • craigwat11
    Member
    Member for: 5 years 7 months 5 days
    #7 by craigwat11 Apr 25 ’14 at 08:58

    [#6]: 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,

    .highlighted input {
      background-color: red;
    } 

    Do you knwo what i'm doing wrong?

    Ta
    Craig
  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 22 days
    #8 by Dmitry Kozlov Apr 28 ’14 at 01:32

    [#7]: Hello,

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

    .highlighted input,
    .highlighted select,
    .highlighted .ms-inputuserfield
    {
      background-color: red !important; 
    } 
    
  • kjoeandy
    Member
    Member for: 5 years 4 months 2 days
    #9 by kjoeandy Jun 13 ’14 at 10:47

    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;
    }

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 22 days
    #10 by Dmitry Kozlov Jun 15 ’14 at 07:46

    [#9]: Hi,

    Please, try the code below:

    var status = fd.field('Test Status').value();
    if (status == 'Completed') {
      $('#s4-ribbonrow').hide();
    } else {
      $('#s4-ribbonrow').show();
    }
    
Displaying 1 to 10 of 10 messages