Install Code

Dromo 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.

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: 'john.doe@example.com',
    }
    
    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.

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.

<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: 'john.doe@example.com',
    }
    
    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>
PreviousAdd Data TemplateNextReceive Data

Last updated