🖼️ Picking Data from Iframe Popups in Joget

{ this.extractAndValidate(win); }); }

private extractAndValidate(popupWin: Window): void {
  try {
    const iframeDoc = popupWin.document.getElementById('data-source')?.contentWindow?.document;
    if (!iframeDoc) throw new Error('Iframe content not accessible.');

    const checkedRows = iframeDoc.querySelectorAll(`${CONFIG.listTableSelector} tr:has(${CONFIG.checkboxSelector}:checked)`);
    if (checkedRows.length === 0) {
      alert('No records selected.');
      return;
    }

    const existingKeys = this.getExistingParentKeys();
    const gridMutationFn = this.resolveGridMutationFunction();

    if (typeof gridMutationFn !== 'function') {
      console.error('Joget grid mutation function not found.');
      return;
    }

    checkedRows.forEach((row) => {
      const cells = row.querySelectorAll('td');
      const recordKey = cells[1]?.textContent?.trim() || '';

      if (!existingKeys.has(recordKey)) {
        const payload = this.mapRowToPayload(cells);
        gridMutationFn({ result: JSON.stringify(payload) });
      }
    });

    popupWin.close();
  } catch (error) {
    console.error('Data extraction failed:', error);
  }
}

private getExistingParentKeys(): Set<string> {
  const keys = new Set<string>();
  const gridTable = this.parentForm.querySelector(`[name="${CONFIG.gridFieldId}"] .tablesaw`);
  if (!gridTable) return keys;

  gridTable.querySelectorAll('tr:not(:first-child)').forEach((row) => {
    const keyCell = row.querySelector(`#${CONFIG.gridFieldId}_item_code`);
    if (keyCell?.textContent) keys.add(keyCell.textContent.trim());
  });
  return keys;
}

private resolveGridMutationFunction(): Function | undefined {
  const fieldEl = (window as any).FormUtil?.getField(CONFIG.gridFieldId);
  if (!fieldEl?.attr) return undefined;
  const fnName = `${fieldEl.attr('id')}_add`;
  return (window as any)[fnName];
}

private mapRowToPayload(cells: NodeListOf<HTMLTableCellElement>): Record<string, string> {
  return {
    item_code: cells[1]?.textContent?.trim() || '',
    item_desc: cells[2]?.textContent?.trim() || '',
    unit_price: cells[4]?.textContent?.trim() || '',
    supplier_ref: cells[6]?.textContent?.trim() || ''
  };
}

}

// Initialize when DOM is ready if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => new BulkDataBridge()); } else { new BulkDataBridge(); } })();

### Why This Structure Works

- **Encapsulation**: The IIFE prevents global namespace pollution, critical in Joget environments where multiple custom scripts may coexist.
- **Explicit Configuration**: Centralizing selectors and endpoints in `CONFIG` makes the script portable across different forms and list views.
- **Safe DOM Traversal**: Using `:has()` and explicit class selectors reduces brittleness compared to positional `td:eq()` indexing.
- **Set-Based Validation**: `Set` provides O(1) lookup for duplicate checking, significantly improving performance when injecting dozens of records.
- **Dynamic Function Resolution**: `FormUtil.getField()` ensures the script adapts to Joget's runtime field ID generation, preventing hardcoded mismatches.

## Pitfall Guide

### 1. Cross-Origin Security Blocks
**Explanation**: Browsers enforce same-origin policy on `contentWindow.document`. If the iframe URL differs in protocol, domain, or port, DOM access throws a security exception.
**Fix**: Always use relative URLs or ensure the Joget instance runs on a single domain. Avoid proxying or CDN mismatches. Test in incognito to rule out extension interference.

### 2. Iframe Load Timing Mismatch
**Explanation**: Attaching event listeners before the iframe finishes rendering results in `null` references or empty selections.
**Fix**: Implement a lightweight polling mechanism or attach the submit handler only after the iframe's `load` event fires. Alternatively, defer button activation until `iframe.contentDocument.readyState === 'complete'`.

### 3. Joget Field ID Drift
**Explanation**: Joget regenerates field IDs during form versioning or cloning. Hardcoding `[fieldId]_add` breaks after deployment.
**Fix**: Always resolve the mutation function at runtime using `FormUtil.getField()`. Cache the result only within the current form session, not across page reloads.

### 4. Selector Brittleness from Column Reordering
**Explanation**: Using `td:eq(2)` assumes a fixed column order. List view customizations or user-driven column rearrangements shift indices.
**Fix**: Target cells by data attributes, header text matching, or stable CSS classes. If unavailable, parse the header row dynamically to map column names to indices before extraction.

### 5. Popup Blocker Interference
**Explanation**: Modern browsers block `window.open()` if it's not triggered synchronously within a user gesture. Async delays or promise chains cause silent failures.
**Fix**: Call `window.open()` directly inside the click handler. Populate the popup content immediately after creation. Avoid `setTimeout` or `fetch` delays before opening.

### 6. JSON Payload Schema Mismatch
**Explanation**: Joget's grid `_add` function expects keys that exactly match the grid column field names. Typos or missing fields cause silent injection failures or validation errors.
**Fix**: Inspect the grid's JSON schema via browser dev tools or Joget's form preview. Validate payload keys against the grid's column definitions before invocation. Add console warnings for missing fields.

