Documentation
Introduction
Onboard data with delightful transformation Empower you to upload, validate, and clean your csv, xls, and xlsx files. Allow us to take care of the infrastructure so you can concentrate on your product.
Your customers may not have expressed it yet, but they likely find their data onboarding experience frustrating. It’s crucial for them to swiftly recognize the value of their data within your system. However, this becomes challenging when they’re occupied with tasks like mapping spreadsheet fields, resolving validation errors, or navigating through lengthy documentation. Instead of fostering relationships, you end up primarily cleaning their data
Install
We’ve made it really simple for you to get started with xlork with our new XLorkClient Component. Here’s what you’ll need to know to get started.
Try demos from Codesandbox
Fork XlorkClient Component and play with options.
<XLorkClient
licenseKey="XXXX-XXXX-XXXX-XXXX"
user={{
email: "docs-react@xlork.com",
name: "Free user",
}}
settings={{
columns: [
{
label: "Address",
key: "address",
type: "text", // date, dropdown, select, numeric, autocomplete, email, ip, url, text
validators: {
requiredWithout: ["Latitude", "Longitude"],
// required, regexMatches, regexExcludes, minLength , maxLength
error: "required if lattitude and longitude not available."
}
},
{
label: "Latitude",
type: "text", // default: 'text'
key: "latitude"
},
{
label: "Longitude",
key: "longitude"
},
{
label: "Country",
key: "country",
},
{
label: "Order Type",
key: "type",
type: "dropdown",
options: ["home", "office"],
},
{
label: "Email",
key: "email",
validators: {
validate: "required",
},
},
{
label: "Name",
key: "name",
},
{
label: "Duration",
key: "stop_duration",
validators: {
regexMatches: "^null|^$|\\d{1,2}$",
error: "Only can be number and must not be more than 2 digits in length."
}
},
{
label: "Stop date",
key: "stop_date",
type: "date",
dateFormat: "DD/MM/YYYY"
}
],
title: "Orders", // default: "Upload Data"
sampleUrl: "sample.xlsx",
maxRecords:2000,
allowInvalidSubmit: true, // default: false
language: 'en', // default: en
history: true , // default: false
theme: 'SKYBLUE', // default: PURPLE
development: true, // default: false
display: 'inline', // default: "popup"
header: false, // default: true
social: false, // default: true
}}
onComplete={async (response) => {
//console.log(response);
}}
onCancel={() => {
//console.log('onCancel - ----');
}}
loadOnDemand={(init) => {
return (
<button
className="btn btn-outline-primary"
onClick={() => {
init();
}}
>
Upload
</button>
);
}}
/>;
Install
We’ve made it really simple for you to get started with xlork with our new XLorkClient Component. Here’s what you’ll need to know to get started.
<script src="https://cdn.jsdelivr.net/npm/@xlork/core/dist/xlork.min.js"></script> <script src="https://unpkg.com/@xlork/core/dist/xlork.min.js"></script>
Try demos from Codesandbox
Fork XlorkClient Component and play with options.
const config = {
licenseKey: "XXXX-XXXX-XXXX-XXXX",
user: {
email: "docs-vanilla@xlork.com",
name: "Free user",
},
settings: {
columns: [
{
label: "Address",
key: "address",
type: "text", // date, dropdown, select, numeric, autocomplete, email, ip, url, text
validators: {
requiredWithout: ["Latitude", "Longitude"], // required, regexMatches, regexExcludes, minLength , maxLength
error: "required if lattitude and longitude not available."
}
},
{
label: "Latitude",
type: "text", // default: 'text'
key: "latitude"
},
{
label: "Longitude",
key: "longitude"
},
{
label: "Country",
key: "country",
},
{
label: "Order Type",
key: "type",
type: "dropdown",
options: ["home", "office"],
},
{
label: "Email",
key: "email",
validators: {
validate: "required",
},
},
{
label: "Name",
key: "name",
},
{
label: "Duration",
key: "stop_duration",
validators: {
regexMatches: "^null|^$|\\d{1,2}$",
error: "Only can be number and must not be more than 2 digits in length."
}
},
{
label: "Stop date",
key: "stop_date",
type: "date",
dateFormat: "DD/MM/YYYY"
}
],
title: "Orders", // default: "Upload Data"
sampleUrl: "sample.xlsx",
maxRecords:2000,
allowInvalidSubmit: true, // default: false
language: 'en', // default: en
history: true , // default: false
theme: 'SKYBLUE', // default: PURPLE
development: true, // default: false
display: 'inline', // default: "popup"
header: false, // default: true
social: false, // default: true
},
onComplete: (response) => {
//console.log('[onComplete]', response);
},
onCancel: () => {
//console.log('[onCancel]');
},
};
const xlork = new XLorkClient(config);
xlork.init();