Skip to main content
Version: 13.x (Current)

Export Modal



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

It 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.

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)
  • the date format of each date type field, if any
  • the date time zone of each date type field, if any

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.

How to configure

The Export Modal does not require any particular configuration, however it is possible to specify the options for the date format and date time zone select inputs.

"tag": "bk-export-modal"

Date format options

To specify the options for the date format select inputs, dateFormatOptions must be used. The default is YYYY-MM-DDTHH:mm:ss.msZ. They accept an array of Options:

type Option = {
label: string
value: string

The value must be a MongoDB supported format. See Format Specifiers for more information.

"tag": "bk-export-modal",
"properties": {
"dateFormatOptions": [
{"value": "%d-%m-%Y", "label": "DD-MM-YYYY"}

Time zone options

To specify the options for the date time zone, dateTimeZoneOptions must be used. The default is UTC time.

It is an array of Option like the one described above. The value must be an UTC Offsets or a Olson Timezone Identifier.

"tag": "bk-export-modal",
"properties": {
"dateTimeZoneOptions": [
{"value": "+01:00", "label": "(GMT +01:00) Berlin/Rome"},
{"value": "Africa/Cairo", "label": "Cairo"}


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
format: string
formatCustomizedPlaceholder: string
timezone: string,
timezoneCustomizedPlaceholder: string


Properties & Attributes

dateFormatOptions-Option[][{value: '%Y-%m-%d', label: 'YYYY-MM-DD'}, {value: '%Y-%m-%d %H:%M', label: 'YYYY-MM-DD HH:mm'}]The list of options for the date format select
dateTimeZoneOptions-Option[][{value: '\<the-current-timezone>', label: '\<the-current-timezone-name>'}]The list of options for the date time zone select

Listens to

export-data/request-configprompts modal opening


export-data/user-confignotifies the bus of user config for next export data task