Portal

Flatfile Portal: From Static to Dynamic Configurations

Brent Kulwicki

Posted 5/17/2021

When working with Flatfile Portal, there are a few different setup details that are required in order for it to work. You need a license key, a configuration which includes the type of import and the fields, and you must identify the customer.

But what if I have different users and each user could potentially have their own unique fields? Will Flatfile still work for me? The answer, of course, is yes, but in the case where Flatfile needs to be dynamic, you have to ensure the user information and any different field configurations are set in your application before initiating the importer. Let's take a look at a static Portal setup and then move on from there.

import FlatfileImporter from "@flatfile/adapter" 
import $ from "jquery"

const schemas = {
Brent: {
userId: 1,
name: "Brent",
fields: [
{ key: "userId", label: "User ID" },
{ key: "email", label: "Email" }
]
},
Roby: {
userId: 2,
name: "Roby",

fields: [
{ key: "first_name", label: "First Name" },
{ key: "last_name", label: "Last Name" },
{ key: "email", label: "Email" }
]
},
Michael: {
userId: 3,
name: "Michael",
fields: [
{ key: "first_name", label: "First Name" },
{ key: "last_name", label: "Last Name" },
{ key: "email", label: "Email" },
{ key: "userId", label: "User ID" }
]
}
};

const importer = new FlatfileImporter("license_key", {
type: "import",
fields: schemas.Brent.fields
})

importer.setCustomer({
userId: schemas.Brent.userId,
name: schemas.Brent.name
})

// assuming there is a button in the HTML with an ID of "launch"

$("#launch").click(() => {
importer.requestDataFromUser()
.then((results) => {
console.log(results);
importer.displaySuccess("Import is complete.");
})
})

In this example, you can see that we have multiple schemas set up in the code, but we don't have anything to make it dynamic. If we added some sort of prompt in this same setup, the code would still run through and things like the fields and customer might be undefined when we run that part of the code. That means, we need to either call the code later after we have some sort of user input (which we will do below) or we need to force the setup to wait until we have user input or (more likely in this scenario) the details about the user back from our server by using Promises.

Let's start with the easier method below to visualize how we can simply put the new FlatfileImporter call inside of the click function.

import FlatfileImporter from "@flatfile/adapter" 
import $ from "jquery"
import { getUser, getUserInfo, getSchema } from "./helpers.js"

// the above functions grab the a value from a dropdown, grab the info
// based on that user and grab the schema for that user
// HTML dropdown of users const userSelect = $("#users");

const schemas = {
Brent: {
userId: 1,
name: "Brent",
fields: [
{ key: "userId", label: "User ID" },
{ key: "email", label: "Email" }
]
},
Roby: {
userId: 2,
name: "Roby",

fields: [
{ key: "first_name", label: "First Name" },
{ key: "last_name", label: "Last Name" },
{ key: "email", label: "Email" }
]
},
Michael: {
userId: 3,
name: "Michael",
fields: [
{ key: "first_name", label: "First Name" },
{ key: "last_name", label: "Last Name" },
{ key: "email", label: "Email" },
{ key: "userId", label: "User ID" }
]
}
};

$("#launch").click(() => {

const importer = new FlatfileImporter("license_key", {
type: "import",
fields: getSchema(getUser(), schemas)
});
importer.setCustomer(getUserInfo(getUser(), schemas));
importer.requestDataFromUser()
.then((results) => {
console.log(results);
importer.displaySuccess("Import is complete.");
})
})

What we have done in the above code is given the application a way to identify the end user/customer, and we've put the importer inside of the "click" function which means that until the user clicks to start the upload, we aren't locking in the fields or customer information.

The TL:DR

  • When you initiate the Flatfile Importer (using new FlatfileImporter ) you lock in the schema for that import reference.
  • If you try to call the setCustomer() or requestDataFromUser() methods before initializing the importer, there will be an error.
  • If you need to pass in the fields and/or customer information dynamically, you need to wait until you have the information you need before initializing the importer by either doing the above and initializing on import or by using Promise chaining to wait for data to come back from your server.

Want to dig into the code? We have this working in a CodeSandbox here.

If interested in signing up for Flatfile Portal, start with a 30 day trial via GitHub.

Want to learn more about our products?
Request a demo