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.
 

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();

				
			

Comming Soon..