The FlatfileButton Settings Property
In the previous getting started guide, the
settings property is used with a minimal configuration. The only required keys for this settings object are
fields, but there are more settings that while optional, do provide better data cleaning and user experience.
|Description||This option refers to the type of import you have, and can be quite helpful if you are importing different things within different parts of your application. For example, you have a client import aspect where your clients can upload products and then also an internal import process for importing company onboarding information for new clients. Using |
This is where you will define your schema or data model that you want to receive in your application.
|Description||The field guide will take you into more details about the options for fields, but what you need to know is that |
Pass an optional title to the Flatfile Importer page.
|Default||Bulk add |
|Description||Replaces the primary header text when the importer is first launched. For example, |
The default for this will display 'Bulk add ' and then the value of the
type key. So if the type is
type: 'products' , it will say 'Bulk add products'.
|Description||While this key might suggest that it will either allow or not allow a user to submit with errors in the data, the difference here is solely in the messaging provided to the user. In both cases, |
This messaging is on the final screen before submitting that reminds the user there are still invalid records. When this is set to
false the user will see 'Discard x rows with issues. Submit the rest.' When this is set to
true the user will see 'Submit your data anyway (errors may occur).
|Description||This controls whether the header selection step should be skipped if our auto-detection is able to detect the headers.|
Control whether or not your data can be processed server-side or needs to be handled completely in the browser.
|Info||If you would like to have access to our dashboard and be able to see your files that are being uploaded there, then this will need to be set to true. This will also need to be set to true if you plan to have xml or excel files processed as these are generally too much to be handled in the browser.|
Provide a URL for sending data via webhook.
|Info||If you would like to process your data via webhook, you can add your webhook URL to this setting and the imports will be sent to your endpoint as they finish processing. Do note that we send the payload to your webhook URL in chunks of 1000 to cut down on the size of data being sent.|
In order for the webhookUrl setting to work properly, you must also set the above
managed setting to true.
This setting allows for showing or hiding the manual input table that appears when the importer is started.
|Info||If this is set to |
|Info||In contrast to being able to disable the manual input table, you can also force the users to use the manual input table by disabling the dropzone. When set as true, this will hide the dropzone and only display the manual input table.|
Allow users to submit fields not included in your config as a custom field.
|Info||If you would like for users to be able to add a field when submitting their data, then |
Specify the maximum number of records that a single file can import.
|Info||This value does not include the headers of the file. So if the number of records in a file goes to row 21, but the first row is headers, then this file would be considered to have 20 records in it.|
Set the importer as being in development mode.
|Info||This option is important for both testing and in any development environments you have established. If this value is set to |
Provide a list of column names to automatically ignore when present in a file.
|Info||Portal will automatically flag any columns with corresponding names provided in this array as ignored in the matching stage when these are provided. Unlike when a field is ignored by the user, however, this prevents them from being matched at all by your end user.|
Sets custom text in multiple locales for the importer.
Style the Importer to match your brand.
|Info||This allows for customization of the appearance of the importer. This allows you the freedom to theme the importer to be in line with your branding.|
For more information on all the different keys for themes and their user, visit the themes documentations.
The above are the available
theme keys. For more information on what each key controls and how to use it, visit our theming documentation.
|Info||This allows for using Adobe Web Fonts or Google Fonts within the importer.|
To use with Adobe Web Fonts, use the
adobeFontsWebProject key with the typekit ID as a string value. To use Google Fonts, you need to pass in the specific font
family you want to use into the
googleFonts key. You can grab this by selecting the specific font you wish to use in the Google Fonts picker and then copying everything after the
= in the
family query paramter in the URL. Example would be copying everything in bold below and putting in the key as a string in the code example below.
Google Font URL: https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;1,100;1,300;1,400;1,500&display=swap
// Adobe Fonts
// Google Fonts
This only makes the font available. You'll still need to set your font family in the theme config.