| Table of Contents |
|---|
Introduction
The Import Userview Element 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 | |||
|---|---|---|---|
It is formerly known as Import Menu in Joget DX 7. |
Figure 1: Import Element in Userview UI Runtime
Import Properties
Configure Import
Figure 2: Import Menu
PropertiesProperties
| Name | Description |
|---|
| Label | The 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. |
| 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.
|
| |||||||||||
| Column Mapping |
|
| |||||||||
| Key Column Number | Define column number that defines the record id. Column number starts from zero. | ||||||||
| Start From Row Number | Define which row number to start processing. 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. |
Action Properties
Figure 3: Action Properties
| Name | Description |
|---|---|
| Confirmation Message | Confirmation Message. |
| Message to show when error occur | Message shown when error occur. |
| Message to show after data imported | Message shown after data imported. |
| Redirection (Hyperlink) | URL to redirect, for example, to redirect to the CRUD datalistList. |
UI Properties
Figure 54: UI Properties
| Name | Description |
|---|---|
| Custom Header | Custom Header in HTML. |
| Custom Footer | Custom Footer in HTML. |
Advanced Properties
Figure 5: Import Menu Properties - Advanced
| Name | Description |
|---|---|
| Disable delete record feature | Disables the option for end users to delete records. |
Advance Properties
Figure 6: Import Menu Properties - Advanced
| UTF-8 Encoding Checking? | When checked, it will check the uploaded file if it is a valid UTF-8 encoded file. |
| UI | |
| Name | Description |
|---|---|
| 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? | When checked, it will check the uploaded file if it is a valid UTF-8 encoded file. |
| Panel | ||||||
|---|---|---|---|---|---|---|
| ||||||
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 & Offline
Figure 10: Import Menu Properties - Performance & Offline
PropertiesYou can configure the Performance settings in this Userview Element which allows one to cache existing content for improved performance and loading speed.Settings
Name | Description |
|---|---|
| Scope | Caching options are:
|
| Duration (s) | Duration in seconds to cache content, defaults to 20 seconds if applicable. |
| Panel | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
Read more at Performance Improvement with |
Import
MenuUI 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 file