Dynamic Columns

Sometimes you can’t use a fixed template to collect data, because the columns in the data model depend on the end user’s preferences or other criteria. For these cases, CSVbox lets you add unique dynamic columns to each import at run time.

Basic installation

Configure dynamic columns in the installation code. Here’s a basic configuration that adds 2 dynamic columns, qualification and experience.

Javascript
React
Angular
Vuejs

Pass the dynamic columns you want to add as an array input parameter to the setDynamicColumns() method while initializing the importer.

importer.setDynamicColumns([
         {
          "column_name" : "qualification"
         },
         {
          "column_name": "experience"
          }
])

Basic installation steps are available here.

Pass the dynamic columns as an object to the dynamicColumns property of the CSVBoxButton component.

  dynamicColumns={[
               {
                 "column_name" : "qualification"
               },
               {
                  "column_name": "experience"
              }
  ]}

Basic installation steps are available here.

Add [dynamicColumns]="dynamicColumns" to the existing template.

@Component({
  selector: 'app-root',
  template: `
    <csvbox-button
      [licenseKey]="licenseKey"
      [user]="user"
      [dynamicColumns]="dynamicColumns"
      [imported]="imported.bind(this)">
      Import
    </csvbox-button>
  `
})

Then pass the dynamic columns as an object to the dynamicColumns property of the AppComponent. Example:

  dynamicColumns=[
               {
                 column_name : "qualification"
               },
               {
                  column_name: "experience"
              }
  ]

Basic installation steps are available here.

Add :dynamicColumns="dynamicColumns" to the existing template.

<template>
  <div id="app">
    <CSVBoxButton
      :licenseKey="licenseKey"
      :user="user"
      :dynamicColumns="dynamicColumns"
      :onImport="onImport">
      Upload File
    </CSVBoxButton>
  </div>
</template>

Pass the dynamic columns as an object to the dynamicColumns property of the CSVBoxButton component. Example:

  dynamicColumns: [
               {
                 column_name : "qualification"
               },
               {
                  column_name: "experience"
              }
  ]

Basic installation steps are available here.

Dynamic columns are visible in the importer along with the other regular columns.

Advanced configuration

Configure dynamic columns further by passing additional <key>: <value> pairs to the array input parameter of the setDynamicColumns() method. Here is an example illustrating more configuration options.

Javascript
React
Angular
Vuejs

 importer.setDynamicColumns([
         {
          "column_name" : "qualification",
          "display_label": "Highest Qualification",
          "info_hint": "What is your highest educational degree",
          "matching_keywords": "degree, education",
          "type": "text",
          "validators":
            {
              "min_length": 2,
              "max_length": 50
            },
          "default_value": "Masters",
          "position": 2,
          "required": true
        },
        {
          "column_name": "experience",
          "display_label": "Work Experience",
          "info_hint": "Years of work experience",
          "matching_keywords": "",
          "type": "number",
          "validators":
            {
              "min_value": 0,
              "max_value": 100
            },
          "position": 4,
          "required": false
        },
        {
          "column_name": "gender",
          "display_label": "Gender",
          "info_hint": "",
          "matching_keywords": "",
          "type": "list",
          "validators":
            {
              "values": [
                              {"value": "m", "display_label": "male"},
                              {"value": "f", "display_label": "female"}
                        ],
              "case_sensitive": false
            },
          "required": true
        }
])

  dynamicColumns={[
         {
          "column_name" : "qualification",
          "display_label": "Highest Qualification",
          "info_hint": "What is your highest educational degree",
          "matching_keywords": "degree, education",
          "type": "text",
          "validators":
          {
            "min_length": 2,
            "max_length": 50
          },
          "default_value": "Masters",
          "position": 2,
          "required": true
    },
 {
          "column_name": "experience",
          "display_label": "Work Experience",
          "info_hint": "Years of work experience",
          "matching_keywords": "",
          "type": "number",
          "validators":
          {
            "min_value": 0,
            "max_value": 100
          },
          "position": 4,
          "required": false
    },
    {
          "column_name": "gender",
          "display_label": "Gender",
          "info_hint": "",
          "matching_keywords": "",
          "type": "list",
          "validators":
          {
            "values": [
                            {"value": "m", "display_label": "male"},
                            {"value": "f", "display_label": "female"}
                      ],
            "case_sensitive": false
          },
          "required": true
    }
]}

