# 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:
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`](/smart-extract-documentation/smart-extract.js/smartextractsimple-api.md#extracting-document-data) API
```javascript
smex.sendExtractDocumentRequest({
file,
fileName,
data: {
// ...
},
options: {
form: {...},
spreadsheet: {...},
retrySection: {...},
}
})
```
Please check the [Styling Options](/smart-extract-documentation/smart-extract.js/styling-and-customisations.md#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](/smart-extract-documentation/smart-extract.js/smartextractsimple-api.md#extracting-document-data) API
```javascript
const data = await smex.extractDocumentData({
session: {...},
file,
fileName,
options: {
form: {...},
spreadsheet: {...},
retrySection: {...},
}
});
```
Please check the [Styling Options](/smart-extract-documentation/smart-extract.js/styling-and-customisations.md#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:
```javascript
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
}
},
},
});
```
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://clik-ai.gitbook.io/smart-extract-documentation/smart-extract.js/styling-and-customisations.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.