Subform Repeater Plugin

Introduction

The Subform Repeater Plugin is a versatile alternative to the Form Grid field element in Joget. It allows you to design a form that contains a subform, which can be repeated across multiple rows to display child records and, at the same time, open a new top or bottom row for data entry. This plugin simplifies the interface by avoiding the need for pop-up windows typically seen in the Form Grid style.

The Subform Repeater offers flexibility with configurable options such as data source handling, validations, and subform appearance.

Plugin information

• Plugin Bundle: Subform Repeater
• Compatibility: Joget DX 7 and onwards

Get started

Where to get the plugin

Download the plugin from the Joget Marketplace.

How to install

1. Download the plugin JAR file from the Joget Marketplace.
2. Go to Settings > Manage Plugins > Upload Plugin.
3. You can import the demo app or create the app from scratch.

How to use it

Importing the demo app

For the demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (see another KB - Import a Joget App for more details).

Creating the app from scratch

1. Create a subform.
   
2. Create a parent form and drag the Subform Repeater plugin into it. To configure the plugin, you can see Subform Repeater Properties. 
   
3. For both the parent form and the subform, click on Generate App > Generate CRUD.
   
4. Publish and run the UI. Go to Manage Parent to create a new parent record.
   
5. The subform repeater will appear in the form. Click Add Row to add multiple rows of the subform.
   
6. You can see that multiple rows of subform are added. You can modify the plugin configurations based on your needs and requirements.
   

Configure subform repeater properties

Fields to configure:

• Label: Menu label.
• ID: Menu element unique ID.
• Form: Subform to be repeatedly added.

UI

Fields to configure:

• Readonly: Defines whether the element is editable.
• Add Mode: Enable the addition of a subform.
  • Enable
  • Show One Empty Form on Top
  • Show One Empty Form on Bottom
  • Disable
• Edit Mode: Enable the subform to be editable.
  • Enable
  • Disable
• Delete Mode: Enable subform to be deleted.
  • Enable
  • Disable
• Display Field as Label When Readonly: Displays the element's value as plain text when an element is set to Readonly.
• Select different Form for readonly: Select a different form for readonly.
• Enable Sorting Feature: Determines if the ordering of rows is to be enforced.
  The property fields Enable Sorting Feature and Field ID for Sorting stores the form grid record row sequence, meaning it records which ID sits in row 1, row 2, and so on and rearranges it back in this same ascending sequence on load binder.
  If you are using this property, key in a unique field ID in the Field ID for the Sorting property. This field ID must *not* be an existing field in your form that you use for your form data. Typically, you use the field ID sort, and Joget will automatically create this column in your database table (Do not use the field ID sort anywhere else in your form).
  If you need automatic sorting on another column value when loading the form grid/spreadsheet, use Load Grid Data with Custom Sorting and Filtering or Database SQL Query with the "ORDER BY ASC" SQL statement.
• Collapsible: Enable subform to be collapsible.
• Collapse Row By Default: Enable subform to collapse the row by default.

Data & validation

Validation

Fields to configure:

• Validator: Attach a Validator plugin to validate input values. See Form Validator.
  
  When will validation take place?
  Validation will occur whenever a form is submitted except when submitted as Save as Draft.
• Unique Column: Specify the column/field ID to identify record ID.
• Min Number of Row Validation (Integer): Define the Min Number of Row Validation (Integer)
• Max Number of Row Validation (Integer): Definer the Max Number of Row Validation (Integer)
• Error Message: An error message will be shown when the row requirements set above are not met.

Data store

Fields to configure:

• Load & Save Binder: 

  Load Data From allows you to customize the method for data retrieval to populate the multi-row form grid in the form.

  Save Data To allows you to customize the method for saving the form grid row records.

  This option is empty by default. An empty binder means that the form grid records will be saved/loaded in JSON format in the parent form and database table. See the list of available Form Data Store.

  The recommended binder to use is the Multiple Form Row so that each record is saved into a child database table via a subform definition. The binder will update the foreign key parent id into each child record to point to the parent database table.

Expected outcome

After successfully implementing the Subform Repeater Plugin, you will be able to:

• Add a subform with multiple rows within a parent form.
• Easily manage child records directly within the parent form interface.

Download plugin

For Joget v6 and DX Enterprise editions.

• Subform Repeater Plugin

For source code.

• Subform Repeater
• Subform Repeater - Releases

Download sample app