> For the complete documentation index, see [llms.txt](https://help.csvbox.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.csvbox.io/advanced-installation/dynamic-columns.md). # Dynamic Columns 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**. {% tabs %} {% tab title="Javascript" %} Pass the dynamic columns that you want to add as an array input parameter to the**`setDynamicColumns()`**method while initializing the importer. ```javascript importer.setDynamicColumns([ { "column_name" : "qualification" }, { "column_name": "experience" } ]) ``` Basic installation steps are available [here](https://help.csvbox.io/advanced-installation/pages/-MOGv6-aW2aB2fgDl2Eo#2.-install-code). {% endtab %} {% tab title="React" %} Pass the dynamic columns as an object to the **`dynamicColumns`**property of the **`CSVBoxButton`** component. ```javascript dynamicColumns={[ { "column_name" : "qualification" }, { "column_name": "experience" } ]} ``` Basic installation steps are available [here](https://help.csvbox.io/advanced-installation/pages/-MOGv6-aW2aB2fgDl2Eo#2.-install-code). {% endtab %} {% tab title="Angular" %} Add `[dynamicColumns]="dynamicColumns"` to the existing template. ``` @Component({ selector: 'app-root', template: ` Import ` }) ``` Then pass the dynamic columns as an object to the**`dynamicColumns`**property of the AppComponent. Example: ```javascript dynamicColumns=[ { column_name : "qualification" }, { column_name: "experience" } ] ``` Basic installation steps are available [here](https://help.csvbox.io/advanced-installation/pages/-MOGv6-aW2aB2fgDl2Eo#2.-install-code). {% endtab %} {% tab title="Vuejs" %} Add `:dynamicColumns="dynamicColumns"` to the existing template. ``` ``` Pass the dynamic columns as an object to the**`dynamicColumns`**property of the**`CSVBoxButton`** component. Example: ```javascript dynamicColumns: [ { column_name : "qualification" }, { column_name: "experience" } ] ``` Basic installation steps are available [here](https://help.csvbox.io/advanced-installation/pages/-MOGv6-aW2aB2fgDl2Eo#2.-install-code). {% endtab %} {% endtabs %} Dynamic columns will be visible in the importer along with the other regular columns. Dynamic Columns ### **Advanced Configuration** Dynamic columns can be configured by passing additional**`: `**pairs to the array input parameter of the**`setDynamicColumns()`**method. Here is an example illustrating more configuration options. {% tabs %} {% tab title="Javascript" %} ```javascript 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 } ]) ``` {% endtab %} {% tab title="React" %} ```javascript 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 } ]} ``` {% endtab %} {% tab title="Angular" %} ```javascript 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 } ]; ``` {% endtab %} {% tab title="Vuejs" %} ```javascript 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 } ] ``` {% endtab %} {% endtabs %} {% hint style="info" %} **column\_name** is the only key that is mandatory for adding a dynamic column. {% endhint %} #### Configuration Options
KeyDescription
column_name *It is the column name that will be pushed to the data destination.
display_labelThe user-friendly column label that the users will see in the importer.
info_hintInfo 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_keywordsComma-separated set of keywords as alternative matching options to help users match column names automatically.
typeIt 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.
validatorsThe validation rules for the data based on the column type. Validator options are mentioned below.
default_valueA default filler value for the column in case the incoming data is blank.
requiredIt indicates whether a column is mandatory.
positionIt defines the display index of the column. Starts from 1.
read_onlyIf configured to true then the users will not be able to edit the data of this column. The default value is false.
#### Validator options
Column TypeValidatorsExample
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
  5. 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
  1. format
"format": ["MM/DD/YYYY", "MM.DD.YYYY", "MM-DD-YYYY"]
time
  1. format
"format": ["h:mm:ss","hh:mm:ss"]
boolean-
regex
  1. expression
  2. 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
  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
  3. other_values (Optional. Default is false)
  4. 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": "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,
"other_values": false,
"accept_list_values": true

dependent_list
  1. primary_column
"primary_column": "countries"
dynamic_list
  1. source_url
  2. request_method
  3. request_headers
  4. custom_user_attributes (Optional. Default is true)
  5. 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
  1. primary_column
"primary_column": "countries"
multiselect_list
  1. values
  2. delimiter (Optional. Default is comma ",")
  3. case_sensitive
  4. other_values (Optional. Default is false)

"values": ["Red", "Green", "Blue"],

"delimiter": ".",
"case_sensitive": false,
"other_values": false

multiselect_dynamic_list
  1. source_url
  2. request_method
  3. request_headers
  4. delimiter (Optional. Default is comma ",")
  5. 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** In general, the dynamic columns are displayed only after the regular columns. The `position`parameter 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](/destinations.md#none) 2. [API/Webhook](/destinations.md#webhook) 3. [Test API](/destinations.md#test-api) 4. [Amazon S3](/destinations.md#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. ```json [ { "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.