...
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
| Code Block | ||
|---|---|---|
| ||
<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:
...
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
- Read more about Subform Repeater Plugin
Source Code and Plugin Download
- You can find the latest release at https://github.com/jogetoss/subform-repeater.
- Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.
Demo App Download
View file name APP
...
_
...
detectChange_sr-1-20240612105329.jwa height 250