AJAX Subform

Introduction

The AJAX Subform allows dynamically loading a subform by attaching a listener to another form field. The target's form Load Data Store will be executed to fetch records matching the properties defined in the AJAX Subform.

How does it work?

You can create a new app to see how the AJAX Subform works. Follow these steps:

1. Start the Joget Server and open the App Center.
2. Log in as admin and click the Design New App button.
   
3. Fill in the App Details as follows and click Save:
   • App ID: ajaxSubform
   • App Name: AJAX Subform
     
4. You will be directed to the App Composer. Click the Create New Form button and fill in the Form Details as follows:
   • Form ID: formA
   • Form Name: Form A
   • Table Name: as_a
     
     
5. Click Save, and you will be directed to the Form Builder.
6. Drag and drop a Text Field element onto the canvas.
7. Click on the Text Field element on the canvas to open the Configure Text Field properties.
8. Fill in the Configure Text Field properties as follows and click on Apply Change:
   • ID: name
   • Label: Name
9. Click Save in the Form Builder.
   
10. Click Generate App, select Generate CRUD, and click Generate.
11. Once the App Generator is complete, click the link to launch the userview.
12. Click New and save at least 2 records of data.
    
13. Head back to the App Composer.

14. Click on the Create New Form button and fill in the Form Details as follows:

    • Form ID: formB
    • Form Name: Form B
    • Table Name: as_b

    

15. Click Save, and you will be directed to the Form Builder.
16. Drag and drop a Select Box element onto the canvas.
17. Click the Select Box element on the canvas to open the Configure Select Box properties.
18. Fill in the Configure Select Box properties as follows and click Apply Change:
    • Label: Choose a record from Form A
    • Choose Options Data Store: Form Data
    • ID: field1
    • Form: Form A
    • Label Column: name
      
19. Adding the AJAX Subform, drag and drop an AJAX Subform element onto the canvas.
20. Click the AJAX Subform element on the canvas to open the Configure AJAX Subform properties.
21. Fill up the Configure AJAX Subform properties as follows:
    • Form: Form A
    • Tick the first three checkboxes:
      • Reload Subform When Parent Field Value Changes
      • Readonly
      • Display Field as Label When Readonly?
        
    • Fill in the Parent Field to keep Subform ID: field1.
      
22. Click Preview and select between the records in the Select Box to see the Subform dynamically load the appropriate record.
    
    

Video tutorial

Here is a video tutorial explaining the AJAX Subform configuration process in detail. This tutorial provides a step-by-step guide to ensure you understand how to use this feature effectively.

Configure AJAX subform

Configuring the AJAX Subform allows for dynamic and flexible loading of subforms based on parent form interactions. This ensures that data can be dynamically fetched and displayed, enhancing the user experience and interactivity of the forms.
Fields to configure:

• Label: Element label to be displayed to the end-user.
• ID: Element ID. By declaring it as "view_existing_claim," a corresponding database table column "c_view_existing_claim" will be created. See Form Element for more information about defining the ID and a list of reserved IDs.
• Form: Target form to be loaded.

  Usage of Hash Variable:

  Hash Variables can be used inside the target form but may have limitations due to the nature of form loading.

  • Example 1: Use #requestParam.primaryKey# to access the record ID.
  • Example 2: Use #form.tableName.fieldId[{requestParam.primaryKey}]# to access the field value of the given record ID.

UI

The UI settings for the AJAX Subform configure how the subform behaves and appears, including options for dynamic reloading, read-only display, and collapsibility.

General

You can customize general behaviors like dynamic reloading and read-only display.

Fields to configure:

• Reload SubForm when Parent Field value change?: Dynamically reload the subform when the parent field value changes.
• Readonly: Determines if the element is editable.
• Display field as Label when read-only?: Displays the element's value as plain text when set to Readonly.
• Display without frame?: Removes default styling applied to the SubForm when checked.

Collapsible setting

You can set the AJAX Subform to be collapsible, making it easier to manage and view.

Fields to configure:

• Collapsible?: Make the AJAX Subform collapsible.
• Label when expanded: Label displayed when the subform is expanded.
• Label when collapsed: Label displayed when the subform is collapsed.
• Expanded by default?: Whether the subform is expanded by default.
• Hide when no value?: Hide the AJAX Subform when there's no data to be loaded.
• Do not load subform in background when it is collapsed or hidden: Do not load the subform when it is collapsed or hidden.

Data

The Data settings configure how data is linked between the parent form and the subform and how data is stored.

Data linkage

Ensures that data from the parent form and subform are correctly linked.

Fields to configure:

• Parent Field to keep Subform ID: The ID of the field in the parent form to store the SubForm table's primary key. SubForm data will be loaded based on the record ID retrieved from this field.
• Subform Field to keep Parent ID: The field's ID in the SubForm form stores the parent table's primary key.

Data store

You can specify how the data is stored, allowing flexibility in data management.

Field to configure:

• Save Data To: Default is used for loading and storing form data in the AJAX Subform, but this can be overridden with other plugins.

Related video tutorial

Download sample app