@flatfile/ember

Ember Flatfile Adapter

Usage no npm install needed!

<script type="module">
  import flatfileEmber from 'https://cdn.skypack.dev/@flatfile/ember';
</script>

README

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: "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