Styling and Customisations
Last updated
Last updated
When the SmartExtract component is loaded for document data extraction, a form is displayed to the user to provide details to extract data from the document. The form by default looks like as shown in the following image:
The SmartExtract API provides configuration option that can be used to style the extraction form to meet the look and feel of your application.
Following are the options parameters that you can pass:
Parameter
Required
Type
Description
options
No
object
Configuration options to style the extraction form and spreadsheet view.
options.form
No
object
Options to configure/style the extraction form
options.spreadsheet
No
object
Options to configure/style the spreadsheet view
options.retrySection
No
object
Options to configure/style the retry view (shown when disableRetry option is set to false and SmartExtract fails to extract document data)
Following are possible values under the options.form object
Parameter
Type
Description
title
object
Options to customise the title displayed above the form. E.g.:
{
text: 'Please provide following details',
style: { color: 'blue' }
}
fields
object
Options to configure form fields
fields.assetType
object
Options to configure Asset Type field
fields.assetType.label
string
The label to be displayed for the field
fields.assetType.options
array
[
{ label: 'Multi Family', value: 'MULTIFAMILY'},
{ label: 'Industrial', value: 'INDUSTRIAL'},
]
fields.assetType.style
object
An object to style each of the field elements: label, dropdown and options. E.g.:
{
label: { fontWeight: 'bold' },
select: { width: 50 },
option: { padding: 10 }
}
fields.documentType
object
Options to configure Document Type field
fields.documentType.label
string
The label to be displayed for the field
fields.documentType.options
array
[
{ label: 'Rent Roll', value: 'RENT_ROLL'},
{ label: 'Operating Statement', value: 'OPERATING_STATEMENT'},
]
fields.documentType.style
object
An object to style each of the field elements: label, dropdown and options. E.g.:
{
label: { fontWeight: 'bold' },
select: { width: 50 },
option: { padding: 10 }
}
fields.pageRange
object
Options to configure Page Range field (used for pdf files)
fields.pageRange.label
string
The label to be displayed for the field
fields.pageRange.style
object
An object to style the start and end page inputs and the clear button. E.g.:
{
startInput: { fontWeight: 'bold' },
endInput: { width: 50 },
clearButton: { color: 'red' }
}
fields.sheetName
object
Options to configure xlsx file sheet selector field
fields.sheetName.label
string
The label to be displayed for the field
fields.sheetName.style
object
An object to style each of the field elements: label, dropdown and options. E.g.:
{
label: { fontWeight: 'bold' },
select: { width: 50 },
option: { padding: 10 }
}
fields.osPeriod
object
Options to configure OS Period field (used for operating statements)
fields.osPeriod.label
string
The label to be displayed for the field
fields.osPeriod.style
object
An object to style the start and end page inputs and the clear button. E.g.:
{
startInput: { fontWeight: 'bold' },
endInput: { width: 50 },
clearButton: { color: 'red' },
select: { borderWidth: '2px' },
option: {...}
}
fields.submit
object
An object to configure the submit form button
fields.submit.label
string
The label to display on submit button
fields.submit.style
object
The CSS style rules for the submit button. E.g.:
{
fontWeight: 'bold'
}
fields.cancel
object
An object to configure the cancel form button
fields.cancel.label
string
The label to display on cancel form button
fields.cancel.style
object
The CSS style rules for the cancel button. E.g.:
{
fontWeight: 'bold'
}
multiExtract
object
An object to configure multi-extraction components on the data extraction form
multiExtract.buttons
object
An object to configure multi-extraction buttons
multiExtract.buttons.addTagging
object
An object to configure the Add Tagging button. E.g.:
{
label: 'Add Another Tagging',
style: { fontWeight: 'bold' }
}
multiExtract.buttons.deleteTagging
object
An object to configure the Add Tagging button. E.g.:
{
style: { fontWeight: 'bold' },
// tooltip displayed on the delete button
tooltip: {
text: 'Remove tagging'
disabled: 'You need to have at least one tagging'
}
// used to customise the confirmation popup
confirm: {
title: {
text: 'Remove Tagging',
style: { fontWeight: 'bold' }
}
message: {
text: 'Are you sure?',
style: { color: 'blue' }
}
buttons: {
ok: {
label: 'Ok',
style: { color: 'red' },
},
cancel: {
label: 'Cancel',
style: { color: 'blue' }
}
}
}
}
multiExtract.buttons.selectTagging
object
An object to configure the Add Tagging button. E.g.:
{
label: 'Tagging - {index}',
style: { fontWeight: 'bold' }
}
You can use {index} to insert the index of the tagging.
Following are possible values under the spreadsheet object
Parameter
Required
Type
Description
spreadsheet.buttons
No
object
Styling option for buttons on spreadsheet view
spreadsheet.buttons.save
No
object
Styling options for the save button. E.g.:
{
label: 'Save',
visible: true,
style: { color: 'red' }
}
spreadsheet.buttons.cancel
No
object
Styling options for the cancel button. E.g.:
{
label: 'Cancel',
visible: true,
style: { color: 'red' }
}
spreadsheet.buttons.download
No
object
Styling options for the download button. E.g.:
{
label: 'Download XLSX',
visible: true,
style: { color: 'red' }
}
Following are possible values under the retrySection object
Parameter
Required
Type
Description
retrySection.message
No
object
Styling options for the message displayed. E.g.:
{
text: 'There was an error in extracting document data',
style: { fontWeight: 'bold' }
}
insufficientCreditsErrorMessage
No
object
Styling options for the message displayed. E.g.:
{
text: 'Your account does not have sufficient credits to perform an extraction',
style: { fontWeight: 'bold' }
}
unauthorizedErrorMessage
No
object
Styling options for the message displayed. E.g.:
{
text: 'Invalid API Keys credentials ',
style: { fontWeight: 'bold' }
}
apiRateLimitErrorMessage
No
object
Styling options for the message displayed. E.g.:
{
text: 'The API rate limit has exceeded for your account',
style: { fontWeight: 'bold' }
}
retrySection.buttons
No
object
Styling option for buttons on retry view
retrySection.buttons.retry
No
object
Styling options for the retry button. E.g.:
{
label: 'Retry',
visible: true,
style: { color: 'red' }
}
retrySection.buttons.cancel
No
object
Styling options for the cancel button. E.g.:
{
label: 'Cancel',
visible: true,
style: { color: 'red' }
}
Following is a sample of style options used and the resulting output:
You can pass configuration options to style the extraction form while invoking the API
Please check the section below for more details
You can pass configuration options to style the extraction form while invoking the API
Please check the section below for more details
An array of options to be shown in the asset type dropdown. The labels can be any string to match terms used in the client application, values must be one of . E.g.
An array of options to be shown in the asset type dropdown. The labels can be any string to match terms used in the client application, values must be one of . E.g.
