Modern Designer Javascript; Dynamically populating rows based on hidden field value

asked on July 9

I'm testing JavaScript in the modern Forms designer. The following script mostly works:\

et lastFieldValue = null;

LFForm.onFieldChange(() => {
const fieldValues = LFForm.getFieldValues({ fieldId: 51 });

// Check if the field value has changed since the last time a row was added
if (fieldValues[0] !== lastFieldValue) {
LFForm.addRow({ variableName: "tbl_perDiem" }, fieldValues);
lastFieldValue = fieldValues[0]; // Update the last field value
}
}, { fieldId: 51 });

I have two date fields and a hidden field (fieldId: 51) that calculates the date difference of my two date fields. This value is used to populate the correct number of rows in my table based on the number of days of a trip.

Currently, any change to the hidden field value adds that number of rows to the existing rows, I would like to add logic that clears existing rows in the table and repopulates it with the correct number of rows based on the updated hidden field value. Is that possible in the modern designer? Any suggestions would be appreciated

Example of what I'm seeing:

First attempt is correct

Updating date range results in too many rows:

0 0

SELECTED ANSWER

replied on July 9 • Show version history

Two things here, double check the documentation because the addRow function returns a promise that you are not awaiting. Fortunately you are not performing any actions with the form after invoking this, but for sanity of your code, I would add it. I actually wrote a generic "updateTableRows" helper function that takes a table fieldId and automatically updates the table to the new row count. I added it to the top of your code, and fixed your code to use it properly.

const updateTableRows = async (tableFieldId, rowCount) => {
  const currentTableFieldValues = LFForm.getFieldValues(tableFieldId);
  const curRowCount = currentTableFieldValues.length;

  if (curRowCount < rowCount) {
    await LFForm.addRow(tableFieldId, rowCount - curRowCount);
  } else if (curRowCount > rowCount) {
    await LFForm.deleteRow(
      tableFieldId,
      ...Array.from(Array(curRowCount - rowCount)).map(
        (_, i) => curRowCount - i - 1
      )
    );
  }
};

let lastFieldValue = null;

LFForm.onFieldChange(
  async () => {
    const fieldValues = LFForm.getFieldValues({ fieldId: 51 });

    // Check if the field value has changed since the last time a row was added
    if (fieldValues[0] !== lastFieldValue) {
      // Update the table rows with the new row count
      await updateTableRows({ variableName: 'tbl_perDiem' }, fieldValues[0]);
      lastFieldValue = fieldValues[0]; // Update the last field value
    }
  },
  { fieldId: 51 }
);

1 0

View 2 previous replies

replied on July 9

Thank you for the response Zachary!

I tested this javascript on my sandbox and I'm finding that when I select the date range I don't see any rows populating, any advice?

Here is what I see in forms after the change when I select the date range which updates the hidden field with the date difference:

0 0

replied on July 9

What is the value returned from this field?
LFForm.getFieldValues({ fieldId: 51 });

0 0

replied on July 10

I tested with the date range 7/3/2024 - 7/10/2024 which populated the field Hidden - Date Difference (variable name hidden_dateDifference fieldID 51) with a value of 7.

0 0

replied on July 10

Aha oops, I accidentally left an artifact in the code example. I updated the original post to remove the export keyword.

0 0

replied on August 14

Howdy, so we had to make a small change to the above code. We were finding that it was working better but not populating the number of rows needed:

const updateTableRows = async (tableFieldId, rowCount) => {
  const currentTableFieldValues = LFForm.getFieldValues(tableFieldId);
  const curRowCount = currentTableFieldValues.length;

  if (curRowCount < rowCount) {
    await LFForm.addRow(tableFieldId, rowCount - curRowCount);
  } else if (curRowCount > rowCount) {
    await LFForm.deleteRow(
      tableFieldId,
      ...Array.from(Array(curRowCount - rowCount)).map(
        (_, i) => curRowCount - i - 1
      )
    );
  }
};

let lastFieldValue = null;

LFForm.onFieldChange(
  async () => {
    const fieldValues = LFForm.getFieldValues({ fieldId: 51 });

    // Check if the field value has changed since the last time a row was added
    if (fieldValues !== lastFieldValue) {
      // Update the table rows with the new row count
      await updateTableRows({ variableName: 'tbl_perDiem' }, fieldValues);
      lastFieldValue = fieldValues; // Update the last field value
    }
  },
  { fieldId: 51 }
);

Thank you for your help on this!

1 0

Question

Question

Modern Designer Javascript; Dynamically populating rows based on hidden field value

Answer

Replies

Sign in to reply to this post.