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.
In this file structure, your app should have two main directories, public and
src.
The public directory contains the index.html file, which is the entry point
of the application’s front-end, and the styles.css file for styling the
iframe.
The src directory contains the main components and logic of the application,
including the client.js file, which initializes Flatfile and passes in
available options.
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. Also, add
the content here to your styles.css.
<button onclick="openFlatfile({ publishableKey: 'pk_1234'})"> Create new Space</button>
Now, start your front end by heading to terminal and running the following
command. To see that it’s running, visit: https://localhost:1234 (or the port it
is running on) and you should see your page and a button. Click the button and
see that an empty Space gets created.
Now, let's build a Workbook inside the Space for next time.
Update your workbook.js with this simple Blueprint.
Update client.js to import the Workbook.
Next time you open Flatfile, you'll see a Workbook called "Contacts" that has
one Sheet with three fields. Your Workbook will also have a Submit action. We
will configure this action in the next step.
Next, we'll listen for data changes and respond using an event listener.
Update your listener.js with this simple recordHook.
Update client.js 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 { FlatfileListener } from "@flatfile/listener";import { recordHook } from "@flatfile/plugin-record-hook";export const listener = FlatfileListener.create((listener) => { //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 listener.on("**", (event) => { console.log("Event =>", event); }); listener.use( recordHook("contacts", (record) => { const firstName = record.get("firstName"); console.log({ firstName }); record.set("lastName", "Rock"); return record; }) );});
By attaching a themeConfig to flatfileOptions in src/client.js, we will
now override colors in your Space to match your brand. See all of the options
here in the Theming Reference.
Finally, let's get the data out of our system and to your destination.
Update your listener.js with this simple submit action.
Once you add this code, when the submit button is clicked, this will be the
place you can egress your data. Learn more about
Egress Out
src/simple.js
import api from "@flatfile/api";import { FlatfileListener } from "@flatfile/listener";import { recordHook } from "@flatfile/plugin-record-hook";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("Event =>", event.topic); }); listener.use( recordHook("contacts", (record) => { const firstName = record.get("firstName"); console.log({ firstName }); record.set("lastName", "Rock"); return record; }) ); listener.on( "job:ready", { job: "workbook:submitActionFg" }, async ({ context: { jobId } }) => { try { await api.jobs.ack(jobId, { info: "Getting started.", // "progress" value must be a whole integer 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) { console.error("Error:", error.stack); await api.jobs.fail(jobId, { outcome: { message: "This job encountered an error.", }, }); } } );});