@flatfile/ember NPM

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`

ember-addon

@flatfile/adapter ember-auto-import ember-cli-babel ember-cli-htmlbars

@everything-registry/sub-chunk-327 @zalastax/nolb-_fla

0.1.1

3 years ago