Version: 13.x (Current)

Data Import / Export

Back-kit components offer components to interact with backend solutions that perform import or export of data.

Data Export

To perform data export, Back-kit provides clients for the following backend solutions:

Mia Platform CRUD Service export functionality
Mia Platform Export Service

Data Export with CRUD Service

To leverage the CRUD Service export functionality, the CRUD Export component should be included in the configuration.

The CRUD Export requires two properties to be configured for its most basic usage:

basePath, which is the targeted endpoint for performing data export
a data-schema, which provides information on the structure of the data of the associated CRUD Service collection

{
  "tag": "bk-export",
  "properties": {
    "basePath": "/v2/orders/export",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"}
      }
    }
  }
}

To initiate the export, an export-data event must be emitted. Several Back-kit components allow to emit customizable events.

Following is an example of how the CRUD Service export can be achieved combining the CRUD Export and a Button.

Data Export with Export Service

To leverage the Export Service export functionality, the following components should be included in the configuration:

The CRUD Export Client, which must be configured with:

a basePath, which is the endpoint of the Export Service for performing data export
a exportInternalUrl, which is the endpoint of the CRUD collection of which to perform the export
a data-schema, which provides information on the structure of the data of the associated CRUD Service collection

{
  "tag": "bk-export-client",
  "properties": {
    "basePath": "/export",
    "exportInternalUrl": "http://crud-service/orders/export",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

The Export Modal, which requires no configuration
```
{
  "tag": "bk-export-modal"
}
```

To initiate the export, an export-data event must be emitted. Several Back-kit components allow to emit customizable events.

Following is an example of how the Export Service can be used to export data, initiating the process with a Button.

Data Import

Back-kit components allow to leverage the import API of Mia Platform CRUD Service.

To do so, the following components should be included in the configuration:

The CRUD Client, which must be configured with:

a basePath, which is the endpoint to reach the associated CRUD collection
a data-schema, which provides information on the structure of the data of the associated CRUD Service collection

{
  "tag": "bk-crud-client",
  "properties": {
    "basePath": "/v2/orders",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

The Import Modal, which requires no configuration
```
{
  "tag": "bk-import-modal"
}
```

To initiate the import, an import-data event must be emitted. Several Back-kit components allow to emit customizable events.

Following is an example of how the CRUD Service import can be achieved initiating the process with a Button.

Examples

Example: Trigger CRUD export data with a button

To leverage the export functionality of the CRUD Service, the CRUD Export component should be included in the configuration. To initiate the export process, an export-data event must be emtted.

The following snippet of configuration can be used to trigger the export using a Button.

{
  "tag": "bk-button",
  "properties": {
    "iconId": "DownloadOutlined",
    "content": {
      "en": "Export",
      "it": "Esporta"
    },
    "action": {
      "type": "event",
      "config": {
        "events": "export-data"
      }
    }
  }
},
{
  "tag": "bk-export",
  "properties": {
    "basePath": "/v2/orders/export",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

The Button component can be configured to perform a Back-kit Action when clicked. Back-kit Actions allow to perform various tasks. In this case, the button is configured to emit an export-data event with an empty payload.

This event is listened by the CRUD Export component, which triggers an HTTP call to the endpoint "/v2/orders/export" following the CRUD Service export interface.

Example: Trigger Export Service export data with a button

To leverage the export functionality of the Export Service, the CRUD Export Client and the Export Modal components should be included in the configuration. To initiate the export process, an export-data event must be emtted.

The following snippet of configuration can be used to trigger the export using a Button.

{
  "tag": "bk-button",
  "properties": {
    "iconId": "DownloadOutlined",
    "content": {
      "en": "Export",
      "it": "Esporta"
    },
    "action": {
      "type": "event",
      "config": {
        "events": "export-data"
      }
    }
  }
},
{
  "tag": "bk-export-modal"
},
{
  "tag": "bk-export-client",
  "properties": {
    "basePath": "/export",
    "exportInternalUrl": "http://crud-service/orders/export",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

This event is listened by the CRUD Export Client component, which triggers the opening of the Export Modal. The Export Modal includes a form that allows the user to configure the export parameters. Once the form of the Export Modal is submitted, the CRUD Export Client uses its information to configure and perform an HTTP call to the Export Service, which triggers the data export.

Example: Trigger data import data with a button

To leverage the import functionality of the CRUD Service, the CRUD Client and the Import Modal components should be included in the configuration. To initiate the import process, an import-data event must be emtted.

The following snippet of configuration can be used to trigger the data import using a Button.

{
  "tag": "bk-button",
  "properties": {
    "icon": "fas fa-upload",
    "content": {
      "en": "Import",
      "it": "Importa"
    },
    "action": {
      "type": "event",
      "config": {
        "events": "import-data"
      }
    }
  }
},
{
  "tag": "bk-import-modal"
},
{
  "tag": "bk-crud-client",
  "properties": {
    "basePath": "/v2/orders",
    "dataSchema": {
      "type": "object",
      "properties": {
        "_id": {"type": "string"},
        "__STATE__": {"type": "string"},
        "name": {"type": "string"},
        "price": {"type": "number"}
      }
    }
  }
}

This event is triggers the opening of the Import Modal. The Import Modal includes a form that allows the user to upload a file containing the data to import, as well as configure some parameters of the import task. Once the form of the Import Modal is submitted, the CRUD Client uses its content to configure and perform an HTTP call to the CRUD Service, which imports the data.

Data Export​

Data Export with CRUD Service​

Data Export with Export Service​

Data Import​

Examples​

Example: Trigger CRUD export data with a button​

Example: Trigger Export Service export data with a button​

Example: Trigger data import data with a button​