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

CRUD Export Client

<bk-export-client></bk-export-client>

Frontend client for Mia Platform Export Service.

This component implements the Export Service interface on top of fetch http client on the browser.

It listens the specific events to record the current state of the page:

  1. filters and query changes (that modify data shown by the CRUD Client)
  2. counts the currently filtered items
  3. counts and records items selection (on components such as the Table or the Gallery)

According with Export Service it provides 2 modes:

  1. CSV
  2. Excel

To open an export transaction it listens to an export-data event and return an export-data/awaiting-config event which carries along the following payload

export type AwaitUserConfig = {
total?: number
selected?: number
columns: Option[]
}

where

  • total is the last count of queried items,
  • selected is the count of currently selected items and
  • columns are selectable columns from the data-schema

a Meta contains the transactionId and must be re-cast when options are selected. An export-data/user-config event must then follow with payload

export type ExportUserConfig = {
exportType: 'csv' | 'xlsx'
csvSeparator?: 'COMMA' | 'SEMICOLON'
filters: 'all' | 'filtered' | 'selected'
columns: string[]
}

Once the config is received, the http client calls the Export Service and the download is completed natively by a service worker registered within the browser. The UI is not locked.

How to configure

To configure the CRUD Export Client, properties basePath, exportInternalUrl, dataSchema should be specified.

{
"tag": "bk-export-client",
"properties": {
"basePath": "/export",
"exportInternalUrl": "http://crud-service/customers/export",
"dataSchema": {
"type": "object",
"properties": {
"_id": {"type": "string"},
"__STATE__": {"type": "string"},
"name": {"type": "string"}
}
}
}
}
  • basePath is the endpoint to target for triggering data export, i.e. the Export Service endpoint
  • exportInternalUrl is the internal endpoint of the CRUD Service collection to export
  • dataSchema provides information on the structure of the data of the CRUD Service collection

Furthermore, a primary key should be specified for the targeted collection via property primaryKey, which defaults to _id.

Stream Saver

In order to handle large sized file, a service worker is registered to perform local storage persistence operations instead of using large chunks of memory. To do so an external resource is needed. You can also use the same resource hosted with back-kit JS bundle available at <back-kit endpoint>/export-service-worker.html. In the latter case set streamSaverIFrameSrc to the resource endpoint.

{
"tag": "bk-export-client",
"properties": {
"basePath": "/export",
"exportInternalUrl": "http://crud-service/customers/export",
"dataSchema": {
"type": "object",
"properties": {
"_id": {"type": "string"},
"__STATE__": {"type": "string"},
"name": {"type": "string"}
}
},
"streamSaverIFrameSrc": "/back-kit/{{BACK_KIT_VERSION}}/export-service-worker.html"
}
}

API

Properties & Attributes

propertyattributetypedefaultdescription
basePath-string-the URL base path to which to send HTTP requests
headers-{[key: string]: string}-headers to add when an HTTP request is sent
credentials-'include'|'omit'|'same-origin'-credentials policy to apply to HTTP requests
exportInternalUrlexport-internal-urlstring-url to be called internally to get jsonl formatted data
primaryKeyprimary-keystring'_id'primary key to filter selected data when selected only export option is enabled
streamSaverIFrameSrcstream-saver-iframe-srcstring-location where stream saver service worker files are served
dataSchema-ExtendedJSONSchema7Definition-data-schema describing the fields structure of the CRUD collection

Listens to

eventactionemitson error
export-dataopens a new export transactionexport-data/awaiting-config-
export-data/user-configaccording to config, triggers an exportsuccesserror
count-datanotifies on how many items would be exported on filtered export option--
select-data-bulkkeeps track of items selections to prompt selected export option configuration--
change-querystores current collection filtering--

Emits

eventdescription
export-data/awaiting-configregisters a transaction and awaits for user configs
successnotifies successful data export
errorcontains error message when something goes wrong