🖼️ 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.

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.

Source Code

<input type="button" value="open" id='openBtn'>

<script>
  $(document).ready(function () {

    $('#openBtn').on('click', function () {

      var url = '/jw/web/userview/E_procurement/v/_/<api-key>?embed=true';
      var options = 'width=800,height=600';
      var popupWindow = window.open('', '_blank', options);

      // <p class= "error_Message" style="font-weight:bold;color:red">Value Already Exist</p>  
      popupWindow.document.write('<button id="submitBtn">Submit</button>  <iframe id="popupIframe" src="' + url + '" frameborder="0" border="0" cellspacing="0" height="100%" style="border-style: none;width: 100%;"></iframe>');
      popupWindow.document.getElementById('submitBtn').addEventListener('click', function () {

        let arr_vendor_id_table = [];
        $("[name=vendor_adding_form]", parent.document).find('.tablesaw tr:not(:first-child)').each(function () {
          let table_vendor_id = $(this).find('td:eq(0) #vendor_adding_form_vendor_id').text();
          arr_vendor_id_table.push(table_vendor_id);
        });

        var checkedRows = $(popupWindow.document.getElementById('popupIframe').contentWindow.document).find('#list_New_Vendor tbody input[type="checkbox"]:checked').closest('tr');
        var field = FormUtil.getField("vendor_adding_form");
        var functionName = window[field.attr("id") + "_add"];

        if (typeof functionName === 'function') {
          checkedRows.each(function () {

            console.log(arr_vendor_id_table);
            console.log($(this).find('td:eq(1)').text());

            let boolean = arr_vendor_id_table.includes($(this).find('td:eq(1)').text());

            console.log(boolean);

            if (!boolean) {
              var column1 = $(this).find('td:eq(1)').text();
              var column2 = $(this).find('td:eq(2)').text();
              var column3 = $(this).find('td:eq(3)').text();
              var column4 = $(this).find('td:eq(4)').text();
              var column5 = $(this).find('td:eq(5)').text();
              var column6 = $(this).find('td:eq(6)').text();

              var args = new Object();
              args['result'] = JSON.stringify({
                "vendor_id": column1,
                "vendor_org_name": column2,
                "vendor_category": column3,
                "vendor_specialization": column4,
                "vendor_performance": column5,
                "vendor_email": column6
              });

              functionName(args);
            } else {
              // $('.error_Message').text();
              alert('Values already exist');
            }


          });
        }
      });
    });
  });
</script>

DEV Community