dynamicColumns=[
    {
     column_name: "qualification",
     display_label: "Highest Qualification",
     info_hint: "What is your highest educational degree",
     matching_keywords: "degree, education",
     type: "text",
     validators:
     {
       min_length: 2,
       max_length: 50
     },
     default_value: "Masters",
     position: 2,
     required: true
  },
  {
     column_name: "experience",
     display_label: "Work Experience",
     info_hint: "Years of work experience",
     matching_keywords: "",
     type: "number",
     validators:
     {
       min_value: 0,
       max_value: 100
     },
     position: 4,
     required: false
  },
  {
     column_name: "gender",
     display_label: "Gender",
     info_hint: "",
     matching_keywords: "",
     type: "list",
     validators:
     {
       values: [
                       {value: "m", display_label: "male"},
                       {value: "f", display_label: "female"}
                 ],
       case_sensitive: false
     },
     required: true
  }
  ];

 dynamicColumns: [
  {
   column_name: "qualification",
   display_label: "Highest Qualification",
   info_hint: "What is your highest educational degree",
   matching_keywords: "degree, education",
   type: "text",
   validators:
   {
     min_length: 2,
     max_length: 50
   },
   default_value: "Masters",
   position: 2,
   required: true
},
{
   column_name: "experience",
   display_label: "Work Experience",
   info_hint: "Years of work experience",
   matching_keywords: "",
   type: "number",
   validators:
   {
     min_value: 0,
     max_value: 100
   },
   position: 4,
   required: false
},
{
   column_name: "gender",
   display_label: "Gender",
   info_hint: "",
   matching_keywords: "",
   type: "list",
   validators:
   {
     values: [
                     {value: "m", display_label: "male"},
                     {value: "f", display_label: "female"}
               ],
     case_sensitive: false
   },
   required: true
}
]

column_name is the only mandatory key for adding a dynamic column.

Configuration options

Key	Description
column_name *	The column name that is pushed to the data destination.
display_label	The user-friendly column label that users see in the importer.
info_hint	Help tooltips displayed when users hover the mouse over the Display Label (or click it) in the importer.
matching_keywords	Comma-separated set of keywords used as alternative matching options to help users match column names automatically.
type	The data type of the incoming data. Possible values are: text, number, email, date, boolean, regex, ip, url, credit_card, phone_number, currency, list, dependent_list, dynamic_list, dependent_dynamic_list, multiselect_list, and multiselect_dynamic_list.
validators	The validation rules for the data, based on the column type. Validator options are listed below.
default_value	A default filler value for the column in case the incoming data is blank.
required	Indicates whether a column is mandatory.
position	The display index of the column. Starts from 1.
read_only	If set to true, users can’t edit the data in this column. The default value is false.

Validator options

