Comment on page

Dynamic Columns

Add new columns to the template at run-time.

Consider a scenario where you cannot have a fixed template for collecting data. The columns in the data model depend on the end user's preferences and/or some other criteria. 
For such cases, csvbox provides the flexibility to add unique dynamic columns for each import at run-time.
Basic Installation
You can configure dynamic columns via the installation code.
Here's a basic configuration that adds 2 dynamic columns qualification and experience. 
Javascript
React
Angular
Vuejs
Pass the dynamic columns that you want to add as an array input parameter to thesetDynamicColumns()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 dynamicColumnsproperty 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 thedynamicColumnsproperty 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 thedynamicColumnsproperty of theCSVBoxButton component. Example:
  dynamicColumns: [
               {
                 column_name : "qualification"        
               },
               {
                  column_name: "experience"         
              }
  ]
Basic installation steps are available here.
Dynamic columns will be visible in the importer along with the other regular columns.
​
​
Advanced Configuration
Dynamic columns can be configured by passing additional<key>: <value>pairs to the array input parameter of thesetDynamicColumns()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 key that is mandatory for adding a dynamic column.
Configuration Options
Key
Description
​column_name *
It is the column name that will be pushed to the data destination.
​display_label​
The user-friendly column label that the users will see in the importer.
​info_hint​
Info Hints are help tooltips that will get displayed when the users hover the mouse over the Display Label (or click it) in the importer.
​matching_keywords​
Comma-separated set of keywords as alternative matching options to help users match column names automatically. 
​type​
It specifies 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 mentioned below.
​default_value​
A default filler value for the column in case the incoming data is blank.
​required​
It indicates whether a column is mandatory.
​position​
It defines the display index of the column. Starts from 1.
Validator options
Column Type
Validators
Example
text
1.min_length
2.max_length
"min_length": 2,
"max_length": 50
number
1.min_value
2.max_value
3.number_type
- Valid values: "any", "integer"
- Default: "any" 
4.allow_commas
- Valid values: true, false
- Default: false
"min_value": -2,
"max_value": 100,
"number_type": "integer",
"allow_commas": true
email
-
​
date
1.format
"format": ["MM/DD/YYYY", "MM.DD.YYYY", "MM-DD-YYYY"]
boolean
-
​
regex
1.expression
"expression": "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$"
​
Note: The special characters in the expression need to be escaped. You may use a tool like this for escaping.
ip
1.version
"version": “ipv4”
url
-
​
credit_card
-
​
phone_number
1.country_code
"country_code": "de"
currency
1.symbol
2.require_symbol
3.allow_space_after_symbol
4.symbol_after_digits
5.allow_negatives
6.parens_for_negatives
7.negative_sign_before_digits
8.negative_sign_after_digits
9.thousands_separato
10.decimal_separator
11.allow_decimal
12.require_decimal
13.digits_after_decima
14.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 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
1.values
value
display_label (optional)
dependents (optional)
value
display_label
2.case_sensitive
"values": [ 
{"value": "USA", "display_label": "USA", "dependents": [ {"value": "ny", "display_label": "New York"}, {"value": "ch", "display_label": "Chicago"}, {"value": "se", "display_label": "Seatle"}, {"value": "mi", "display_label": "Miami"} ]}, {"value": "Canada", "display_label": "Canada", "dependents": [ {"value": "to", "display_label": "Toronto"}, {"value": "va", "display_label": "Vancouver"}
]}
],
"case_sensitive": false
dependent_list
1.primary_column
"primary_column": "countries"
dynamic_list
1.source_url
2.request_method
3.request_headers
"source_url": "https://api.myapp.com/countries",
"request_method": "POST",
"request_headers": [
{"key": "Content-Type", "value": "application/json"},
{"key": "X-Access-Token", "value": "71ab1d73a4d1319b260e9a0sdbdbc1c"}
]
dependent_dynamic_list
1.primary_column
"primary_column": "countries"
multiselect_list
1.values
2.delimiter (Optional. Default is comma ",")
3.case_sensitive
"values": ["Red", "Green", "Blue"],
"delimiter": ".",
"case_sensitive": false
multiselect_dynamic_list
1.source_url
2.request_method
3.request_headers
4.delimiter (Optional. Default is comma ",")
"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": "."
Column Position
In general, the dynamic columns are displayed only after the regular columns.
The positionparameter helps to re-order the position of the dynamic columns and get them displayed before or in between the regular columns. 
The position value starts from 1 indicating the first position in the final column list. It is an optional parameter while defining the dynamic columns.
Receiving Dynamic Data
The data from the dynamic columns is available in the data destinations along with the data from the regular columns. Currently, dynamic columns are supported by the following destinations only:
1.​None​
2.​API/Webhook​
3.​Amazon S3​
API/Webhook Data Destination
In the API response JSON object, the dynamic data will be displayed inside the _dynamic_data object as shown below. The _dynamic_data object will be visible only if the 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, the dynamic columns will be added as new columns in the uploaded file.
​

