You are viewing limited content. For full access, please sign in.

Question

Question

CSS Via Javascript Not Saving to Laserfiche

Forms Web Customizations
Updated July 27, 2016
asked on July 27, 2016

I have a form that has a collection that includes the ability for the approver to approve or reject each row in the collection individually.  Based on what they pick it updates the row color to green if approved and red if rejected.  

 

This part is working great during the actual approval process however the color changes are not being shown when viewing the previous instances or when it is saved to Laserfiche.  Here is an example of a submitted form that properly showed the row as red when it was rejected but does not show that color when viewing the instance via Instances or My History.

 

And here is what it looks like in Laserfiche where it also does not show the proper row color.

 

Here is my code where collection is the class for the collection and approved is the class for the approval dropdown.  By the way, a big thanks to Scott Wilson for helping with the code to make the color change!

$(document).ready(function () {
  	$('.collection').on('blur', 'select', colorchange);
  	$('.collection').on('click', colorchange);
  	$('.collection').on('change', colorchange);
    $('.cf-collection-append form-q').on('click', colorchange);  
  	colorchange();
  
	function colorchange(){
      	$('.cf-collection-block ul').each(function () {
        	$(this).find('.approved select').each(function () {
              switch($(this).val()){
                case "Approved":
                  $(this).closest('div.form-q').css('background-color','#ccffcc');
                  break;
                case "Rejected":
                  $(this).closest('div.form-q').css('background-color','#ffcccc');
                  break;
                default:
                  $(this).closest('div.form-q').css('background-color','transparent');
                  break;
            	}
        	});
		});
	}
  
});

 

0 0

Answer

APPROVED ANSWER SELECTED ANSWER
replied on July 27, 2016 • Show version history

Hi Beau,

The issue has to do with how the saved form is rendered. It replaces the select values and places them in a div, meaning that your second each loop never gets run.  Just add this code after. 

function colorchange(){
  $('.cf-collection-block ul').each(function () {
    $(this).find('.approved select').each(function () {
        switch($(this).val()){
          case "Approved":
            $(this).closest('div.form-q').css('background-color','#ccffcc');
            break;
          case "Rejected":
            $(this).closest('div.form-q').css('background-color','#ffcccc');
            break;
          default:
            $(this).closest('div.form-q').css('background-color','transparent');
            break;
        }
    });

    $(this).find('.approved div div').each(function () {     
      switch($(this).text()){
        case "Approved":
          $(this).closest('div.form-q').css('background-color','#ccffcc');
          break;
        case "Rejected":
          $(this).closest('div.form-q').css('background-color','#ffcccc');
          break;
        default:
          $(this).closest('div.form-q').css('background-color','transparent');
          break;
      }
    });

  });
}
3 0
replied on July 27, 2016

Thanks a ton.  That took care of it working during approval, viewing it afterwards via My Tasks, and once it was saved to Laserfiche.  I appreciate the quick help!!!

0 0

Replies

You are not allowed to reply in this post.
replied on September 13, 2017 • Show version history

What if you have just one field you want to save a background color in, not in a table, not in a collection...say the field is #q5.  How would you reference it in javascript.  These methods are not working for me, I have version 10.1.  The only way I can save a background color in a field is with the class already set in the Forms layout page.  If I set the class dynamically on submit, which is what I need to do, it says the class is set if I post an alert as it submits with the className, but it does NOT save the color to Laserfiche.  Seems crazy that it takes a page of coding to save one color to the repository, isn't there an easier way to do this???

replied on September 15, 2017 • Show version history

I'm trying to save a simple field to the repository with a background color.  This works if the color is static, but when I make it a selection as referenced here in a simple text box to change the color if the word 'ok' is entered, it won't save it to the repository using the methods described here.  Any idea why this won't work?

 

$(document).ready(function(){
  
  $('#q1 input').change(function(){
    var x = $('#q1 input').val();
    
    if (x == "ok"){
     $('#q1').addClass('yellowBackground');
     }
    else {
     $('#q1').removeClass('yellowBackground');
     }
});
  
  $('.Submit').click(function(){
    
    $('#q1 input').text();
  });
  
});

Here is the CSS:

.yellowBackground input, .yellowBackground div[type="text"] {background-color:#FFBF00 !important;
color:white !important;
font-weight:bold !important;}

 

replied on September 19, 2017

Any users know the answer to this?

You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...