Column Type	Validators	Example
text	min_length max_length	”min_length”: 2, “max_length”: 50
number	min_value max_value number_type - Valid values: “any”, “integer” - Default: “any” allow_commas - Valid values: true, false - Default: false excel_value - Valid values: “raw”, “formatted” - Default: “formatted”	“min_value”: -2, “max_value”: 100, “number_type”: “integer”, “allow_commas”: true, “excel_value”: “raw”
email	-
date	format	”format”: [“MM/DD/YYYY”, “MM.DD.YYYY”, “MM-DD-YYYY”]
time	format	”format”: [“h:mm:ss”,“hh:mm:ss”]
boolean	-
regex	expression error_message	”expression”: ”^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$”, “error_message”: “Invalid format” Note: The special characters in the expression need to be escaped. You may use a tool like this for escaping.
ip	version	”version”: “ipv4”
url	-
credit_card	-
phone_number	country_code	”country_code”: “de”
currency	symbol require_symbol allow_space_after_symbol symbol_after_digits allow_negatives parens_for_negatives negative_sign_before_digits negative_sign_after_digits thousands_separator decimal_separator allow_decimal require_decimal digits_after_decimal allow_space_after_digits Note: The array `digits_after_decimal` is filled with the exact number of digits allowed, not a range. For example, a range of 1 to 3 will be given as [1, 2, 3].	“symbol”: ”$”, “require_symbol”: false, “allow_space_after_symbol”: false, “symbol_after_digits”: false, “allow_negatives”: true, “parens_for_negatives”: false, “negative_sign_before_digits”: false, “negative_sign_after_digits”: false, “thousands_separator”: ”,”, “decimal_separator”: ”.”, “allow_decimal”: true, “require_decimal”: false, “digits_after_decimal”: 2, “allow_space_after_digits”: false
list	values value display_label (optional) dependents (optional) value display_label case_sensitive other_values (Optional. Default is false) accept_list_values (Optional. Default is false)	“values”: [ {“value”: “USA”, “display_label”: “USA”, “dependents”: [ {“value”: “ny”, “display_label”: “New York”}, {“value”: “ch”, “display_label”: “Chicago”}, {“value”: “se”, “display_label”: “Seattle”}, {“value”: “mi”, “display_label”: “Miami”} ]}, {“value”: “Canada”, “display_label”: “Canada”, “dependents”: [ {“value”: “to”, “display_label”: “Toronto”}, {“value”: “va”, “display_label”: “Vancouver”} ]} ], “case_sensitive”: false, “other_values”: false, “accept_list_values”: true
dependent_list	primary_column	”primary_column”: “countries”
dynamic_list	source_url request_method request_headers custom_user_attributes (Optional. Default is true) other_values (Optional. Default is false)	“source_url”: “https://api.myapp.com/countries”, “request_method”: “POST”, “request_headers”: [ {“key”: “Content-Type”, “value”: “application/json”}, {“key”: “X-Access-Token”, “value”: “71ab1d73a4d1319b260e9a0sdbdbc1c”} ], custom_user_attributes: true, “other_values”: false
dependent_dynamic_list	primary_column	”primary_column”: “countries”
multiselect_list	values delimiter (Optional. Default is comma ”,“) case_sensitive other_values (Optional. Default is false)	“values”: [“Red”, “Green”, “Blue”], “delimiter”: ”.”, “case_sensitive”: false, “other_values”: false
multiselect_dynamic_list	source_url request_method request_headers delimiter (Optional. Default is comma ”,“) other_values (Optional. Default is false)	“source_url”: “https://api.myapp.com/colors”, “request_method”: “POST”, “request_headers”: [ {“key”: “Content-Type”, “value”: “application/json”}, {“key”: “X-Access-Token”, “value”: “71ab1d73a4d1319b260e9a0sdbdbc1c”} ], “delimiter”: ”.”, “other_values”: false

Column position

By default, dynamic columns are displayed after the regular columns. The position parameter re-orders the dynamic columns so they display before or in between the regular columns. The position value starts from 1, which indicates the first position in the final column list. It is an optional parameter when defining dynamic columns.

Receiving dynamic data

Data from dynamic columns is available in the data destinations along with the data from the regular columns. Currently, dynamic columns are supported only by the following destinations:

API/Webhook data destination

In the API response JSON object, the dynamic data appears inside the _dynamic_data object, as shown below. The _dynamic_data object is visible only if dynamic columns are configured for the import. In the example below, check lines 12 and 31.

[
  {
    "import_id": 79418895,
    "sheet_id": 55,
    "sheet_name": "Products",
    "row_number": 1,
    "row_data": {
          "Name": "TP-Link TL-WN822N Wireless N300 High Gain USB Adapter",
          "SKU": "AS-100221",
          "Price": "33.00",
          "Quantity": "3",
          "_dynamic_data":{
		"qualification": "MBA",
		"experience": "3"
           }
    },
    "custom_fields": {
      "user_id": "1002"
    }
  },
  {
    "import_id": 79418895,
    "sheet_id": 55,
    "sheet_name": "Products",
    "row_number": 2,
    "row_data":{
          "Name": "EPower Technology EP-600PM Power Supply 600W ATX12V 2.3 Single 120mm Cooling Fan Bare",
          "SKU": "AS-103824",
          "Price": "95.35",
          "Quantity": "8",
           "_dynamic_data":{
		"qualification": "MA",
		"experience": "6"
           }
        },
    "custom_fields": {
      "user_id": "1002"
    }
  },
]

S3 data destination

In the AWS S3 file store, dynamic columns are added as new columns in the uploaded file.

Getting Started

Dashboard Settings

Sheet Settings

Advanced Installation

Data Destinations

Account

Resources

Legal

Basic installation

Advanced configuration

Configuration options

Validator options

Column position

Receiving dynamic data

API/Webhook data destination

S3 data destination

​Basic installation

​Advanced configuration

​Configuration options

​Validator options

​Column position

​Receiving dynamic data

​API/Webhook data destination

​S3 data destination

Basic installation

Advanced configuration

Configuration options

Validator options

Column position

Receiving dynamic data

API/Webhook data destination

S3 data destination