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

Was this helpful?

  1. Advanced Installation

Environment Variables

Variables to configure the importer environment

Environment variables are dynamic values defined during importer initialization and then can be accessed in the sheet configuration. They enable you to configure the environment of your importer.

The variable values passed during importer initialization will replace the placeholders referenced in the sheet settings using double curly braces.

Defining Environment Variables

  1. Create an object environment.

  2. Add the variables to this object in the <key>: <value> format.

  3. Pass the environment object as a parameter to the importer initialization function.

Pass the environment object to the CSVBoxImporter function as shown below:

<button class="btn btn-primary" data-csvbox disabled onclick="importer.openModal();">Import</button>
<script type="text/javascript" src="https://js.csvbox.io/script.js"></script>
<script type="text/javascript">
    function callback(result, data) {
        if(result){
            console.log("success");
            console.log(data.row_success + " rows uploaded");
            //custom code
        }else{
            console.log("fail");
            //custom code
        }
    }
    
    let importer = new CSVBoxImporter("YOUR_LICENSE_KEY_HERE", {}, callback, 
    {
	lazy: true,
	environment: {
           env_name: 'staging',
           base_url: "https://staging.mydomain.com",
           authorized_domain: "https://staging.myapp.com",
           user_id: "default123"                      
        }
    });
    
    importer.setUser({
        user_id: "default123"
    })
</script>

Minimum version 1.1.11 of the @csvbox/react library is required to use this feature.

Pass environment variables as an object to the environmentproperty of the CSVBoxButton component.

<CSVBoxButton
  licenseKey="YOUR_LICENSE_KEY_HERE"
  user={{
    user_id: "default123"
  }}  
   environment={{
     env_name: 'staging',     
     base_url: "https://staging.mydomain.com",
     authorized_domain: "https://staging.myapp.com",
     user_id: "default123"   
  }}
  
  onImport={(result, data) => {
    if(result){
      console.log("success");
      console.log(data.row_success + " rows uploaded");
      //custom code
    }else{
      console.log("fail");
      //custom code
    }
  }} 
  render={(launch, isLoading)=>{
          return <button disabled={isLoading} onClick={launch}>Upload file</button>;
      }}
>
  Import
</CSVBoxButton>

Minimum version 1.1.12 of the @csvbox/angular library is required to use this feature.

Pass environment variables as an object to the environmentproperty of the AppComponent.

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

export class AppComponent {

  title = 'example';
  licenseKey = 'YOUR_LICENSE_KEY_HERE';
  user = { user_id: 'default123' };
  environment = {
    env_name: 'staging',
    base_url: "https://staging.mydomain.com",
    authorized_domain: "https://staging.myapp.com",
    user_id: "default123"     
  };

  imported(result: boolean, data: any) {
    if(result) {
      console.log("Sheet uploaded successfully");
      console.log(data.row_success + " rows uploaded");
    }else{
      console.log("There was some problem uploading the sheet");
    }
  }
}

Minimum version 1.1.8 of the @csvbox/vuejs library is required to use this feature.

Minimum version 1.1.5 of the @csvbox/vuejs3 library is required to use this feature.

Pass environment variables as an object to the environmentproperty of the CSVBoxButton component.

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

<script>
import { CSVBoxButton } from '@csvbox/vuejs';

export default {
  name: 'App',
  components: {
    CSVBoxButton,
  },
  data: () => ({
    licenseKey: 'YOUR_LICENSE_KEY_HERE',
    user: {
      user_id: 'default123',
    },
     environment = {
      env_name: 'staging',
      base_url: "https://staging.mydomain.com",
      authorized_domain: "https://staging.myapp.com",
      user_id: "default123"    
    },
  }),
  methods: {    
    onImport: function (result, data) {    
       if(result){
          console.log("success");
          console.log(data.row_success + " rows uploaded");
          //custom code
      }else{
          console.log("fail");
          //custom code
      }
    }
  },
}
</script>

Environment variable names should not contain spaces and other special characters apart from _ (underscore).

The env_name variable name is a CSVbox reserved keyword that tags the environment. The import will be categorized in environment based on its value. You can pass values such as 'production', 'staging', 'local' to categorize the import. If no value is passed then the env_name variable will default to 'default' value. The individual imports can be filtered using the env_name inside CSVbox admin dashboard.

Accessing the Variables

Environment variable values will replace all the environment placeholders mentioned in the sheet settings. The placeholders are defined using double curly brackets:

{{ environment_variable_name }}.

For instance, to reference an environment variable named "base_url," use the following syntax with double curly braces around the variable name:

{{base_url}}/route-endpoint

Using environment variables in the webhook URL allows you to dynamically adjust the webhook route based on the specific environment.

Apart from defining the environment, these variables can be used to dynamically configure the importer based on end users or any other system parameters. For example, you can define an environment variable user_id and pass it to the webhook URL to dynamically configure the URL based on the end user.

// Usage
if(csvbox.environment["user_id"] && csvbox.environment["user_id"] == "abc123") {
 
 // code
 
}

Encrypting Environment Variables

AES Everywhere Library

The AES Everywhere library provides a simple and effective way to encrypt and decrypt data using the Advanced Encryption Standard (AES) algorithm. It supports various platforms and programming languages, making it a versatile choice for securing environment variables.

Steps

  • Generate a secure Encryption Key via your CSVbox dashboard. Go to your app admin dashboard > Account Menu > API Keys Page > Encryption Key section.

  • Use your Encryption Key and AES Everywhere library to encrypt the environment variables.

Encrypt all the required environment variables in one single object.

Here is an example using JavaScript:

const AES = require('aes-everywhere');
const secretKey = 'your-encryption-key';

const originalValue = {
                    base_url: "https://staging.mydomain.com",
                    authorized_domain: "https://staging.myapp.com",
                    user_id: "default123"
};

const encryptedValue = AES.encrypt(JSON.stringify(originalValue), secretKey);

console.log(`Encrypted Value: ${encryptedValue}`);
//encrypted value: U2FsdGVkX192dXI7yHGs/4Ed+xEC3ejXFINKO6Hufnc=
  • Add the encrypted value to the environment object. The encrypted value should be passed to the env_encrypted key.

 let importer = new CSVBoxImporter("YOUR_LICENSE_KEY_HERE", {}, callback, 
    {
	lazy: true,
	environment: {
           env_name: 'staging',
           //encrypted values below
           env_encrypted: "U2FsdGVkX192dXI7yHGs/4Ed+xEC3ejXFINKO6Hufnc=",
	   module_id: 234234	                                  
        }
    });
  • The CSVbox importer will decrypt the environment variables using the same AES Everywhere library.

PreviousREST File APINextData Destinations

Last updated 2 months ago

Was this helpful?

Environment variables can also be accessed in , and Javascript code.

You can encrypt environment variables using the to protect sensitive data.

Install the in your app.

Validation Functions
Virtual Columns
Data Transforms
AES Everywhere library
AES Everywhere library
Filter via Environment on the Import page
Defining Environment Placeholder
user_id env variable
Generate Encryption Key