awesome! the row index is the hardest part of the script. If you need any more help let me know!

Type: customHTML approach

Ok, I hit a roadblock. I have tried the section and the customHTML field options. Right now I have js inject a blank customHTML field with my text field and buttons. The modal window loads, I can enter text and can 'close' but nor 'save & close' because the textarea cannot be found. Any suggestions on how to get text from a customHTML field?



here is the js in case you want to look at it:
 

const customHtmlFieldId = 516;
const checkboxFieldId = 517;
const rowNumberColFieldId = 354;
const tableCommentFieldId = 518;

console.log("Script loaded and running!");

let prevCheckboxValues = LFForm.getFieldValues({ fieldId: checkboxFieldId }) || [];
console.log("Initial checkbox values loaded:", prevCheckboxValues);

LFForm.onFieldChange(function () {
  console.log("onFieldChange triggered!");

  const currentValues = LFForm.getFieldValues({ fieldId: checkboxFieldId }) || [];
  const rowNumbers = LFForm.getFieldValues({ fieldId: rowNumberColFieldId }) || [];

  currentValues.forEach((val, i) => {
    const prevVal = prevCheckboxValues[i] || { value: [] };
    const isNowChecked = Array.isArray(val.value) ? val.value.length > 0 : false;
    const wasChecked = Array.isArray(prevVal.value) ? prevVal.value.length > 0 : false;

    if (isNowChecked && !wasChecked) {
      const rowNum = rowNumbers[i] || "";
      console.log(`Checkbox clicked in row ${i} → RowNumber: ${rowNum}`);

      window.currentRowIndex = i;

      // Build dynamic modal HTML
      const modalHtml = `
        <div style="position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); z-index: 9999; display: flex; align-items: center; justify-content: center;">
          <div style="background: white; padding: 20px; max-width: 500px; width: 90%; border-radius: 8px;">
            <h3>Row ${rowNum} Comment</h3>
            <textarea id="modalTextarea" rows="4" style="width: 100%; margin-bottom: 10px;"></textarea>
            <button type="button" class="btn btn-primary" onclick="window.saveAndCloseModal()">Save & Close</button>
            <button type="button" class="btn btn-default" onclick="window.closeMyModal()" style="margin-left: 5px;">Close</button>
          </div>
        </div>
      `;

      // Inject modal into Custom HTML field
      LFForm.changeFieldSettings({ fieldId: customHtmlFieldId }, { content: modalHtml })
        .then(() => {
          console.log("Modal HTML injected (dynamic)");
        });
    }
  });

  prevCheckboxValues = currentValues;
}, { fieldId: checkboxFieldId });

// Global handlers
window.closeMyModal = function () {
  LFForm.changeFieldSettings({ fieldId: customHtmlFieldId }, { content: "" });
  console.log("Modal closed without saving");
};

window.saveAndCloseModal = function () {
  const textareaEl = document.getElementById("modalTextarea");
  if (!textareaEl) {
    console.warn("Textarea not found when saving!");
    return;
  }

  const commentText = textareaEl.value || "";
  console.log("💬 Save & Close clicked, comment:", commentText);

  LFForm.setFieldValues({ fieldId: tableCommentFieldId, index: window.currentRowIndex }, commentText)
    .then(() => console.log(`Comment saved to row ${window.currentRowIndex}: ${commentText}`))
    .catch(err => console.warn("Failed to save comment:", err));

  LFForm.setFieldValues({ fieldId: checkboxFieldId, index: window.currentRowIndex }, { value: [] })
    .then(() => console.log(`Checkbox in row ${window.currentRowIndex} unchecked`))
    .catch(err => console.warn("Failed to uncheck checkbox:", err));

  LFForm.changeFieldSettings({ fieldId: customHtmlFieldId }, { content: "" });
  console.log("Modal closed after save");
};

I keep getting closer and closer!

Thanks so much