### 7. Memory Leaks from Orphaned Popups
**Explanation**: Users closing the popup via the OS window manager (instead of the script) leaves event listeners and DOM references attached to the parent.
**Fix**: Attach a `beforeunload` listener to the popup that nullifies the `popupRef`. Use `try/catch` around cross-window calls to gracefully handle already-closed windows.

## Production Bundle

### Action Checklist
- [ ] Verify same-origin policy: Ensure iframe URL matches parent domain/protocol
- [ ] Map grid column field names: Extract exact keys from Joget's form JSON schema
- [ ] Test popup blocker behavior: Confirm `window.open()` fires synchronously on click
- [ ] Validate selector stability: Replace positional `td:eq()` with attribute/class selectors
- [ ] Implement duplicate guard: Use `Set` or `Map` for O(1) parent-state comparison
- [ ] Add error boundaries: Wrap cross-window calls in `try/catch` with user-friendly alerts
- [ ] Audit memory cleanup: Nullify popup references and detach listeners on close

### Decision Matrix

| Scenario | Recommended Approach | Why | Cost Impact |
|----------|---------------------|-----|-------------|
| < 50 records, static list | Native Joget Multi-Select | Simpler, no cross-window complexity | Low |
| 50–500 records, frequent filtering | Iframe Popup Bridge | Leverages existing list UI, reduces manual entry | Medium |
| > 500 records, real-time sync | Joget REST API + Custom Plugin | Avoids DOM scraping, enables server-side validation | High |
| Multi-tenant / SaaS deployment | Iframe Popup Bridge | Zero backend changes, works across all tenants | Low |
| Strict security / CSP enforced | Native Multi-Select + Server Validation | Avoids cross-window DOM access, complies with strict policies | Medium |

### Configuration Template

Copy this template into a Joget Custom HTML element. Update the `CONFIG` object to match your environment.

```html
<button id="bulk-import-trigger" class="form-button">Open Master List</button>

<script>
(function() {
  const CFG = {
    triggerId: 'bulk-import-trigger',
    listUrl: '/jw/web/userview/YOUR_VIEW/v/_/YOUR_LIST_ID?embed=true',
    gridId: 'YOUR_GRID_FIELD_ID',
    width: 960,
    height: 720,
    tableSelector: '#YOUR_LIST_TABLE_ID tbody',
    checkSelector: 'input[type="checkbox"]'
  };

  const btn = document.getElementById(CFG.triggerId);
  if(!btn) return;

  btn.onclick = function() {
    const win = window.open('', '_blank', `width=${CFG.width},height=${CFG.height}`);
    if(!win) return alert('Popup blocked');

    win.document.write(`
      <style>body{font-family:system-ui;padding:12px;background:#f5f5f5}
      .bar{margin-bottom:8px;display:flex;justify-content:space-between}
      .btn{padding:8px 14px;background:#0d6efd;color:#fff;border:none;border-radius:4px;cursor:pointer}
      iframe{width:100%;height:600px;border:1px solid #ccc}</style>
      <div class="bar"><strong>Select Items</strong><button id="inject" class="btn">Add to Grid</button></div>
      <iframe id="src" src="${CFG.listUrl}"></iframe>
    `);
    win.document.close();

    win.document.getElementById('inject').onclick = function() {
      try {
        const doc = win.document.getElementById('src').contentWindow.document;
        const rows = doc.querySelectorAll(`${CFG.tableSelector} tr:has(${CFG.checkSelector}:checked)`);
        const existing = new Set();
        document.querySelectorAll(`[name="${CFG.gridId}"] .tablesaw tr:not(:first-child)`).forEach(r => {
          const v = r.querySelector(`#${CFG.gridId}_key_field`)?.textContent?.trim();
          if(v) existing.add(v);
        });

        const field = window.FormUtil.getField(CFG.gridId);
        const addFn = window[field.attr('id') + '_add'];
        if(typeof addFn !== 'function') return console.error('Grid function missing');

        rows.forEach(tr => {
          const cells = tr.querySelectorAll('td');
          const key = cells[1]?.textContent?.trim() || '';
          if(!existing.has(key)) {
            addFn({ result: JSON.stringify({
              key_field: key,
              desc_field: cells[2]?.textContent?.trim() || '',
              price_field: cells[4]?.textContent?.trim() || ''
            })});
          }
        });
        win.close();
      } catch(e) { console.error('Injection failed', e); }
    };
  };
})();
</script>

Quick Start Guide

1. Identify Target Components: Locate your Joget list view ID and form grid field ID. Note the exact column field names in the grid's JSON schema.
2. Insert Custom HTML: Add a Custom HTML element to your form. Paste the configuration template and update CFG values to match your environment.
3. Test Popup Flow: Click the trigger button. Verify the popup opens, the list loads, and checkboxes are selectable.
4. Validate Injection: Select 2–3 rows, click "Add to Grid", and confirm records appear without duplicates. Check browser console for errors.
5. Deploy & Monitor: Publish the form. Monitor user sessions for popup blocker complaints or selector mismatches. Adjust tableSelector if list view updates change DOM structure.