Introduction

The Subform Repeater Plugin is a great alternative for the enterprise "Form Grid" field element.

The Subform Repeater Plugin allows you to design a form and add a subform that is repeated (as in multiple rows) to display child records and at the same time open a new top or bottom row for data entry. Subform Repeater Plugin does not pop up a new browser window "Form Grid" style.

The Subform Repeater is very flexible as it allows you to configure many options (load and save datasource, validations, subform appearance etc.).

Plugin Info

Plugins Available in the Bundle:

  1. Subform Repeater

This plugin bundle is compatible with Joget DX 7 and onwards.

Expected Outcome

To be able to design a form and add a subform that is repeated (as in multiple rows) to display child records and at the same time open a new top or bottom row for data entry.

Figure 1: Expected Outcome for Subform Repeater

Get Started

Steps

Where to get the plugin

Refer to Source Code and Plugin Download.

How to install and use the plugin

1. You can choose to import the demo app or create the app from scratch. For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details).

2. To create the app from scratch, we should create a parent form and a subform. First, create a subform.

Figure 2: Create subform


3. Now create the parent form. Drag the Subform Repeater plugin into the form. To configure the plugin, you can refer to Subform Repeater Properties

Figure 3: Create parent form


4. For each form, click on Generate App > Generate CRUD for both the parent form and subform. 

Figure 4: Generate CRUD for parent form and subform


5. Publish and run the UI. Go to Manage parent to create a new parent record.

Figure 5: Manage Parent UI


6. You can see that the subform repeater is in the form. Click on add row to add multiple rows of the subform.

Figure 6: Subform Repeater in parent form


7. You can see that multiple rows of subform are added. You can modify the plugin configurations based on your needs and requirements.

Figure 7: Subform Repeater resulting in multiple subform in parent form

Tips

If your form with subform repeater is using Form Hash variable, add a [{recordId}] as index in your form hash, for example #form.table.field[{recordId}]#, where recordid is a reserved variable used by Joget to retrieve the subform's id.

Subform Repeater Properties

Configure Subform Repeater

Figure 8: Configure Subform Repeater

NameDescription
LabelMenu label.
IDMenu element unique ID.
FormSubform to be repeatedly added.

Configure UI

Figure 9: Configure UI

NameDescription
ReadonlyDetermines if the element is editable.
Add Mode

Enable subform to be added.

  • Enable

  • Show One Empty Form on Top

  • Show One Empty Form on Bottom
  • Disable
Edit Mode

Enable subform to be editable.

  • Enable

  • Disable
Delete Mode

Enable subform to be deleted.

  • Enable

  • Disable
Display Field as Label When ReadonlyDisplays the value of the element as plain text when an element is set to "Readonly".
Select different Form for readonlySelect 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 Sorting" property. This field ID must *not* be an existing field in your form that you use for your form data. Typically we 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.

CollapsibleEnable subform to be collapsible.
Collapse Row By DefaultEnable subform to collapse row by default.

Configure Data & Validation

Figure 10: Configure Data and Validation - Validation

Validation

NameDescription
Validator

Attach a Validator plugin to validate the input value. Please see Form Validator.

When will validation takes place?

Validation will take place whenever a form is submitted except when it is submitted as "Save as Draft".

Unique ColumnColumn/Field ID to identify record ID.

Min Number of Row Validation (Integer)

Min Number of Row Validation (Integer)

Max Number of Row Validation (Integer)

Max Number of Row Validation (Integer)

Error Message

Error message to be shown when row requirements set above is not met.

Figure 10: Configure Data and Validation - Data Store

Data Store

NameDescription

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 on how the form grid row records are saved to.

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

The recommended binder to use is the Multirow Form Binder 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.

Source Code and Plugin Download

For Joget v6 & DX Enterprise & Professional editions, you can download at the marketplace: https://marketplace.joget.org/jw/web/userview/mp/mpp/_/vad?id=Subform_Repeater

For source code,

  1. Please visit https://github.com/jogetoss/subform-repeater for the plugin's source code.
  2. You can find the latest release at https://github.com/jogetoss/subform-repeater/releases.
  3. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

Download Demo App




  • No labels