Have run out of HTML space in the Footer - need help

[Lynda]

Let me preface this post - I AM NOT A JAVA OR HTML PROGRAMMER

I have a solution where I am copying Virtual calculated fields to table fields in the Footer section of the Add page. I also do this on the Edit page.

I have MANY calculated virtual fields.  54 to be exact. They are VERY complicated Add/Edit pages, and are the center of my application.

The problem I am having is that in the Footer section of my page, I have reached the 10,000 char limit, and cannot transfer the remaining fields.

The code that I use to transfer one field is:

document.addEventListener('DataPageReady', function (event) {
  
document.getElementsByName('cbParamVirtual47')[0].addEventListener("change", calcValueHandler); // Vegetables Weekly 
   
      function calcValueHandler(event) {
   
          let calcFieldValue = event.target.value;
          const editableField = document.getElementById('InsertRecordFGVegetablesWeekly');
          editableField.value = calcFieldValue;
     
          document.removeEventListener('DataPageReady', calcValueHandler);
     }        
});

There are two values that I change each time I copy and paste the code. The Virtual field (in red above) and the InsertRecord field (also in red above)

Is there a way that I can pass the two values and then call a routine?

I don't know how to do this.

Lynda

[CoopperBackpack]

Hello @Lynda,

Could you please specify if you add the same piece of code 54 times in the Footer? 
So, the difference between the pieces of code is the Virtual field number and the real field name. Is it correct? 

[Lynda]

Cooper,

That is correct. I add the code snippet below 54 times. The only thing that changes each time is the Virtual field number and the real field name.

Lynda

CODE SNIPPET:

document.addEventListener('DataPageReady', function (event) {
  
document.getElementsByName('cbParamVirtual47')[0].addEventListener("change", calcValueHandler); // Vegetables Weekly 
   
      function calcValueHandler(event) {
   
          let calcFieldValue = event.target.value;
          const editableField = document.getElementById('InsertRecordFGVegetablesWeekly');
          editableField.value = calcFieldValue;
     
          document.removeEventListener('DataPageReady', calcValueHandler);
     }        
});

[CoopperBackpack]

Hello @Lynda,

You may try to use another approach instead.

I tested a universal code that should work for Submission form, Single Record Update form,  and Details DataPage.

As far as I understand, the Virtual fields are all set as Calculated Value and are hidden on your DataPage and all the table fields that are populated by the script are set as 'Text Field' Form elements.

Also, I assume that you have other table fields on the DataPage that are used as Dropdowns, Text Fields, etc.

If so, you may try the test the following code:

<script>
document.addEventListener('DataPageReady', function (event) {
  
  const allVitualFields = document.querySelectorAll('input[id^="cbParamVirtual"]');
  const ids = ['#InsertRecordTableField_1', '#InsertRecordTableField_2', '#InsertRecordTableField_3']; // list the input fields that must be populated with the corresponding calculated values)

   allVitualFields.forEach((virtual, index) => virtual.addEventListener("change",  
     function(event) {
    
       const editableField = document.querySelector(ids[index]);
       editableField.value = event.target.value;   

      })
  )
});
</script>

 

The only change in the code you need to apply is the ids variable.

It must list the table field names in the same order as the virtual fields are listed. 

For example, I have a Submission form with 3 Virtual fields. The value from the Virtual1 I want to add to the TableField_1 field, the value calculated in Virtual2 I want to add to the TableField_2 field, etc. In this case, the code I pasted above should work. 

The order of Virtual fields on the DataPage is: Virtual1, Virtual2, Virtual3

So, the order of the table fields is corresponding in the 'ids' variable:  ['#InsertRecordTableField_1',  '#InsertRecordTableField_2',  '#InsertRecordTableField_3']

If it is the Single Record Update form or Details DataPage the syntax should be, for example: 

 const ids = ['#EditRecordTableField_1', '#EditRecordTableField_2', '#EditRecordTableField_3'];

 

But if your DataPage consists of 54 Virtual fields that are set as Calculated Values and 54 table fields that are set as Text fields, there is no need to list the ids.

You may use the following code in that case:

<script>
document.addEventListener('DataPageReady', function (event) {
  
  const allVitualFields = document.querySelectorAll('input[id^="cbParamVirtual"]');
  
  const ids = document.querySelectorAll('input[id*="InsertRecord"]');


   allVitualFields.forEach((virtual, index) => virtual.addEventListener("change",  
     function(event) {
       let editableField = ids[index];
       editableField.value = event.target.value;   
      })
  )
});
</script>

If it is the Single Record Update form or Details DataPage the syntax should be, for example: 

const ids = document.querySelectorAll('input[id*="EditRecord"]');

 

Fell free to update the thread if you have further questions. 

[Lynda]

Coopper,

"As far as I understand, the Virtual fields are all set as Calculated Value and are hidden on your DataPage and all the table fields that are populated by the script are set as 'Text Field' Form elements."

A  third of the form is a mix of fields that are "normal" input fields. A few virtual fields are used to hold calculated values based on what the user has selected and entered to be used in later calculations. (There are 14 virtual calculations or held values).

I told you this was a complicated form

The middle third of the form is dynamic. When the user selects the Diet Plan, Two things happen:

1. Baseline values for the Diet Plan are calculated using the users, sex, weight, height, age, a percentage of their calories, a standard value, or zero if it's a custom plan. This calculation is applied independently for each nutrient type (there are 9). Each Diet Plan defines how to calculate this. Everything is recalculated if they select another Diet Plan, or if they change any one of the variables (sex, weight, height, or age).  Once it's calculated, the calculated values are moved to the various table fields, i.e. TableField_Calories. The virtual field numbers are NOT sequential, but are sequentialy listed.
2. Nine Food Group Categories are added from the selected Diet Plan. Each Category consists of two dropdown fields and two text fields.  Because the fields have to be editable, I have to use virtual fields, call the Diet table (SELECT DietFGGrainsDaily_Qual FROM Diet WHERE DietID = [@field:Diet]), and then move the virtual field to the TableField_FGGrainsDaily_Qual so that the user can accept the value or modify it. This happens 36 times with 36 virtual fields and 36 table fields being used. The virtual field numbers are NOT sequential, but are sequentialy listed.

I have thought about splitting the Diet off from the Profile, but have calculated that I will have the same problem.  IT IS CENTRAL TO MY APPLICATION.

I could split the Food Groups off from the Profile, and have the user take the defaults on Add. They could then Edit them later, but I don't know how to add an Add / Edit button to my Edit page or make a page pop-up that would handle the Food Groups.

I appreciate all of your time and efforts. I really do. I am at a loss.

Lynda