Popup Subform Element

Introduction

Popup Subform Element is used to display a subform in a popup dialog, its data handling works similarly to a form grid.

Plugin Info

Plugin Available in the Bundle:

1. Popup Subform Element

This plugin bundle is compatible with Joget DX 9.

Expected Outcome

Get started

Steps

1. You can obtain the jar file by the latest release at https://github.com/jogetoss/popup-subform-element/releases

2. Upload the plugin jar file in Joget by going to Settings → Manage Plugins.

3. You can choose to import the demo app or create the app from scratch.

Steps for importing demo app

1. Download the demo app from  PopupSubformSampleApp
2. Go to Joget Home or All Apps and click on Import App to import the downloaded demo app.

Steps for creating app from scratch

1. Begin by creating a subform that includes the fields you want to display.

2. Create a parent form, add the popup subform element in the parent form, and link the subform created earlier.

3. Now generate a CRUD for both forms and Launch the UI.

4. In the UI, you can see the configured popup subform element, click on it and the subform will appear in popup.

Popup Subform Element Properties

Configure Popup Subform Element

• ID: The ID of popup subform element.

• Form: The subform to show in the popup.

UI

General

• Readonly: If checked, element will be readonly.

• Hidden: If checked, element will be hidden.

• Show Form Upon Submission: If checked, popup subform will show when form is submitted.

• Popup Dialog Height: Height of popup dialog.

• Popup Dialog Width: Width of popup dialog.

• Button Inline Style: Inline style of popup subform button.

• Button Label: Label of popup subform button.

• Is Primary Button?: If checked, popup subform button will include the primary class.

• Error Message Label: Error message when subform contains validation error.

Field Settings (Configure this section for subform field values to show in parent form)

• Display Position: Positions of subform field values. Eg: Left, Right, Top, Bottom

• Preview: Preview of selected subform columns to show.

• Columns Selection: All the columns of the subform will be populated in buttons. Click on each button to populate in template section below.

• Template: HTML template to retrieve column and populate the values.

• CSS: CSS to apply in the HTML template.

• Javascript: Javascript code to apply in the HTML template.

• Custom Header: This field is useful to place HTML code that is hidden by default (modal), meant for javascript to use. 

Data

• 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.

• Load Data From: By default, the Workflow Form Binder plugin is used for loading and storage of form data in the subform, you may override it with other plugins. See the list of available Form Data Store.

• Save Data To: By default, the Workflow Form Binder plugin is used for loading and storage of form data in the subform, you may override it with other plugins. See the list of available Form Data Store .