Introduction

This article explains how to detect changes made inside a Subform Repeater Element using the Custom HTML element.

Getting Started

Prerequisites

1. Subform Repeater Plugin

Getting Subform Repeater Plugin. Source Code of the plugin can be found at https://github.com/jogetoss/subform-repeater.

Setting Up Forms

1. Create Subform Form

The subform form consists of a hidden field as a Foreign Key to connect both Parent and Subform forms, elements depending on the use case, and two Custom HTML elements to wrap the Subform Repeater in a container and script to detect changes.

Figure 1: Subform Configuration


Wrap the elements in a div class in the first Custom HTML element using the HTML code below.

Figure 2: Wrap Elements in Div Class


<div class="link-container" style="padding-left:30%;"></div>


The second Custom HTML will handle any changes made in the original text and will create a new link based on the new text entered.

Figure 2: Script to Detect Changes and Create New Link


Below is the script used:

<script type="text/javascript">

$(document).ready(function() {
   // Use event delegation to ensure the event handler is attached only once

    // to the parent container of all the subform rows

    $(document).on('change', 'input[id$="_SR_url"]', function() {

        if (!this.changeHandled) {

            alert("URL Changed");

            createURL(this); // Pass the current element to the createURL function

            this.changeHandled = true; // Mark this change event as handled
        }

    });

    function createURL(inputElement) {

        var val = $(inputElement).val();

        var newVal = "<a href='" + val + "' target='_blank'>" + val + "</a>";

        // Locate the closest repeating section container for this URL field

        var $sectionContainer = $(inputElement).closest('.subform-section');

        // Within that container, find the link container (no longer using the ID)

        var $linkContainer = $sectionContainer.find('.link-container');

        // Update the HTML of the link container with the new link

        $linkContainer.html(newVal);

        // Reset the handled flag after a short delay

        setTimeout(function() {

            inputElement.changeHandled = false;

        }, 100);
    };
});
</script>
</script>


$(document).on('change', 'input[id$="_SR_url"]', function() will target any ID with the SR_url on its name, this has been done by looking up the URL ID using the inspect tool, as per the screenshot:


2. Create Parent Form

In the Parent form, we only need the Subform Repeater Element. Set the id as 'SR' following the code above and point to the subform form created.

Figure 3: Subform Repeater in the Parent Form

Runtime

Enter text in the URL field and click save. A URL based on entered text will appear underneath the URL field.

Figure 4: Runtime Test


Changes made in the new row won't disturb the previous row.

Figure 5: Test in New Row

Related Documentation

  1. Read more about Subform Repeater Plugin

Source Code and Plugin Download

  1. You can find the latest release at https://github.com/jogetoss/subform-repeater.
  2. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

Demo App Download

APP_kb_dx8_detectChange_sr.jwa


  • No labels