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

Question

Question

LFForm.onFieldBlur for table elements

asked on April 10, 2023 Show version history

I have a table element with two fields, name and email, as shown below.

and, of course, it has the '+ Add' link to add rows to the table. What I am trying to do is the capitalize the Name field for each row. The below line will capitalize the initial row, but no others. 

LFForm.onFieldBlur(function () { LFForm.setFieldValues({fieldId: 322}, toCapitalize(LFForm.getFieldValues({fieldId: 322}))) }, {fieldId: 322});

 

Below is the JavaScript:

And below is the field numbering:

Question is: How do you address each row of the first column in a table, so that, I can run the capitalize function? Also, how do you know the number of rows in the table so that I could maybe use a foreach method?

One other question: Would this be the same for a collection?
 

0 0

Answer

SELECTED ANSWER
replied on April 11, 2023

It should just be looping through each field on the table to subscribe to the event, and when the blur happens, it updates every field of that ID (so every field in the table is updated every time that any field in that column of the table is updated).  You can confirm that the loop isn't happening too much if you add something like     console.log('test');     within it, then check the console and you'll see that it is only triggering at the expected time period.

If you wanted to be able to re-use the code for multiple fields, then we can wrap most of that code in a function block, and then just call the function with the desired field ID numbers, like this:  

//Call the function for all of the needed fields (by fieldID Number).
AddCapitalizeOnBlur(2);
AddCapitalizeOnBlur(3);
AddCapitalizeOnBlur(4);
AddCapitalizeOnBlur(5);

//Function to add the toCapitalize functionality to any field.
//You just need to pass in the field ID Number.
function AddCapitalizeOnBlur(fieldIDNumber)
{
  
  //Retrieve all fields with that indicated ID.
  var myFields = LFForm.findFieldsByFieldId(fieldIDNumber);
  
  //Loop through all fields with the indicated ID and 
  //add an onFieldBlur listener.
  myFields.forEach(function (arrayItem) {
    
    LFForm.onFieldBlur(function(){
      
      //Retrieve all values from the field(s) in the table.
      var newValues = LFForm.getFieldValues(arrayItem);
      
      //Loop through all field values if 2 or more were found,
      //and call the toCapitalize function.
      if(newValues.constructor === Array) {
        for (var i = 0; i < newValues.length; i++) {
          newValues[i] = toCapitalize(newValues[i]);
        }
      }
      
      //Otherwise call the toCapitalize on the single string value.
      else {
        newValues = toCapitalize(newValues);
      }
      
      //Return the updated array of field values back to the table.
      LFForm.setFieldValues({fieldId: fieldIDNumber}, newValues);
      
    }, arrayItem);   //End of LFForm.onFieldBlur...
    
  });   //End of myFields.forEach...
  
}   //End of function AddCapitalizeOnBlur(fieldIDNumber)...

//Function to capitalize the first letter of each
//word in a string.
function toCapitalize (maniptxt) {
  var arr = new Array();
  arr = maniptxt.split(" ");
  for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }
  return arr.join(" ");
}

 

In that example, I'm adding the functionality to field IDs 2, 3, 4, and 5 (the first several lines of code) by calling the function 4 times and passing in each ID.  You can see in this screenshot (I wrote everything entirely in lower case) that it is working for fields 2 and 3 in the table, and for fields 4 and 5 outside the table:

0 0

Replies

replied on April 10, 2023

It's complicated by the fact that when you have a single row in the table, LFForm.getFieldValues will return a string, but when there are two or more rows, it will return an array (which is where the code as you have it written breaks down).  So we need to ensure that all fields in the table have the Blur event code added to them, and we need to determine whether or not the value lookup is returning a string or an array and handle it accordingly.

I have this working on Version 11.0.2212.30907: 

//Set the field ID for use later.
var fieldIDNumber = 322;

//Retrieve all fields with that indicated ID.
var myFields = LFForm.findFieldsByFieldId(fieldIDNumber);

