Versions Compared

Old Version 7

changes.mady.by.user Amoeba

Saved on

compared with

New Version Current

changes.mady.by.user PT

Saved on

Key

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

Table of Contents

Introduction

The Import Menu is a feature to import 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:

English
Info

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

Figure 1: Import Element in Userview UI Runtime




Import Properties

Configure Import

Image Removed

Image Added

Figure 2.1: Import Menu Properties Default

Image Removed

Figure 2.2 Import Menu Properties Extended

Properties 


separater
NameDescription
LabelThe UI Builder page component label. You can add Font Awesome Icons into your component labels. Default label is Import.
Menu
NameDescription
Custom 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.

LabelThe UI Builder page component label. You can add Font Awesome Icons into your component labels

.

Default label is Import.

Form

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.

Info
titlePost 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.

Image RemovedImage Added

Column Mapping
NameDescription
Column Number

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

Image Modified

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.

Info
titleExample
Image Removed
Image Added

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.

Info
titleExample

Image Modified

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


NameDescription
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 datalistList.

UI Properties

Figure 54: UI Properties


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


Advanced Properties

Image Added

Figure 5: Import Menu Properties - Advanced


NameDescription
Disable delete record feature

Disables the option for end users to delete records.

Advance Properties

Image Removed

Figure 6: Import Menu Properties - Advanced

When checked, it will check the uploaded file if it is a valid UTF-8 encoded file
UTF-8 Encoding Checking?When checked, it will check the uploaded file if it is a valid UTF-8 encoded file.
UI
NameDescription
Userview Key Name

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

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

UTF-8 Encoding Checking?

.



Panel
borderColorblue
borderWidth1
borderStylesolid

Example:

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

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


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


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


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


Performance & OfflineOffline 

Cache Settings

Image Added

Figure 10: Import Menu Properties - Performance & Offline Settings Image Removed


Name

Description

Scope

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 which allows one to cache existing content for improved performance and loading speed.
Panel
borderColorpurple
bgColor#fefaff
borderWidth1
titleBGColor#ddccff
borderStylesolid

Read more at Performance Improvement with

Userview

UI Caching.



Import

Userview

UI Element For Joget User Records

The Joget User Mgnt Utility has an import menu 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 Menu.

View filenameAPP_jusermanager-user-import-menu.jwaheight150  

View filenamesample_import_user.csvheight150