Import Menu

Introduction

The Import Menu is a feature that imports bulk data (in a .csv or Excel file) into a specific Joget form. The Import Menu properties allow you to perform simple column-to-field mapping. When importing records, you can specify the following import mode:

• Import new record only: existing records based on the id field are ignored.
• Import new record or update existing record: Import all records.
• Delete record: Delete matching records in the database if they match the CSV or Excel file based on the primary key.

Configure import menu

To configure Import properties, in UI Builder, drag and drop the Import element onto the canvas and click on it.

When adding Import, you will see the following fields available for configuration:

• Label: Assign a label to the Import menu component, which can include Font Awesome Icons.
• Menu ID: Optional custom component ID. The value defined here must be unique to the rest of the page components, as the first matching name will be called upon.
• Form: Select the target form where imported data will be stored. 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 is updated or created.

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

  
• Column Mapping: Map columns from the source file to corresponding form elements.
  • Column Number: Source file column number (starting from zero).
    
  • Field Name: Corresponding element ID in the target form (consider subform naming conventions).
    
    

     

    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.
    Example:
    
    
• Key Column Number: Define the column number for record IDs. Column number starts from zero.
  
• Start From Row Number: Specify the starting row number for processing. The row number starts from zero.
• Custom CSV Delimiter Character: Symbol to represent the delimiter separator.
• Custom CSV Quote Character: Symbol to represent the regular quote character.

Actions

When configuring the Import Menu, you will encounter fields related to actions that provide feedback and behavior control during and after the import process.

Fields to configure:

• Confirmation Message: Confirmation Message.
• Error Message: Message shown when error occur.
• Message after Import: Message shown after data imported.
• Redirection: URL to redirect, for example, to redirect to the CRUD List.

UI

The UI allows customization of the appearance and additional HTML content for the Import Menu.

Fields to configure:

• Custom Header: Custom Header in HTML.
• Custom Footer: Custom Footer in HTML.

Advanced

The Configure Advanced provides additional settings to enhance the functionality and compatibility of the Import Menu.

Fields to configure:

• Disable Delete Record Feature: Disable end-user delete record feature.
• UTF-8 Encoding Checking?: When checked, it will check whether the uploaded file is a valid UTF-8 encoded file.
• UI Key Name: Corresponding element ID to map UI key value into the field.

Example: 

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

• Source data highlighting data that will be imported into the target form's database table (master).
  
• Data written into the form table (master).
  
• Source data highlighting data that will be imported into the target form's subform's database table (child).
  
• Data written into the form table (child).
  

Performance & offline settings

The Performance & Offline Settings section is essential for optimizing the efficiency and responsiveness of the Import Menu, mainly when dealing with large data sets and ensuring functionality during offline use.

Cache settings

The Cache Settings allows the configuration of caching options to improve performance and enable offline capabilities.

Fields to Configure:

• Scope:
  Options include 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.

For more information, see Performance Improvement with UI Caching.

Import UI element for Joget user records

The Joget User Management Utility has an import menu for importing user records into Joget DX. This feature lets you easily add multiple user records by importing a CSV file. You can download the utility app from Joget Marketplace and use the sample_ import_user CSV file provided for reference.