Styling and Customisations

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:

Default Document Extraction Form

The SmartExtract API provides configuration option that can be used to style the extraction form to meet the look and feel of your application.

Form Styling with SmartExtract API

You can pass configuration options to style the extraction form while invoking the sendExtractDocumentRequest API

smex.sendExtractDocumentRequest({
  file,
  fileName,
  data: {
    // ...
  },
  options: {
    form: {...},
    spreadsheet: {...},
    retrySection: {...},
  }
})

Please check the Styling Options section below for more details

Form Styling with SmartExtractSimple API

You can pass configuration options to style the extraction form while invoking the extractDocumentData API

const data = await smex.extractDocumentData({
  session: {...},
  file,
  fileName,
  options: {
    form: {...},
    spreadsheet: {...},
    retrySection: {...},
  }
});

Please check the Styling Options section below for more details

Styling Options

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	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 Valid Asset Types. E.g. [ { 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	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 Valid Document Types. E.g. [ { 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' } }

Example

Following is a sample of style options used and the resulting output:

smex.sendExtractDocumentRequest({
  file,
  fileName,
  data: {...},
  options: {
    form: {
      fields: {
        assetType: {
          label: 'Please Select Asset Type',
          options: [
            { label: 'MF (Multi Family)', value: 'MULTIFAMILY' },
          ],
          style: {
            label: { color: '#5e5e5e' },
            option: { color: 'green' },
            select: { backgroundColor: '#ffb37f' },
          },
        },
        pageRange: {
          label: 'Custom label for page range',
          style: {
            startInput: { color: 'red', fontWeight: 'bold' },
            endInput: { color: 'green', fontStyle: 'italic' },
          },
        },
      },
    },
    spreadsheet: {
      buttons: {
        download: { visible: true }, // hidden by default
        cancel: { style: { backgroundColor: 'red' } }, // visible by default
      }
    },
  },
});

Form with customised Asset Type and Page Range fields