🖼️ Picking Data from Iframe Popups in Joget

#javascript #nocode #tutorial #ui

Overview

Standard data selection in Joget often relies on simple pickers, but complex business logic sometimes requires a custom multi-select interface. This guide explains how to open a Joget list in a popup iframe, select multiple rows, validate them against existing data, and inject them into a Form Grid or Subform using JavaScript.

How It Works

The solution uses a parent-child window relationship. A JavaScript trigger opens a popup containing an <iframe> that loads a specific Joget Userview list. When the user clicks "Submit" on the popup, the script scrapes the checked rows from the iframe, checks for duplicates against the main form’s current table entries, and programmatically calls Joget's internal _add functions to populate the data.

Where to Use in Joget

✅ Form Builder: Inside a Custom HTML element to add advanced "Bulk Add" functionality.
✅ Userview: Within a custom page to facilitate data transfer between different application modules.

Full Code

⚙️ Iframe Selection Script
Place this code in a Custom HTML section of your form. It handles the window creation and the data bridge.

<input type="button" value="Select Vendors" id='openBtn' class="form-button">

<script>
  $(document).ready(function () {
    $('#openBtn').on('click', function () {
      // 1. Define the Joget List URL (use embed=true for a clean look)
      var url = '/jw/web/userview/E_procurement/v/_/54E1E4C5D136428A971012E7F4DEC71E?embed=true';
      var options = 'width=900,height=700';
      var popupWindow = window.open('', '_blank', options);

      // 2. Build the Popup Content
      popupWindow.document.write(`
        <div style="padding:10px; font-family:Arial;">
          <button id="submitBtn" style="margin-bottom:10px; padding:10px 20px; background:#2196F3; color:white; border:none; cursor:pointer;">
            Add Selected Rows
          </button>
          <iframe id="popupIframe" src="${url}" frameborder="0" style="width:100%; height:600px;"></iframe>
        </div>
      `);

      // 3. Logic for the Submit Button in the Popup
      popupWindow.document.getElementById('submitBtn').addEventListener('click', function () {

        // Collect existing IDs from the main form to prevent duplicates
        let existingIds = [];
        $("[name=vendor_adding_form]", parent.document).find('.tablesaw tr:not(:first-child)').each(function () {
          let id = $(this).find('td:eq(0) #vendor_adding_form_vendor_id').text();
          existingIds.push(id.trim());
        });

        // Identify checked rows inside the Iframe
        var iframeDoc = popupWindow.document.getElementById('popupIframe').contentWindow.document;
        var checkedRows = $(iframeDoc).find('#list_New_Vendor tbody input[type="checkbox"]:checked').closest('tr');

        // Target the Joget Form Grid add function
        var field = FormUtil.getField("vendor_adding_form");
        var addFunction = window[field.attr("id") + "_add"];

        if (typeof addFunction === 'function') {
          checkedRows.each(function () {
            var col1 = $(this).find('td:eq(1)').text().trim(); // Vendor ID

            // Duplicate Validation
            if (!existingIds.includes(col1)) {
              var args = {
                'result': JSON.stringify({
                  "vendor_id": col1,
                  "vendor_org_name": $(this).find('td:eq(2)').text().trim(),
                  "vendor_category": $(this).find('td:eq(3)').text().trim(),
                  "vendor_email": $(this).find('td:eq(6)').text().trim()
                })
              };
              addFunction(args);
            } else {
              console.log("Skipped: " + col1 + " already exists.");
            }
          });
          popupWindow.close();
        }
      });
    });
  });
</script>

Example Use Cases

💡 E-Procurement: Selecting multiple vendors from a master list and adding them to a "Tender Invitation" grid.
💡 Project Management: Picking team members from a global directory to populate a specific project task.
💡 Inventory: Selecting multiple parts from a warehouse list for a "Material Request" form.

Customization Tips

⚙️ Selectors: Ensure #list_New_Vendor matches the ID of the list data table inside your iframe.
⚙️ Column Index: td:eq(1) refers to the second column. Adjust these numbers based on your list's layout.
⚙️ Grid Function: Joget naming convention for adding rows is [FieldID]_add. Always ensure your script correctly identifies the field.attr("id").

Key Benefits

✅ UX Excellence: Users can browse and filter a full Joget list before selecting data.
✅ Data Integrity: Prevents duplicate entries in your Form Grid with real-time array checking.
✅ High Speed: Allows users to add dozens of records with a single click rather than one-by-one.

Final Thoughts

Bridging data between a popup iframe and a parent form is a powerful way to extend Joget's UI capabilities. This method provides a "Shopping Cart" style experience for data entry, making your application feel much more professional and enterprise-ready.

DEV Community