Export Modal

<bk-export-modal></bk-export-modal>

The Export Modal renders a form inside a modal with standard fields that allow user to configure a data export task.

The Export Modal opens whenever a component signals the need to specify configuration for an export task. That is, whenever a export-data/request-config event is received.

It is usually best to have this event emitted by a component like the CRUD Export Client, which uses it to open the modal with an associated transactionId. For instance, the CRUD Export Client emits a export-data/request-config event upon listening to an export-data event.

How to configure

The Export Modal does not require any particular configuration.

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

The Export Modal allows the user to specify:

• the format onto which data should be exported ("csv" or "xlsx")
• what fiters to apply to the data to be exported. Options are to export the whole collection, to apply the same filters that have been applied to the current visualization of the collection, to export selected items only
• what fields of the collection to include in the export result
• if the specified format is "csv", what separator to use (comma or semicolon)

Upon submitting the form, the Export Modal signals the need to export data accordingly with the specified options. A component like the CRUD Export Client might pick up on the export request.

Locale

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

type Locale = {
  modalTitle: LocalizedText
  fileFormat: LocalizedText
  fileFormatCSVOption: LocalizedText
  fileFormatExcelOption: LocalizedText
  items: LocalizedText
  itemsAllOption: LocalizedText
  itemsFilteredOption: LocalizedText
  itemsSelectedOption: LocalizedText
  columns: LocalizedText
  columnsAllOption: LocalizedText
  columnsCustomizedOption: LocalizedText
  columnsCustomizedPlaceholeder: LocalizedText
  csvSeparator: LocalizedText
  csvSeparatorCommaOption: LocalizedText
  csvSeparatorSemicolonOption: LocalizedText
  okButton: LocalizedText
  cancelButton: LocalizedText
  columnsName: LocalizedText
  columnNameIdOption: LocalizedText
  columnNameLabelOption: LocalizedText
}

API

Properties & Attributes

None

Listens to

event	action
export-data/request-config	prompts modal opening

Emits

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