The DevXP engineering team hosts office hours every Thursday at 11 a.m.
Pacific Time where we answer your questions live and help you get up and
running with Flatfile. Join
us!
For synchronous data import/exchange completed in one session, create a new
Space each time Flatfile is opened. This suits situations where a clean slate
for every interaction is preferred.
├── src/ ├── App.vue ├── config.ts ├── main.ts ├── shims-vue.d.ts (optional if you have errors when importing App.vue) ├── vite-env.d.ts ├── styles.css (optional) └── listener.ts (wait to add this)├── index.html├── tsconfig.json├── tsconfig.node.json├── vite.config.ts├── .env (for your keys)├── package.json <--- already created└── package-lock.json <--- already created
In this file structure, your main directory is src.
Depending on how you want to handle styling your application, you can have a
styles.css file in your src directory, create sub-directories to contain style
files, or even create directories outside of src if you prefer. The only
requirement is that the files can be imported into vue files.
The heart of your vue app will be App.vue, as this will configure and render
your component(s) to the index.html.
Add a button to your application to open Flatfile in a modal. Pass in your
publishableKey and a new Space will be created on each page load. Optionally,
add the content here to your styles.css.
In your environment file, you’ll need to define your keys. In this example, you
will need your publishableKey. You can find these under “Developer settings”
when logged into platform.flatfile.com.
You can create your .env file via the template below, as well as your
App.vue, tsconfig.json, tsconfig.node.json, and vite.config.ts, which
are the remaining top-level config files. After these are initialized properly
we can configure the app files under src.
# VITE_ is in front of these variables to make them accessible to App.vue VITE_ENVIRONMENT_ID = "your_environment_id" VITE_PUBLISHABLE_KEY = "your_publishable_key"
Now, let’s build a Workbook inside the Space for next time.
Add your config.ts file, and place the following code in it. After you have
done so, import the configuration to App.vue, and update spaceProps to have
the value of config under workbook (this will be around line 36). This
config file has the configuration settings for your workbook, so feel free to
edit however necessary to meet your needs.
Next, we’ll listen for data changes and respond using an event listener.
Add a src/listener.ts file with this simple recordHook.
Update App.tsx to import the listener.
Once you add this code, when a change occurs, we’ll log the entered first name
and update the last name to “Rock.” You’ll immediately see this begin to work
when you add or update any records. Learn more about
Handling Data
import api from "@flatfile/api";import { FlatfileListener } from "@flatfile/listener";import { recordHook } from "@flatfile/plugin-record-hook";/** * Example Listener */export const listener = FlatfileListener.create((listener) => { listener.on("**", (event) => { //note: listening to all events with a wildcard can be used while testing but is not //recommended for production, as it will capture all events and may cause performance issues console.log(`Received event:`, event); }); listener.use( recordHook("TestSheet", (record) => { const firstName = record.get("firstName"); console.log({ firstName }); record.set("lastName", "Rock"); return record; }) ); listener.filter({ job: "workbook:TestSheet:submit" }, (configure) => { configure.on("job:ready", async ({ context: { jobId } }) => { try { await api.jobs.ack(jobId, { info: "Getting started.", progress: 10, }); // Make changes after cells in a Sheet have been updated console.log("Make changes here when an action is clicked"); await api.jobs.complete(jobId, { outcome: { acknowledge: true, message: "This is now complete.", next: { type: "wait", }, }, }); } catch (error: any) { console.error("Error:", error.stack); await api.jobs.fail(jobId, { outcome: { message: "This job encountered an error.", }, }); } }); });});
By attaching a themeConfig to spaceProps in src/App.tsx, we will now
override colors in your Space to match your brand. See all of the options here
in the Theming Reference.