The Flatfile Component - @flatfile/ember

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: "[email protected]",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 |