smart-extract-documentation
v4.1.1
v4.1.1
  • SmartExtract
  • API Reference
    • Data Extraction API
      • Authentication
      • SmartExtract JSON API
    • Admin API
      • API Key Management
      • Extraction Logs API
  • smart-extract.js
    • Integration Overview
    • SmartExtract API
    • SmartExtractSimple API
    • Styling and Customisations
    • Pre-Fillling Extraction Form
    • Performing Multiple Extraction
    • Code Examples
      • SmartExtract API Examples
      • SmartExtractSimple API Examples
  • Appendix
Powered by GitBook
On this page
  • Form Styling with SmartExtract API
  • Form Styling with SmartExtractSimple API
  • Styling Options
  • Example
  1. smart-extract.js

Styling and Customisations

PreviousSmartExtractSimple APINextPre-Fillling Extraction Form

Last updated 1 year ago

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.

Form Styling with SmartExtract API

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

Form Styling with SmartExtractSimple API

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

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

[ { 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' }

}

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
      }
    },
  },
});

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.

sendExtractDocumentRequest
Styling Options
extractDocumentData
Styling Options
Valid Asset Types
Valid Document Types
Default Document Extraction Form
Form with customised Asset Type and Page Range fields