csvbox.io
  • Help Center
  • Getting Started
    • 1. Add Template
    • 2. Install Code
    • 3. Receive Data
  • Dashboard Settings
    • Column Options
    • Bulk Add Columns
    • Validations
    • Sheet Options
    • Styling
    • AI Bulk Transforms
  • Advanced Installation
    • Dynamic Columns
    • Virtual Columns
    • Unmapped Columns
    • Ignored Columns
    • Import Links
    • Validation Functions
    • Server Side Validation
    • Data Transforms
    • REST File API
    • Environment Variables
  • Data Destinations
    • Bubble.io
    • Zapier
    • Notion
    • Webflow
    • Private Mode
  • Account
    • Teams
  • Contact Us
  • App
  • Website
  • Login
  • Change Log
  • Suggestions
  • Legal
    • Privacy Policy
    • Terms of Use
    • Cookie Policy
    • User Data Policy
    • GDPR
      • Data Processing Addendum
    • SOC 2 Type 2
Powered by GitBook
On this page
  • Basic Installation
  • Advanced Configuration
  • Receiving Dynamic Data

Was this helpful?

  1. Advanced Installation

Dynamic Columns

Add new columns to the template at run-time.

PreviousAdvanced InstallationNextVirtual Columns

Last updated 6 months ago

Was this helpful?

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.

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 .

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 .

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"         
              }
  ]

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"         
              }
  ]

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.

 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

It is the column name that will be pushed to the data destination.

The user-friendly column label that the users will see in the importer.

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.

Comma-separated set of keywords as alternative matching options to help users match column names automatically.

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.

The validation rules for the data based on the column type. Validator options are mentioned below.

A default filler value for the column in case the incoming data is blank.

It indicates whether a column is mandatory.

It defines the display index of the column. Starts from 1.

If 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 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}$"

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 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:

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.

Basic installation steps are available .

Basic installation steps are available .

*

Note: The special characters in the expression need to be escaped. You may use a tool like for escaping.

this
validators
position
here
here
None
API/Webhook
Amazon S3
here
here
column_name
display_label
info_hint
matching_keywords
type
default_value
required
read_only
Dynamic Columns