Key	Description
column_name *	It is the column name that will be pushed to the data destination.
display_label	The user-friendly column label that the users will see in the importer.
info_hint	Info Hints are help tooltips that will get displayed when the users hover the mouse over the Display Label (or click it) in the importer.
matching_keywords	Comma-separated set of keywords as alternative matching options to help users match column names automatically.
type	It specifies 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 mentioned below.
default_value	A default filler value for the column in case the incoming data is blank.
required	It indicates whether a column is mandatory.
position	It defines the display index of the column. Starts from 1.

Column Type	Validators	Example
text	1. min_length 2. max_length	"min_length": 2, "max_length": 50
number	1. min_value 2. max_value 3. number_type - Valid values: "any", "integer" - Default: "any" 4. allow_commas - Valid values: true, false - Default: false	"min_value": -2, "max_value": 100, "number_type": "integer", "allow_commas": true
email	-
date	1. format	"format": ["MM/DD/YYYY", "MM.DD.YYYY", "MM-DD-YYYY"]
boolean	-
regex	1. expression	"expression": "^[\\w-\\.]+@([\\w-]+\\.)+[\\w-]{2,4}$" Note: The special characters in the expression need to be escaped. You may use a tool like this for escaping.
ip	1. version	"version": “ipv4”
url	-
credit_card	-
phone_number	1. country_code	"country_code": "de"
currency	1. symbol 2. require_symbol 3. allow_space_after_symbol 4. symbol_after_digits 5. allow_negatives 6. parens_for_negatives 7. negative_sign_before_digits 8. negative_sign_after_digits 9. thousands_separato 10. decimal_separator 11. allow_decimal 12. require_decimal 13. digits_after_decima 14. 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 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	1. values value display_label (optional) dependents (optional) value display_label 2. case_sensitive	"values": [ {"value": "USA", "display_label": "USA", "dependents": [ {"value": "ny", "display_label": "New York"}, {"value": "ch", "display_label": "Chicago"}, {"value": "se", "display_label": "Seatle"}, {"value": "mi", "display_label": "Miami"} ]}, {"value": "Canada", "display_label": "Canada", "dependents": [ {"value": "to", "display_label": "Toronto"}, {"value": "va", "display_label": "Vancouver"} ]} ], "case_sensitive": false
dependent_list	1. primary_column	"primary_column": "countries"
dynamic_list	1. source_url 2. request_method 3. request_headers	"source_url": "https://api.myapp.com/countries", "request_method": "POST", "request_headers": [ {"key": "Content-Type", "value": "application/json"}, {"key": "X-Access-Token", "value": "71ab1d73a4d1319b260e9a0sdbdbc1c"} ]
dependent_dynamic_list	1. primary_column	"primary_column": "countries"
multiselect_list	1. values 2. delimiter (Optional. Default is comma ",") 3. case_sensitive	"values": ["Red", "Green", "Blue"], "delimiter": ".", "case_sensitive": false
multiselect_dynamic_list	1. source_url 2. request_method 3. request_headers 4. delimiter (Optional. Default is comma ",")	"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": "."

Advanced Installation

Virtual Columns

Last modified 1mo ago