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 “style.css” file for styling the iframe.
The src directory contains the main components and logic of the application,
including the App.tsx 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.
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <!-- manifest.json provides metadata used when your web app is installed on a user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ --> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- Notice the use of %PUBLIC_URL% in the tags above. It will be replaced with the URL of the `public` folder during the build. Only files inside the `public` folder can be referenced from the HTML. Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> <link rel="stylesheet" type="text/css" href="./styles.css" /> <title>React App</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> <!-- This HTML file is a template. If you open it directly in the browser, you will see an empty page. You can add webfonts, meta tags, or analytics to this file. The build step will place the bundled scripts into the <body> tag. To begin the development, run `npm start` or `yarn start`. To create a production bundle, use `npm run build` or `yarn build`. --> </body></html>
In your App.tsx, at minimum, you’ll need to pass in the publishableKey.
Also, add the content here to your index.tsx, tsconfig.json,
manifest.json, and config-overries.js.
import { Dispatch, SetStateAction, useState } from "react";import { ISpace, initializeFlatfile } from "@flatfile/react";import { workbook } from "./workbook";import { listener } from "./listeners/simple";export default function App() { const spaceProps: ISpace = { name: "Embedded Space", publishableKey: "pk_1234", }; const [showSpace, setShowSpace] = useState(false); const { Space, OpenEmbed } = initializeFlatfile({ ...spaceProps, sidebarConfig: { showSidebar: false, }, closeSpace: { operation: "submitActionFg", onClose: () => setShowSpace(false), }, }); const onOpenSpace = async () => { setShowSpace(!showSpace); await OpenEmbed(); }; return ( <div className="content"> <h2> <code><Flatfile /></code> </h2> <p>Embed Flatfile in just a few lines of code.</p> {/*Button to trigger the modal */} <div> <button className="contrast" onClick={onOpenSpace}> {showSpace === true ? "Close" : "Open and create new"} Space </button> {showSpace && <Space />} </div> </div> );}
Now, start your front end by heading to terminal and running the following
command.
npm run start
You’ll get an alert: We’re unable to detect target browsers. Would you like to
add the defaults to your package.json? Say yes.
To see that it’s running, visit: https://localhost:3000 (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.
Add a src/workbook.ts file with this simple Blueprint.
Update App.tsx 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.
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.
import { FlatfileListener } from "@flatfile/listener";import api from "@flatfile/api";import { recordHook } from "@flatfile/plugin-record-hook";/** * Example Listener */export const listener = FlatfileListener.create((listener) => { listener.on("**", (event) => { console.log(`Received event: ${event.topic}`); }); 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/App.tsx, we will now
override colors in your Space to match your brand. See all of the options here
in the Theming Reference.
