Install Code

Pulter provides a widget which you embed into your frontend. This widget will guide your users through selecting a file to upload, matching the columns to your schema, and correcting any errors.

When this is complete, there are two ways you can opt to receive your cleaned data.

1. With an onSubmit callback. When the user completes the import process, Pulter will execute this callback with the structured data in JSON format.

2. Via the Pulter API. Pulter will send your app a webhook whenever an import is completed and ready to fetch.

Let's get started adding Pulter to your app!

REQUIREMENT

You'll need a data template license key to try Pulter. You can sign up for an account here or log in to your existing account here.

Install Code

Pulter provides different client libraries (Javascript, React, VueJs, Angular) which you can drop directly into your app.

copy the Template ID to use in the Pulter Component

Javascript

Sample code with basic usage:

<script type="text/javascript" src="https://js.pulter.co/script.js"></script>
<script type="text/javascript">
  function callback(result, data) {
    if(result){
      console.log("success");
      console.log(data + " data uploaded");
      //custom code
    }else{
      console.log("fail");
      //custom code
    }
  }
  
  const fields = [
      {
        label: "Name",
        key: "name",
        alternateMatches: [
          "first name",
          "first"
        ],
        fieldType: {
          type: "input",
        },
        example: "Stephanie",
        validations: [
          {
            // Can be "required" / "unique" / "regex"
            rule: "required",
            errorMessage: "Name is required",
            level: "error",
          },
        ],
      },
    ];

    const user = {
      id: 'ojewdihucjnweud',
      name: 'John Doe',
      email: '[e-mail]',
    }
    
    const configuration = {
      isOpen: true,
      allowInvalidSubmit: false,
      maxRecords: 100,
      maxFileSize: 1048576,
      autoMapHeaders: true,
      autoMapDistance: 2
    }

    let importer = new Pulter("cl3xnfvty0844nk991z37kh8p", fields, user, 
    configuration, callback);
      
</script>

Each template has a unique Template ID. Find the Template ID of the template on the Settings of the template page and pass it to the Pulter function.

React

Install using npm:

npm install @pulter/react

This will give you access to the Pulter component having the basic functionality of our importer. Import the Pulter component to your project.

import { Pulter } from '@pulter/react'

Basic usage:

<Pulter 
templateId={'cl3xnfvty0844nk991z37kh8p'} 
  isOpen={true} 
  onClose={() => {
    console.log('closed');
  }} 
  onSubmit={(success, data) => {
    console.log(success, data);
  }} 
/>

Each template has a unique Template ID. Find the Template ID of the template on the Settings of the template page and attach it to the templateId property of the Pulter component.

Vue

Install using npm:

npm install @pulter/vuejs

This will give you access to the Pulter component. Import the Pulter component to your project.

import { Pulter } from '@pulter/vuejs'

Now just import the Pulter and include it in your Vue components, and you're ready to get started.

Basic usage:

<template>
  <div>
    <Pulter 
      templateId="Data Template ID" 
      :user="{ id: 'default123' }" 
      :onSubmit="onSubmit" 
    />
  </div>
</template>
<script>

import Pulter from './components/Pulter'

export default {
  name: 'App',
  components: {
    Pulter
  },
  methods: {
    onSubmit(result, data){
      console.log(result, data);
      if(result){
        console.log("success");
        console.log(data + " data uploaded");
        //custom code
      }else{
        console.log("fail");
        //custom code
      }
    }
  },
  mounted() {
    
  },
}
</script>

Each sheet has a unique Licence Key. Find the Licence Key of the sheet on the Code section of the sheet page and attach it to the licenseKey property of the CSVBoxButton component.

Here is a quick summary of the properties you can configure. To get more details about each property, visit our settings guide.

• settings (required): An object that configures Dromo. The only required key is importIdentifier For a list of the other optional configurations, check out our settings documentation. You can also pass in custom styles so Dromo matches the look and feel of your application. For more information, check out the styling section in the settings documentation.
• fields (required): An object that defines your target schema or data model that a user must map their data to. For more details, check out our fields documentation.
• user (required): Pass in an object that identifies the user in your application uploading the file. The user object has the following required keys:

  • id (required): type string The unique ID of the customer in your application

  • name: type string An optional name of the customer in your application

  • email: type string An optional email of the customer in your application

  • companyId: type string An optional company id of the customer in your application

  • companyName: type string An optional company name of the customer in your application

• templateId (required): You must get the data template ID to use Pulter. You can find your template ID by logging in here.
• onClose: An optional callback function that will run if the user closes or cancel the importer.

• onSubmit: An optional callback to receive the upload results (in the frontend) when a user completes the upload.

• rowHook: Register or set one or more row hooks as separate callback functions. See our hooks documentation for more information.
• matchColumnsStepHook: Register or set the match columns step hook as a separate callback function. See our hooks documentation for more information.
• uploadStepHook: Register or set an upload step hook as a separate callback function. See our hooks documentation for more information.
• selectHeaderStepHook: Register or set a select Header Step Hook as a separate callback function. See our hooks documentation for more information.
• tableHook: Register or set table hook as a separate callback function. See our hooks documentation for more information.

Full usage​

Here's an example of more advanced usage, taking advantage of things like custom styling and row hooks.

