Jump to content

Move values from multiple Calculated Values to the multiple editable fields

Recommended Posts

I would like to share a code that moves values from multiple Calculated Values to editable fields that are set up as 'Text Field'.


For example, there is a Submission Form where some values should be calculated or retrieved from a different table. 

But at the same time, these values must be editable, so the end-user can change them if needed. 

So, we have pre-populated fields with dynamically calculated values and the user can change them. 

In this example, I need to pre-populate the Company_Name field, Email, and Percentage.


Link to comment
Share on other sites

1) First of all, the values are calculated/retrieved in the Virtual fields and the Form element for them is "Calculated Value". 

2) The Virtual fields are hidden by checking the 'Hide field' checkbox on the Advanced tab.


3) In the Footer section this code can be used (please disable the HTML editor on the Advanced tab before pasting it).

document.addEventListener('DataPageReady', assignValuesHandler);

  function assignValuesHandler() {

    //The list of Virtual fields

    const virtualFields = '[name="cbParamVirtual1"], [name="cbParamVirtual2"], [name="cbParamVirtual3"]'; 

    //Each editable field is stored in a separate variable 

    const company = document.querySelector('[name="InsertRecordCompany_Name"]'); 
    const email = document.querySelector('[name="InsertRecordEmail"]');
    const percentage = document.querySelector('[name="InsertRecordPercentage"]');

    //Variables created above are stored in the array

    const editableFields = [company, email, percentage];

     //Function that assigns values

    document.querySelectorAll(virtualFields).forEach((virtual, index) => 
      virtual.addEventListener('change', (event) => {
        editableFields[index].value = virtual.value;
  document.removeEventListener('DataPageReady', assignValuesHandler);

The parts of the code that should be customized:

  • the list of the Virtual fields in the 'virtualFields' variable;
  • the list of the editable fields: the logic is to create a separate variable for each field and to select the corresponding field. 

              On the Submission Form the syntax is  document.querySelector('[name="InsertRecordField_Name"]'), where Field_Name  is your field name.

  • the list of editable fields in the 'editableFields' variable.

The important point is the order of the fields in the 'virtualFields ' and  'editableFields' variables.

The values will be mapped, so the order matters. In this example the value from Virtual1 will be copied to the Company_Name field, the value from Virtual2 will be copied to the Email field, and the value from Virtual3 will be copied to the Percentage field.



The output:



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...