Quickstart - jQuery

Getting your Importer properly configured and running can be challenging if you're not implementing the correct tools. In this quick start guide, you'll learn how to use methods that are accessible in jQuery's library to activate features of the Importer for ease-of-use. Along with our code examples, we'll discuss how to handle the data output and field configuration for desired output.

Before we begin we'll need to initialize the application, please have your License Key ready to start this process. You can find out how to obtain the key by navigating to the Licenses option under the Account settings.

CDNs can offer a performance benefit by hosting jQuery on servers spread across the globe. This also offers an advantage that if the visitor to your webpage has already downloaded a copy of jQuery from the same CDN, it won't have to be re-downloaded.

via jquery.com

Here's an example of the script used to access the jQuery library depending on your preferred CDN host and version of jQuery. This script can be inserted before the ending </body> tag in your html file. In this snippet, the Google CDN is utilized with compressed jQuery library version 3.4.1

Mapping a user's data to your data model can be a tedious process, in this section we'll discuss how to setup your importer and configure the fields according to your database. If you'd like more information on the extent of fields, please refer to this guide: Field Config

If the output you'd like to receive from your user looks like this below:

[

{ name:'John Doe', email:'john@doe.com'},

{ name:'Jane Smith', email:'jane@smith.com'}

]

Configure the Importer with this simple setup here:

<script>

var importer =newFlatfileImporter(LICENSE_KEY,{

fields:[

{

label:'Full Name',

key:'name'

},

{

label:'Email Address',

key:'email'

}

],

})

</script>

This configuration tells Flatfile how to build the UI necessary to help a user map their data to your database. You can provide helpful validators and describe a field to help the user understand what type of data to input.

Here's an example of what your Importer will display with the configuration above with Full Name and Email Address