Question

CSS not saving to laserfiche

Forms

Updated June 27, 2017

asked on June 19, 2017 • Show version history

Good day all.

I have a form that changes the row color based on values entered. If either value entered is larger than the other value entered, the row color changes. The problem is that the color does not show in the next approval step. it only shows when the user submits the form. The color also does not appear on the form when it is saved to the repository.

here is the code :

$(document).ready(function() {
  
setTimeout(function(){
$('body').addClass('loaded');  
}, 3000);

$('.cf-table-block').on('blur', 'input', highlight);

function highlight(){
    $('.cf-table-block tbody tr').each(function(){
          
			var t1 = 0;
			var t2 = 0;
			
			t1 = parseNumber($(this).find('.requested input').val());
			t2 = parseNumber($(this).find('.allowed input').val());
			
			if (t1 > t2) {
				$(this).closest('tr').css("background", "LightGrey");
           
			}
			else if (t2 < t1){
				$(this).closest('tr').css("background", "LightGrey");
              
			}

			else if (t1 == t2)
            {
				$(this).closest('tr').css("background", "none");
			}
		});
     }
  
	 function parseNumber(n){
     var f = parseFloat(n);
     return isNaN(f) ? 0 : f;
	 }
});

Any help will be greatly appreciated.

0 0

Answer

SELECTED ANSWER

replied on June 19, 2017 • Show version history

Hi Claudette,

In your script, the highlight function is triggered on "blur", which is an event sent to an element when it loses focus. On approval step, when value is populated on form load, the blur event is not triggered so the function is not triggered. On file save to repository, the form would be transformed to read-only form so there is no "input" element on form, and you won't get filled value with input.

To trigger color change on form load, call highlight() function directly inside document ready;

To trigger color change on read-only form, add the following when read t1/t2:

if ($('[name=IsLocked]').val() == 'True')
{
    t1 = parseNumber($(this).find('.requested .ro').text());
    t2 = parseNumber($(this).find('.allowed .ro').text());
}

Besides, the two branches "if (t1 > t2)", "else if (t2 < t1) " are the same, so as a result there is no color change for t1 < t2 on form load. I guess it should be "if (t1 != t2)"?

0 0

replied on June 23, 2017

hi thank you so much for the help.

Please can you tell me where exactly i should add that this code ?

Because i added it but it does not work.

0 0

replied on June 25, 2017

The entire script would look like this (same for all forms):

$(document).ready(function() {
  
setTimeout(function(){
$('body').addClass('loaded');  
}, 3000);

highlight();
$('.cf-table-block').on('blur', 'input', highlight);

function highlight(){
    $('.cf-table-block tbody tr').each(function(){
          
			var t1 = 0;
			var t2 = 0;
			
			t1 = parseNumber($(this).find('.requested input').val());
			t2 = parseNumber($(this).find('.allowed input').val());
			if ($('[name=IsLocked]').val() == 'True')
			{
				t1 = parseNumber($(this).find('.requested .ro').text());
				t2 = parseNumber($(this).find('.allowed .ro').text());
			}			
			if (t1 > t2) {
				$(this).closest('tr').css("background", "LightGrey");
           
			}
			else if (t1 < t2){
				$(this).closest('tr').css("background", "LightGrey");
              
			}

			else if (t1 == t2)
            {
				$(this).closest('tr').css("background", "none");
			}
		});
     }
  
	 function parseNumber(n){
     var f = parseFloat(n);
     return isNaN(f) ? 0 : f;
	 }
});

0 0

replied on June 27, 2017

Thank you so much for your help Rui.

Much appreciated.

0 0

Replies

replied on June 19, 2017 • Show version history

You've added the code you posted to the CSS on both forms, and not just the first one?

0 0

replied on June 22, 2017

Yes i did. it is on both of the forms.

0 0

replied on June 22, 2017 • Show version history

Claudette,

After reading more closely, I can provide an answer for the second part of the issue.

The color also does not appear on the form when it is saved to the repository.

Style/formatting changes made with JavaScript are not saved to the form (in the repository) because JavaScript doesn't appear to execute when the pages or pdf are generated.

Custom CSS will show on the document saved to the repository, but programmatic changes will not, and unfortunately, I don't know any straightforward way around that issue.

0 0

replied on June 23, 2017

Thank you for the insight Jason.

Much appreciated.

0 0

replied on June 22, 2017

i am still struggling with this issue. i have two forms. here is the code for the first form :

$(document).ready(function() {
  
$('.cf-table-block').on('blur', 'input', highlight);

function highlight(){
    $('.cf-table-block tbody tr').each(function(){
          
			var t1 = 0;
			var t2 = 0;
			
			t1 = parseNumber($(this).find('.requested input').val());
			t2 = parseNumber($(this).find('.allowed input').val());
      
			if ($('[name=IsLocked]').val() == 'True')
            {
            t1 = parseNumber($(this).find('.requested .ro').text());
            t2 = parseNumber($(this).find('.allowed .ro').text());
            }
			else if (t1 > t2) {
				$(this).closest('tr').css("background", "LightGrey");
           
			}
			else if (t2 < t1){
				$(this).closest('tr').css("background", "LightGrey");
              
			}

			else if (t1 == t2)
            {
				$(this).closest('tr').css("background", "none");
			}
		});
     }
  
	 function parseNumber(n){
     var f = parseFloat(n);
     return isNaN(f) ? 0 : f;
	 }
});

here is my code on the second form :

$(document).ready(function() {
  
//setTimeout(function(){
//$('body').addClass('loaded');  
//}, 3000);

//$('.cf-table-block').on('blur', 'input', highlight);

function highlight(){
    $('.cf-table-block tbody tr').each(function(){
          
			var t1 = 0;
			var t2 = 0;
			
			t1 = parseNumber($(this).find('.requested input').val());
			t2 = parseNumber($(this).find('.allowed input').val());
			
      if ($('[name=IsLocked]').val() == 'True')
      {
         t1 = parseNumber($(this).find('.requested .ro').text());
         t2 = parseNumber($(this).find('.allowed .ro').text());
      }
			else if (t1 > t2) {
				$(this).closest('tr').css("background", "LightGrey");
           
			}
			else if (t2 < t1){
				$(this).closest('tr').css("background", "LightGrey");
              
			}

			else if (t1 == t2)
            {
				$(this).closest('tr').css("background", "none");
			}
		});
     }
  
	 function parseNumber(n){
     var f = parseFloat(n);
     return isNaN(f) ? 0 : f;
	 }
});

The color is still not showing on the review form and it also doesn't save on the repository.

Any more suggestions Please ?

0 0

You are not allowed to follow up in this post.

Question

Question

CSS not saving to laserfiche

Answer

Replies

Sign in to reply to this post.