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

Question

Question

How best to highlight a changed Form field?

Forms Version 10
Updated September 18, 2024
asked on January 28, 2018 • Show version history

Hi guys,

We have a form with a lot of fields that are populated by lookups.  If any of the returned fields are then changed on the form, we want the fields to be highlighted for when the form is submitted to the repository so that users can see at a glance which fields were changed, rather than having to compare the current form to a previous form.  I had a look at this post where the field background changes colour if the content is changed, but not as a result of the initial lookup, and it works well, however, the colour changes if the user tabs through the field (that's been returned from a lookup) without making any changes to the field.

Is there another way we can achieve this?

Thanks,

Mike

0 0

Replies

replied on January 29, 2018 • Show version history

Hi Mike,

I need to say that to meet the requirement the actual logic is much more complicated that just changing a CSS on the frontend:

Since the field color need to be changed on file saved to repository, it must save to backend which fields have been changed on frontend; and in case user changed the field value back to lookup result, frontend need to compare lookup results with current values on field value change. 

Here is a piece of code that meet the above logic. You need to add a single line field with class 'SaveChangedFields' on the form for saving changed fields. I tested it work for lookup filling single field and filling new row, but can't guarantee it work on your form since field type/lookup rules might be different:

$(document).ready(function(){
  var changeFieldList = [];
  
  if ($('input[name=IsLocked]').val()=='True') {
    //Form is read-only, read value from SaveChangedFields
    var saveChangedFields = $('.SaveChangedFields .cf-field').text().split(',');
    if (saveChangedFields.length > 0) {
      _.each(saveChangedFields, function(field){
        $("#"+field.replace('(','\\(').replace(')','\\)')).css('background','#ffff99');
      });
    }      
  } else {
    //Form is not read-only
    $('#form1').on('change', CheckFieldUpdate);
  }
  
  
  function CheckFieldUpdate(e) {
    var targetFieldId = $(e.target).attr('id');
    var targetFieldTopId = parseInt(targetFieldId.match(/^Field(\d+)/)[1]);
    var lookupCache = _.last(_.filter(LF.lookup.cache, ['id', targetFieldTopId]));
    if (lookupCache) {
      //Lookup has single value or no value on this field
      if (lookupCache.value.length <= 1) {
        CheckIfChanged($(e.target),lookupCache.value.length == 1 ? lookupCache.value[0] : "");
      } else {
        if (lookupCache.expandColTable) {
          //Lookup fill as new rows
          var targetFieldSubId = parseInt(targetFieldId.match(/^Field\d+\((\d+)\)/)[1]);
          CheckIfChanged($(e.target),lookupCache.value.length >= targetFieldSubId ? lookupCache.value[targetFieldSubId-1] : "");
        }
      }
    }
  }
  
  function CheckIfChanged(element, lookupVal) {
    var targetFieldId = element.attr('id');
    if (lookupVal != element.val()) {
      element.css('background','#ffff99');
      if (changeFieldList.indexOf(targetFieldId) == -1) {
        changeFieldList.push(targetFieldId);
        $('.SaveChangedFields input').val(changeFieldList.join(','));
      }
    } else {
      element.css('background','#ffffff');
      if (changeFieldList.indexOf(targetFieldId) > -1) {
        _.remove(changeFieldList, function(n){return n == targetFieldId});
        $('.SaveChangedFields input').val(changeFieldList.join(','));
      }
    }
  }
});

 

0 0
View 5 previous replies
replied on February 13, 2018

Sorry for the late reply Rui, I hadn't seen this until just now.  Thanks very much for your response, I'll do some testing with your code and see if I can get it to work.

0 0
replied on December 2, 2020 • Show version history

Hi Rui, 

I tested the code it is working.

Please assist with how to change for drop down, date, and radio button fields.

Thanks

0 0
replied on December 2, 2020

Hi Reneilwe, the code worked for drop down and date field. As for radio button, it won't work because we don't support fill radio button field with lookup rules, and the code is designed to show field changes after being populated by lookup rule.

1 0
replied on March 16, 2022

Hi, 

The JS works on the initials form where the editing is done. However, i want the colors to stay on the next form after initial submission to inform the next user of which fields were changed. The code was edited to this on the next form but doesn't retain the color of the edited fields from the previous form. Any help?

$(document).ready(function(){
  var changeFieldList = [];
    
  var saveChangedFields = $('.SaveChangedFields .cf-field').text().split(',');
    if (saveChangedFields.length > 0) {
      _.each(saveChangedFields, function(field){
        $("#"+field.replace('(','\\(').replace(')','\\)')).css('background','#ffff99');
      });
    } 
 
  
  
  function CheckFieldUpdate(e) {
    var targetFieldId = $(e.target).attr('id');
    var targetFieldTopId = parseInt(targetFieldId.match(/^Field(\d+)/)[1]);
    var lookupCache = _.last(_.filter(LF.lookup.cache, ['id', targetFieldTopId]));
    if (lookupCache) {
      //Lookup has single value or no value on this field
      if (lookupCache.value.length <= 1) {
        CheckIfChanged($(e.target),lookupCache.value.length == 1 ? lookupCache.value[0] : "");
      } else {
        if (lookupCache.expandColTable) {
          //Lookup fill as new rows
          var targetFieldSubId = parseInt(targetFieldId.match(/^Field\d+\((\d+)\)/)[1]);
          CheckIfChanged($(e.target),lookupCache.value.length >= targetFieldSubId ? lookupCache.value[targetFieldSubId-1] : "");
        }
      }
    }
  }
  
  function CheckIfChanged(element, lookupVal) {
    var targetFieldId = element.attr('id');
    if (lookupVal != element.val()) {
      element.css('background','#ffff99');
      if (changeFieldList.indexOf(targetFieldId) == -1) {
        changeFieldList.push(targetFieldId);
        $('.SaveChangedFields input').val(changeFieldList.join(','));
      }
    } else {
      element.css('background','#ffffff');
      if (changeFieldList.indexOf(targetFieldId) > -1) {
        _.remove(changeFieldList, function(n){return n == targetFieldId});
        $('.SaveChangedFields input').val(changeFieldList.join(','));
      }
    }
  }
});

 

0 0
replied on July 12, 2022

Can anyone help please?

0 0
replied on August 14, 2024

Any chance you figured this out I am wanting to implement the same thing?

0 0
replied on September 4, 2024

I believe you need to call the function that changes the colors after the form loads. Right now the form is preloaded with the variables that were saved from the initial submission. So there is no lookup happening. Does that make sense?

0 0
replied on September 18, 2024

Yes, I understand what you are saying.

Eventually I did get a working solution, but my use case was slightly different. If any value in a table changed that field would need to be highlighted and remain highlighted when the form was assigned to the next user.

0 0
replied on January 4, 2019 • Show version history

Hi,

How do I change a read-only field within a table to a yellow background on change?

 

$(document).ready(function(){
  $('.cf-table-block').on('change', 'input', changeColor);
  function changeColor () {
    if ($('#q299(1) input').val() != '') {
      $('#q299(1) input').css('currentAge','#ffff99');
    }
    else {
      $('#q299(1) input').css('currentAge','none');
    }     
  }
});

 

on change, the border turns pink (not yellow) and you can no longer see the content inside the field?

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.

Details
Related Posts
Loading ...