• fields (required): An object with that defines your target schema or data model that a user must map their data to. For more details, check out our fields documentation.
• user (required): Pass in an object that identifies the user in your application uploading the file. The user object has the following required keys:

  • id (required): type string The unique ID of the customer in your application

  • name: type string An optional name of the customer in your application

  • email: type string An optional email of the customer in your application

  • companyId: type string An optional company id of the customer in your application

  • companyName: type string An optional company name of the customer in your application

• templateId (required): You must have a template ID to use Pulter. You can find your template ID by logging in here.
• onClose: An optional callback function that will run if the user cancels out of the import.

• onSubmit: An optional callback to receive the upload results (in the frontend) when a user completes the upload.

• rowHook: Register or set one or more row hooks as separate callback functions. See our hooks documentation for more information.
• tableHook: Set a table hook as separate callback functions. See our hooks documentation for more information.

Javascript

<script type="text/javascript" src="https://js.pulter.co/script.js"></script>
<script type="text/javascript">
  function callback(result, data) {
    if(result){
      console.log("success");
      console.log(data + " data uploaded");
      //custom code
    }else{
      console.log("fail");
      //custom code
    }
  }
  
  const fields = [
      {
        label: "Name",
        key: "name",
        alternateMatches: [
          "first name",
          "first"
        ],
        fieldType: {
          type: "input",
        },
        example: "Stephanie",
        validations: [
          {
            // Can be "required" / "unique" / "regex"
            rule: "required",
            errorMessage: "Name is required",
            level: "error",
          },
        ],
      },
    ];

    const user = {
      id: 'ojewdihucjnweud',
      name: 'John Doe',
      email: '[e-mail]',
    }
    
    const rowHook = (function (data, addError) {
      // Validation
      if (data.name === "John") {
        addError("name", { message: "No Johns allowed", level: "info" })
      }
      // Transformation
      return { ...data, name: "Not John" }
      // Sorry John
    });

    const configuration = {
      isOpen: true,
      initialStepState: {
        type: 'matchColumns',
        data: [
          ["Josh", "2"],
          ["Charlie", "3"],
          ["Lena", "50"],
        ],
        headerValues: ["name", "age"],
      },

      customTheme: {
        colors: {
          background: 'white',
          rsi: {
            50: '...',
            500: 'teal',
            900: "...",
          },
        },
        components: {
          Button: {
            baseStyle: {
              borderRadius: "none",
            },
            defaultProps: {
              colorScheme: "yellow",
            },
          },
        },
      },

      translations: {
        uploadStep: {
          title: "Upload Employees",
        },
      },
      rowHook: rowHook,
      allowInvalidSubmit: false,
      maxRecords: 100,
      maxFileSize: 1048576,
      autoMapHeaders: true,
      autoMapDistance: 2,
    };
  let importer = new Pulter("cl3xnfvty0844nk991z37kh8p", fields, user, 
    configuration, callback);
      
</script>

React

import { Pulter } from '@pulter/react'

<Pulter templateId={'cl3xnfvty0844nk991z37kh8p'} 
  isOpen={isOpen} 
  onClose={onClose} 
  onSubmit={onSubmit} 
  fields={[
    {
      label: "Name",
      key: "name",
      alternateMatches: [
        "first name", 
        "first"
      ],
      fieldType: {
        type: "input",
      },
      example: "Stephanie",
      validations: [
        {
          // Can be "required" / "unique" / "regex"
          rule: "required",
          errorMessage: "Name is required",
          level: "error",
        },
      ],
    },
  ]} 

  rowHook={(data, addError) => {
    // Validation
    if (data.name === "Stephen") {
      addError("name", 
      { message: "No Stephens allowed", 
      level: "warning" })
    }
    // Transformation
    return { ...data, 
        name: "Stephen not allowed" 
    }
    // Sorry Stephen
  }}

  initialStepState={{
    type: StepType.matchColumns,
    data: [
      ["Josh", "2"],
      ["Charlie", "3"],
      ["Lena", "50"],
    ],
    headerValues: ["name", "age"],
  }}

  customTheme={{
    colors: {
      background: 'white',
      rsi: {
        50: '...',
        500: 'teal',
        900: "...",
      },
    },
    components: {
        Button: {
          baseStyle: {
            borderRadius: "none",
          },
          defaultProps: {
            colorScheme: "yellow",
          },
        },
    },
  }}

  translations={{
    uploadStep: {
      title: "Upload Employees",
    },
  }}

  allowInvalidSubmit= {false}
  maxRecords={100}
  maxFileSize={1048576}
  autoMapHeaders={true}
  autoMapDistance={2}
/>

Vue

<template>
  <div>
    <Pulter 
      templateId="Data Template ID" 
      :user="{ id: 'default123' }" 
      :onSubmit="onSubmit" 
    />
  </div>
</template>
<script>

import Pulter from './components/Pulter'

export default {
  name: 'App',
  components: {
    Pulter
  },
  methods: {
    onSubmit(result, data){
      console.log(result, data);
      if(result){
        console.log("success");
        console.log(data + " data uploaded");
        //custom code
      }else{
        console.log("fail");
        //custom code
      }
    }
  },
  mounted() {
    
  },
}
</script>