The Flatfile Component - @flatfile/ember

NOTE: this component can only be used with Flatfile Portal 2.0. If you are trying to set up Flatfile 3.0, please visit the 3.0 docs here.

We've made it really simple for you to get started with Flatfile with our new Flatfile Component. Here's what you'll need to know to get started.

First, install the dependency via npm:

ember install @flatfile/ember

This will give you access to the <FlatfileButton /> component as well as the same basic functionality as our Adapter.

FlatfileButton usage

<FlatfileButton
  @licenseKey="License Key Here"
  @customer={{hash userId="12345"}}
  @settings={{hash
    type="Contract"
    fields=(array
      (hash label="Full Name" key="name")
      (hash label="Email" key="name")
    )
  }}>
  Import Contacts
</FlatfileButton>

FlatfileButton Arguments	Info	Example
licenseKey - Your Flatfile license key can be found in your dashboard when you login here.	Required. string	licenseKey={'ah12-alksjs2738-shdkaj123'}
customer - Refers to the setCustomer function.	Required. object - CustomerObject	customer={{ usedId: "1234", companyId: "12", companyName: "ABC", email: "john@doe.com", name: "John Doe" }}
settings - This is where you will pass your Flatfile settings/options.	Required. object	settings={{ type: "Customers", fields: [ {key: "name", label: "Name"}, {key: "email", label: "Email"} ]}}
onCancel - An optional callback for handling a user cancelling.	Optional. function - callback	onCancel={() => { // do something }}
onInteractionEvent - An optional way to use registerInteractionEventCallback to receive user interaction events. By default, the onInteractionEvent function will be called every 5 seconds, as long as there is user activity inside of Flatfile Portal.	Optional. function	onInteractionEvent={({mousemove, mousedown, keydown}) => // do something}
onBeforeFetch - An optional callback called before fetching	Optional. function	onBeforeFetch={() => { // do something}
onData- An optional way to use FlatfileResults to return a new Promise.	Optional. function	onData={async results => // do something}
onRecordChange- An optional way to use registerRecordHook when a record changes.	Optional. function	onRecordChange={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
onRecordInit- An optional way to use registerRecordHook on initialization.	Optional. function	onRecordInit={(data, index) => IDataHookResponse | Promise<IDataHookResponse>}
fieldHooks- An optional way to pass in one or more callback functions to use with registerFieldHook.	Optional. object function(s) - callback(s)	fieldHooks={ fieldName: (values) => { return // [IDataHookRecord, index][]}
preload- An optional flag that can be set to false to delay loading the importer until the button is clicked. Useful in situations where there is more than one <FlatfileButton/> instance on a single page or minimizing page load size is important. Default is true.	Optional. boolean	preload={false}

The component also yields out the component state to allow handling of loading states how you wish.

  as | flatfileState |>

FlatfileButton Yields	Info	Example
isLoading - start true if the preload argument is true, otherwise is false until loading starts	boolean	flatfileState.isLoading
isReady - starts false, becomes true when Flatfile has been initialized and loaded	boolean	flatfileState.isReady

FlatfileProvider usage

<FlatfileProvider
  @licenseKey="License Key Here"
  @customer={{hash userId="12345"}}
  @settings={{hash
    type="Contract"
    fields=(array
      (hash label="Full Name" key="name")
      (hash label="Email" key="name")
    )
  }} as | flatfile |>
  <a href="#" {{on "click" flatfile.open}}>
    FlatfileProvider with html anchor link
  </a>
</FlatfileProvider>

All of the same component arguments are available for FlatfileProvider as are available above for FlatfileButton.

The component also yields out the component state to allow handling of loading states how you wish.

  as | flatfile |>

FlatfileProvider Yields	Info	Example
flatfile.open - can be tied to an event to open the flatfile importer, this is the default click event for FlatfileButton	action or function	{{on "click" flatfile.open}}
flatfile.state.isLoading - start true if the preload argument is true, otherwise is false until loading starts	boolean	flatfile.state.isLoading
flatfile.state.isReady - starts false, becomes true when Flatfile has been initialized and loaded	boolean	flatfile.state.isReady