//Loop through all fields with the indicated ID and 
//add an onFieldBlur listener.
myFields.forEach(function (arrayItem) {
  
  LFForm.onFieldBlur(function(){
    
    //Retrieve all values from the field(s) in the table.
    var newValues = LFForm.getFieldValues(arrayItem);
    
    //Loop through all field values if 2 or more were found,
    //and call the toCapitalize function.
    if(newValues.constructor === Array) {
      for (var i = 0; i < newValues.length; i++) {
        newValues[i] = toCapitalize(newValues[i]);
      }
    }
    
    //Otherwise call the toCapitalize on the single string value.
    else {
      newValues = toCapitalize(newValues);
    }
    
    //Return the updated array of field values back to the table.
    LFForm.setFieldValues({fieldId: fieldIDNumber}, newValues);
    
  }, arrayItem);   //End of LFForm.onFieldBlur...
  
});   //End of myFields.forEach...

//Function to capitalize the first letter of each
//word in a string.
function toCapitalize (maniptxt) {
  var arr = new Array();
  arr = maniptxt.split(" ");
  for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }
  return arr.join(" ");
}

 

0 0
replied on April 11, 2023

Matthew,

Could I make this a function and then call it for each table or collection, and would I use the onFieldBlur to call it? This part confuses me; because, there is an onFieldBlur in the function at that point. Would it be a continuous loop kind of issue?

0 0
SELECTED ANSWER
replied on April 11, 2023

It should just be looping through each field on the table to subscribe to the event, and when the blur happens, it updates every field of that ID (so every field in the table is updated every time that any field in that column of the table is updated).  You can confirm that the loop isn't happening too much if you add something like     console.log('test');     within it, then check the console and you'll see that it is only triggering at the expected time period.

If you wanted to be able to re-use the code for multiple fields, then we can wrap most of that code in a function block, and then just call the function with the desired field ID numbers, like this:  

//Call the function for all of the needed fields (by fieldID Number).
AddCapitalizeOnBlur(2);
AddCapitalizeOnBlur(3);
AddCapitalizeOnBlur(4);
AddCapitalizeOnBlur(5);

//Function to add the toCapitalize functionality to any field.
//You just need to pass in the field ID Number.
function AddCapitalizeOnBlur(fieldIDNumber)
{
  
  //Retrieve all fields with that indicated ID.
  var myFields = LFForm.findFieldsByFieldId(fieldIDNumber);
  
  //Loop through all fields with the indicated ID and 
  //add an onFieldBlur listener.
  myFields.forEach(function (arrayItem) {
    
    LFForm.onFieldBlur(function(){
      
      //Retrieve all values from the field(s) in the table.
      var newValues = LFForm.getFieldValues(arrayItem);
      
      //Loop through all field values if 2 or more were found,
      //and call the toCapitalize function.
      if(newValues.constructor === Array) {
        for (var i = 0; i < newValues.length; i++) {
          newValues[i] = toCapitalize(newValues[i]);
        }
      }
      
      //Otherwise call the toCapitalize on the single string value.
      else {
        newValues = toCapitalize(newValues);
      }
      
      //Return the updated array of field values back to the table.
      LFForm.setFieldValues({fieldId: fieldIDNumber}, newValues);
      
    }, arrayItem);   //End of LFForm.onFieldBlur...
    
  });   //End of myFields.forEach...
  
}   //End of function AddCapitalizeOnBlur(fieldIDNumber)...

//Function to capitalize the first letter of each
//word in a string.
function toCapitalize (maniptxt) {
  var arr = new Array();
  arr = maniptxt.split(" ");
  for (var i = 0; i < arr.length; i++) {
    arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1);
  }
  return arr.join(" ");
}

 

In that example, I'm adding the functionality to field IDs 2, 3, 4, and 5 (the first several lines of code) by calling the function 4 times and passing in each ID.  You can see in this screenshot (I wrote everything entirely in lower case) that it is working for fields 2 and 3 in the table, and for fields 4 and 5 outside the table:

0 0
replied on April 11, 2023

Awesome.

I was overthinking the onFieldBlur issue. I though I would have to call the function like this:

LFForm.onFieldBlur(AddCapitalizeOnBlur (LFForm.getFieldValues({fieldId: 10})));

This object stuff kills me. I an old top down programmer.

Thank you Matthew. :)
 

1 0
replied on April 11, 2023

I totally understand the feeling.  And five years of experience writing Javascript for the Classic Designer is proving to be only mildly helpful in the New Designer.

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

Sign in to reply to this post.