I am using the jquery library.

How would I reference the field by it's class name 'test', in your example your using the field's ID which is not something we can access in the field properties or share amongst multiple fields.

I am not sure if we can target the class name yet. I see that we can find fields by their name but I couldn't see how to do anything else.

Javascript in the Forms Designer (laserfiche.com)

Oh I am not using that language, the new designer still supports javascript and in my case I also have the jquery library plugged in.

I would like to stick to common languages, I am just wondering why my simple code does not work. The input exists.

Modern form custom script runs in a different scope than the form so if you use console.log($('.test input')) in script it would return no result.

Do you mean that the modern form javascript has no access to the elements on the form?

What good would that be?

The modern form JavaScript has access to the elements on the form, but does not have access to the rest of the DOM.

I thought elements exist within the DOM. What does this mean for programming features into Forms? Is there a guide somewhere?

This document is of no help because it is not javascript, it is a proprietary language with no resource for someone to learn it, discuss it, or manipulate it to meet goals.

https://doc.laserfiche.com/laserfiche.documentation/11/administration/en-us/Default.htm#../Subsystems/Forms/Content/Javascript-and-CSS/JavaScript-in-the-Forms-Designer.htm?TocPath=Forms%257CCreating%2520a%2520Form%257C_____9

I talked with a modern form developer about this question and here is her reply:

Modern form elements are controlled by Angular and cannot be altered with external scripts like jQuery, so even if people have access to it, Angular will eventually overwrite the changes. Also randomly changing stuff on the form might breaks things.

We have offered the LFForm API so people could change whatever they want with the data, and we will eventually have custom components that allow people to have full control of their elements inside the custom component.

If you have a partical use case that could not be achived with custom APIs and field rule expansions (and other out of box functions), please tell us and we would consider expanding the API to handle more use cases, thanks!

There are thousands of use cases but my current use case is that I would like to total all columns in a large table of many columns.

Here is how I would do this using jquery:

$(document).ready(function() {
  $('.tableFields input').on('change',function(){
      
        // Find the last row of the table
        var $lastRow = $('table tr:last');

  // Loop through each column of the table
    $('table tr').each(function() {
    $(this).find('td input').each(function(index) {
      // Calculate the sum of values in each column
      if (isNaN(parseFloat($lastRow.find('td input').eq(index).val()))) {
        $lastRow.find('td input').eq(index).val(0);
      }
      var columnSum = parseFloat($lastRow.find('td input').eq(index).val()) + parseFloat($(this).val());

      // Update the last row of the table with the sum
      $lastRow.find('td input').eq(index).val(columnSum.toFixed(2));
    });
  });

});
  
});

This can be achived with current APIs, but need to be rewritten to use field id to find fields like this:

var cachedValueString; //cache field values
var tableFieldId = 3;
LFForm.onFieldChange(function(){
  var fieldValues = LFForm.getFieldValues({fieldId: tableFieldId});
  fieldValues = fieldValues.slice(0, fieldValues.length - 1);
  if (cachedValueString != JSON.stringify(fieldValues)) {
    var newSum = 0;
    for (var index = 0; index < fieldValues.length; index++) {
      if (fieldValues[index]) {
        newSum += parseFloat(fieldValues[index]);
	  }
    }
    var lastRowIndex = fieldValues.length;
    LFForm.setFieldValues({fieldId: tableFieldId, index: lastRowIndex}, newSum);
	
    cachedValueString = JSON.stringify(fieldValues);
  }
}, {fieldId: tableFieldId})

Also if your form need to handle adding/deleting row in table, that need to be updated to use the new APIs as well.

This form does not need to handle any add/delete, but I put this code in the code window and change the tableFieldID variable to be equal to my table ID. I don't get any errors but it does not calculate.

This is why I need to learn the language. I can't just copy and paste instructions that I don't understand and always expect it to work perfectly, it is best if I know what I am telling the computer to do.

So is this the Angular language? Is my only problem that I am using javascript & jquery which is what the old designer requires and I need to switch to Angular?

The code you write and add to the form is Javascript code, and you can add the JQuery library if you want (it isn't included by default).

But the only access that is available to the form components is via the LFForm object.  Functionally, the New Designer is set-up so that the scripts we add to the form are running within a sandboxed iFrame, so it can't directly access any of the components of the form/window/document/DOM structure.  It has to be routed through the LFForm object.

Most of the code examples that have been posted to this site over the years are in the Classic Designer, which accesses the form components directly, so they won't work in the New Designer.

Cool, sounds simple enough.

So given this logic, I referenced the documentation of the LFForm object and tried to re-write my original post's method. Still no errors in the console and no output.

$(document).ready(function(){
  
  LFForm.onFieldChange(function(){
    
    console.log('a');
    
  },LFForm.findFieldsByClassName('test'));
  
});

So the document ready event isn't needed in the new designer.  So just do the three lines in the middle. 

Then, the onFieldChange code is expecting a single field to be passed to it, and findFieldsByClassName is returning an array of fields.

We need to tweak it to reference a specific field within the array, or loop through all fields in the array.

This version will reference the first field in the array, so the change event listener is only applied to the very first field with the test class:

LFForm.onFieldChange(function(){
  console.log('a');
},LFForm.findFieldsByClassName('test')[0]);

This version will loop through all the fields in the array, so the change event listener is applied to every field with the test class:

var myFields = LFForm.findFieldsByClassName('test');
myFields.forEach(function (arrayItem) {
  LFForm.onFieldChange(function(){
    console.log('a');
  },arrayItem);
});

Hi Chad,

I just started playing with the JS in teh new form desgner as well.  I can tell you the new JS does not need the $(document).ready(function() { }

I would like to run the function for a change made on the field(s) with the class name 'test'. This is a common real world need since the person designing the form is less likely to also be a coder but still needs to be able to add fields which make use of custom features coded by a coder.

I tried your code in the second example and it does write to the console so that is further than I have gotten, but not what I expected it to write. It is writing the text 'a' on keyup and on blur, not on change. So for every change to a field I end up with 'a' written twice.

Here is my goal:

When the user changes the value of any input field with the class name 'test' write the text 'a' to the console.

Here is how I would do this using jquery:

$('.test input').on('change',function(){ console.log('a'); });

I do see in the documentation that the method your using says it "subscribes to the change event", but I don't see that happening.