Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

Introduction

English
AJAX SubForm gives you the flexibility of dynamically loading a Subform by attaching a listener to another form field. 
Info
titleData to load by the AJAX Subform

The target's form Load Binder Data Store will be executed to fetch record matched from the properties defined in AJAX Subform.

...

  1. Start the Joget Server and open the App Center.

  2. Log in as admin and click on the Design New App button. (see Figure 1)


    Figure 1

  3. Fill up the App Details as follows and click Save (see Figure 2):
      1. App ID: ajaxSubform
      2. App Name: AJAX Subform


    Figure 2

  4. You will be directed to the App Composer. Click on the Create New Form button and fill up the Form Details as follows (see Figure 3):
    1. Form ID: formA
    2. Form Name: Form A
    3. Table Name: as_a


    Figure 3

  5. Click on Save and you will be directed to the  Form Builder.

  6. Drag and drop a Text Field element on to the canvas.

  7. Click on the Text Field element on the canvas to open up the Configure Text Field properties.

  8. Fill up the Configure Text Field  properties as follows and click on Apply Change (see Figure 4):
    1. ID: name
    2. Label: Name


    Figure 4

  9. Click on Save on the Form Builder.

  10. Click on Generate App, select Generate CRUD and click Generate (see Figure 5)

  11. Once the App Generator is complete, click on the link to launch the userview.

  12. Click on New button and Save at least 2 records of data (see Figure 5)


    Figure 5

  13. Head back to the App Composer.

  14. Click on the Create New Form button and fill up the Form Details as follows (see Figure 6):
    1. ID: formB
    2. Form Name: Form B
    3. Table Name: as_b


    Figure 6

  15. Click on Save and you will be directed to the  Form Builder. 

  16. Drag and drop a Select Box element on to the canvas.

  17. Click on the Select Box element on the canvas to open up the Configure Select Box properties. 

  18. To Save any changes in any Configuration Properties, Click on Apply Change.
  19. Fill up the Configure Select Box properties as follows (see Figure 7):
    1. Label: Choose record from Form A
      1. Choose Options BinderData Store: Form Data

  20. Fill up the Configure Select Box properties as follows(see Figure 7):
    1. ID: field1
    2. Form: Form A
    3. Label Column: name


    Figure 7

  21. Drag and drop an AJAX Subform element on to the canvas.

  22. Click on the AJAX Subform element on the canvas to open up the Configure AJAX Subform properties.

  23. Fill up the Configure AJAX Subform properties as follows (see Figure 8):
    1. Form: Form A


  24. Tick the first three checkboxes (see Figure 8)
    a. Reload Subform When Parent Field Value Change
    b. Readonly
    c. Display Field as Label When Readonly? 

...

NameDescription

Collapsible?

Make the AJAX Subform collapsible.

Label when expanded

Label when expanded

Label when collapsed

Label when collapsed

Expanded by default?

Expanded by default option.

Hide when no value?

To hide the AJAX Subform when there's no data to be loaded.

Do not load subform in background when it is collapsed or hidden

To not load the subform when it is collapsed or hidden.

Info
titleNew Feature

Newly introduced in Joget DX


Data &

...

Data Store

Data Linkage

NameDescription
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 ID of the field in the SubForm form to store the parent table's primary key.

...

NameDescription
Save Date To 

Default is used for loading and storage of form data in the AJAX Subform, you may override it with other plugins.

Info
titleImportant

The target form's Store Data Store Binder will not be executed. The Store Data Store Binder selected in this property will be executed instead.

See a list of available Form Binder Form Data Store.



Related Video Tutorials

Widget Connector
urlhttps://www.youtube.com/watch?v=TXh_5_Wh26Y&feature=youtu.be

...

Download the demo app with examples on using Ajax Subform with two options: 'Database SQL Query' and ' Parent Form BinderData Store':

...