Import Modal

<bk-import-modal></bk-import-modal>

The Import Modal renders a modal to allow the user to signal the need for a data import to be performed on a collection.

How to configure

The Import Modal does not require any particular configuration.

{
  "tag": "bk-import-modal"
}

The body of the rendered modal is a form that allows the user to select what parameters should be appended to the import data request. These include:

• the file with the data to be imported
• what encoding should be used ("utf8", "ucs2", ...) to parse the file, in case this is of type CSV
• what delimiter should be used (comma or semicolon) to parse the file, in case this is of type CSV
• what escape character should be used to parse the file, in case this is of type CSV

Supported file extensions are: .ndjson, .json, .csv

Upon submitting the Import Modal, this signals the need to import data with the specified options. A component like the CRUD Client could pick up on this request and trigger data import (as long as backend services includes an instance of the CRUD Service of version 6.9.0 or higher).

Locale

The texts of the Import Modal can be customized through the property customLocale, which accepts an object shaped like the following:

type Locale = {
  modalTitle: LocalizedText
  file: LocalizedText
  fileRequired: LocalizedText
  encoding: LocalizedText
  encodingPlaceholder: LocalizedText
  delimiter: LocalizedText
  delimiterCommaOption: LocalizedText
  delimiterSemicolonOption: LocalizedText
  separator: LocalizedText
  okButton: LocalizedText
  cancelButton: LocalizedText
}

where LocalizedText is either a string or an object mapping language acronyms to strings.

API

Properties & Attributes

property	attribute	type	default	description
method	-	string	-	HTTP method for import request. Can be 'POST' or 'PATCH'

Listens to

event	action
import-data	prompts modal opening

Emits

event	description
import-data/user-config	notifies the bus of user config for next import data task