Introduction

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>

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_detectChange_sr-1-20240612105329.jwa