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
onSubmitcallback. 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!
Pulter provides different client libraries (Javascript, React, VueJs, Angular) which you can drop directly into your app.
.png?alt=media&token=18bbcbfd-43a0-4d4c-8715-ef371da4dfd9)
copy the Template ID to use in the Pulter Component
Javascript
React
Vue
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: '[email protected]',
}
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.
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.
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 isimportIdentifierFor 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): typestringThe unique ID of the customer in your applicationname: typestringAn optional name of the customer in your applicationemail: typestringAn optional email of the customer in your applicationcompanyId: typestringAn optional company id of the customer in your applicationcompanyName: typestringAn 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.
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): typestringThe unique ID of the customer in your applicationname: typestringAn optional name of the customer in your applicationemail: typestringAn optional email of the customer in your applicationcompanyId: typestringAn optional company id of the customer in your applicationcompanyName: typestringAn 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
React
Vue
<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: '[email protected]',
}
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>
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}
/>
<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>
Last modified 7mo ago