The Page Component Import is a feature to import bulk data (in a .csv or Excel file) into a specific Joget form. The Import component aids in performing simple column-to-field mapping. When importing records, you can specify the following import mode:

During import, you can click the "Validate data" checkbox to perform data validation based on the form field validation rules.

It is formerly known as Import Menu in Joget DX 7.

Figure 1: Import component in UI Runtime

Import Properties

Configure Import

Figure 2: Import Properties

LabelThe UI Builder page component label. You can add Font Awesome Icons into your component labels. Default label is Import.
Menu ID

Optional custom component id. Value defined here must be unique to the rest of the page components as the first matching name will be called upon.


Specify on where to store the data by choosing a target form. The target form's store binder will be called upon for data storage.

Post Form Submission Processing

Any Tool mapped under Post Form Submission Processing of the target form will be triggered each time a record updated or created.

Important: The tool mapped will be triggered regardless of the Run Tool on attribute.

Column Mapping
Column Number

Column number from the source file. Column number starts from zero.

Field Name

Corresponding element ID in the form set above to be mapped to.

If you are referring to a Subform in the target form, remember to prepend the field name with subform element ID followed by an underscore.


Subform ID: subform

Form ID set in the Subform: child

Field ID in the subform: name

Field Name: subform_child_name

Use Formatted Value

Check this field to use Formatted Value instead of the default Raw/Cell Value.


Key Column NumberDefine column number that defines the record id. Column number starts from zero.
Start From Row NumberDefine which row number to start processing. Row number starts from zero.
Custom CSV Delimiter CharacterSymbol to represent the delimiter separator.
Custom CSV Quote CharacterSymbol to represent the regular quote character.

Action Properties

Figure 3: Action Properties

Confirmation MessageConfirmation Message.
Message to show when error occurMessage shown when error occur.
Message to show after data importedMessage shown after data imported.
Redirection (Hyperlink)URL to redirect, for example, to redirect to the CRUD List.

UI Properties

Figure 5: UI Properties

Custom HeaderCustom Header in HTML.
Custom FooterCustom Footer in HTML.

Advance Properties

Figure 6: Import Properties - Advanced

Disable delete record featureDisables the option for end users to delete records.
UTF-8 Encoding Checking?

When checked, it will check the uploaded file if it is a valid UTF-8 encoded file.

UI Key Name

Corresponding element ID in the form set above to be mapped to (same like the mapping in "Column Mapping" above).

When defined, the UI Key value will be saved into the field defined here.


With the configurations above, we will attempt to import the following data in the screenshot below.

Figure 7: Source data highlighting data that will be imported into the target form's database table (master)

Figure 8: Data written into the form table (master)

Figure 9: Source data highlighting data that will be imported into the target form's subform's database table (child)

Figure 10: Data written into the form table (child)

Performance & Offline

Cache Settings

Figure 11: Performance & Offline Settings




Caching options are:

  • None: No caching.
  • Application: Cache content by application where all users will see the same content.
  • User: Cache by username.
Duration (s)Duration in seconds to cache content, defaults to 20 seconds if applicable.

You can configure the Performance settings in the UI Builder Page Component which allows one to cache existing content for improved performance and loading speed. Read more at Performance Improvement with UI Caching.

AJAX & Events

New Feature

This is a new feature in Joget DX 8.

Event Listening

Figure 12: AJAX & Events - Event Listening

Component Object

The object that will be listening for an event.

This field will dynamically show selectable options depending on the page components used. e.g: if there is a page component called manage meeting in the page, it will automatically show up in this field's select box.

Event NameCustom Event Name.
Matched Action 

Action to be listened for.

  • Hide Component
  • Show Component
  • Show and Reload Component
  • Show and Change URL Component Parameters
  • Reload Page
  • Redirect Page
  • Show and Redirect Component
Add row Adds another row for another event

Event Triggering

Figure 13: AJAX & Events - Event Triggering

Event NameCustom Event Name
Trigger Method

The method used to trigger an event.

  • GET Request
  • POST Request
  • Link Clicked
Parameter NameCustom Parameter Name.

Logical Operator to be used in evaluating "Parameter" against "Value"

  • Equals To
  • Not Equals To
  • Greater Than 
  • Greater Than
  • Greater Than or Equals To
  • Less than
  • Less than or equals to
  • Is True
  • Is False
  • Is Empty
  • Is Not Empty
  • Contains
  • In
  • Regex Match
ValueThe value that the Parameter will be compared to.
When Not Match Trigger Event NameEvent Name when/if the logical operation is not satisfied.
Add rowAdd another row for another event.

Import For Joget User Records

The Joget User Mgnt Utility has an import component to import user records into Joget DX. You can download the app from Joget Marketplace.

Download Demo App

Download the following sample app and CSV file to demonstrate the use of Import component.


  • No labels