Conditional formatting

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

• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 8 months 16 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.

  link flag
• marcwenger

  Member

  Member for: 9 years 5 months 19 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

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 8 months 16 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');
  

  link flag
• marcwenger

  Member

  Member for: 9 years 5 months 19 days
  #4 by marcwenger Jan 15 ’14 at 02:26

  Thank you!

  link flag
• meirinha

  Member

  Member for: 9 years 4 months 22 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

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 8 months 16 days
  #6 by Dmitry Kozlov Jan 17 ’14 at 03:15

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

  .highlighted input {
    background-color: red;
  } 
  

  link flag
• craigwat11

  Member

  Member for: 9 years 2 months 30 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 
  

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 8 months 16 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; 
  } 
  

  link flag
• kjoeandy

  Member

  Member for: 8 years 11 months 25 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;
  }

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 8 months 16 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();
  }
  

  link flag

Show more messages