# 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](https://1635661993-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MkCEA5YMDcbEW2he0U9%2F-MkI189vrllmUrG_DNj6%2F-MkI38BC6ZRffr2bTxKL%2Fextract-form.png?alt=media\&token=b234f800-07c8-4f70-a471-6f1f8bb3a5a7)

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`](https://clik-ai.gitbook.io/smart-extract-documentation/v4.0.3/smartextractsimple-api#extracting-document-data) API&#x20;

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

Please check the [Styling Options](#styling-options) section below for more details&#x20;

## Form Styling with SmartExtractSimple API

You can pass configuration options to style the extraction form while invoking the [extractDocumentData](https://clik-ai.gitbook.io/smart-extract-documentation/v4.0.3/smartextractsimple-api#extracting-document-data) API&#x20;

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

Please check the [Styling Options](#styling-options) section below for more details&#x20;

## 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 | <p>Options to customise the title displayed above the form. E.g.:</p><p><code>{</code></p><p>  <code>text: 'Please provide following details',</code></p><p>  <code>style: { color: 'blue' }</code></p><p><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| fields                             | object | Options to configure form fields                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| fields.assetType                   | object | Options to configure `Asset Type` field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| field.assetType.label              | string | The label to be displayed for the field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| field.assetType.options            | array  | <p>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 <a href="../../appendix#asset-type">Valid Asset Types</a>. E.g.</p><p><code>\[</code><br>  <code>{ label: 'Multi Family', value: 'MULTIFAMILY'},</code><br>  <code>{ label: 'Industrial', value: 'INDUSTRIAL'},</code><br><code>]</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       |
| fields.assetType.style             | object | <p>An object to style each of the field elements: label, dropdown and options. E.g.:</p><p><code>{</code><br>  <code>label: { fontWeight: 'bold' },</code><br>  <code>select: { width: 50 },</code><br>  <code>option: { padding: 10 }</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| fields.documentType                | object | Options to configure `Document Type` field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
| field.documentType.label           | string | The label to be displayed for the field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| field.documentType.options         | array  | <p>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 <a href="../../appendix#document-type">Valid Document Types</a>. E.g.</p><p><code>\[</code><br>  <code>{ label: 'Rent Roll', value: 'RENT\_ROLL'},</code><br>  <code>{ label: 'Operating Statement', value: 'OPERATING\_STATEMENT'},</code><br><code>]</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
| fields.documentType.style          | object | <p>An object to style each of the field elements: label, dropdown and options. E.g.:</p><p><code>{</code><br>  <code>label: { fontWeight: 'bold' },</code><br>  <code>select: { width: 50 },</code><br>  <code>option: { padding: 10 }</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| fields.pageRange                   | object | Options to configure `Page Range` field (used for pdf files)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
| field.pageRange.label              | string | The label to be displayed for the field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| fields.pageRange.style             | object | <p>An object to style the start and end page inputs and the clear button. E.g.:</p><p><code>{</code><br>  <code>startInput: { fontWeight: 'bold' },</code><br>  <code>endInput: { width: 50 },</code><br>  <code>clearButton: { color: 'red' }</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
| fields.sheetName                   | object | Options to configure xlsx file sheet selector field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| field.sheetName.label              | string | The label to be displayed for the field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| fields.sheetName.style             | object | <p>An object to style each of the field elements: label, dropdown and options. E.g.:</p><p><code>{</code><br>  <code>label: { fontWeight: 'bold' },</code><br>  <code>select: { width: 50 },</code><br>  <code>option: { padding: 10 }</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
| fields.osPeriod                    | object | Options to configure OS Period field (used for operating statements)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| field.osPeriod.label               | string | The label to be displayed for the field                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
| fields.osPeriod.style              | object | <p>An object to style the start and end page inputs and the clear button. E.g.:</p><p><code>{</code><br>  <code>startInput: { fontWeight: 'bold' },</code><br>  <code>endInput: { width: 50 },</code><br>  <code>clearButton: { color: 'red' },</code></p><p>  <code>select: { borderWidth: '2px' },</code></p><p>  <code>option: {...}</code><br><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
| 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 | <p>The CSS style rules for the submit button. E.g.:</p><p><code>{</code></p><p>  <code>fontWeight: 'bold'</code></p><p><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 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 | <p>The CSS style rules for the cancel button. E.g.:</p><p><code>{</code></p><p>  <code>fontWeight: 'bold'</code></p><p><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
| 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 | <p>An object to configure the <code>Add Tagging</code> button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Add Another Tagging',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
| multiExtract.buttons.deleteTagging | object | <p>An object to configure the <code>Add Tagging</code> button. E.g.:</p><p><code>{</code></p><p>  <code>style: { fontWeight: 'bold' },</code></p><p>  <code>// tooltip displayed on the delete button</code></p><p>  <code>tooltip: {</code><br>    <code>text: 'Remove tagging'</code></p><p>    <code>disabled: 'You need to have at least one tagging'</code></p><p>  <code>}</code></p><p>  <code>// used to customise the confirmation popup</code></p><p>  <code>confirm: {</code><br>    <code>title: {</code></p><p>      <code>text: 'Remove Tagging',</code></p><p>      <code>style: { fontWeight: 'bold' }</code></p><p>    <code>}</code></p><p>    <code>message: {</code></p><p>      <code>text: 'Are you sure?',</code></p><p>      <code>style: { color: 'blue' }</code></p><p>    <code>}</code></p><p>    <code>buttons: {</code></p><p>      <code>ok: {</code></p><p>        <code>label: 'Ok',</code></p><p>        <code>style: { color: 'red' },</code></p><p>      <code>},</code></p><p>      <code>cancel: {</code></p><p>        <code>label: 'Cancel',</code></p><p>        <code>style: { color: 'blue' }</code></p><p>      <code>}</code></p><p>    <code>}</code></p><p>  <code>}</code></p><p><code>}</code></p> |
| multiExtract.buttons.selectTagging | object | <p>An object to configure the <code>Add Tagging</code> button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Tagging - {index}',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p><p>You can use <code>{index}</code> to insert the index of the tagging.</p>                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |

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 | <p>Styling options for the save button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Save',</code></p><p>  <code>visible: true,</code></p><p>  <code>style: { color: 'red' }</code></p><p><code>}</code></p>              |
| spreadsheet.buttons.cancel   | No       | object | <p>Styling options for the cancel button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Cancel',</code></p><p>  <code>visible: true,</code></p><p>  <code>style: { color: 'red' }</code></p><p><code>}</code></p>          |
| spreadsheet.buttons.download | No       | object | <p>Styling options for the download button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Download XLSX',</code></p><p>  <code>visible: true,</code></p><p>  <code>style: { color: 'red' }</code></p><p><code>}</code></p> |

Following are possible values under the `retrySection` object

| Parameter                       | Required | Type   | Description                                                                                                                                                                                                                                               |
| ------------------------------- | -------- | ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| retrySection.message            | No       | object | <p>Styling options for the message displayed. E.g.:</p><p><code>{</code></p><p>  <code>text: 'There was an error in extracting document data',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p>                         |
| insufficientCreditsErrorMessage | No       | object | <p>Styling options for the message displayed. E.g.:</p><p><code>{</code></p><p>  <code>text: 'Your account does not have sufficient credits to perform an extraction',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p> |
| unauthorizedErrorMessage        | No       | object | <p>Styling options for the message displayed. E.g.:</p><p><code>{</code></p><p>  <code>text: 'Invalid API Keys credentials ',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p>                                          |
| apiRateLimitErrorMessage        | No       | object | <p>Styling options for the message displayed. E.g.:</p><p><code>{</code></p><p>  <code>text: 'The API rate limit has exceeded for your account',</code></p><p>  <code>style: { fontWeight: 'bold' }</code></p><p><code>}</code></p>                       |
| retrySection.buttons            | No       | object | Styling option for buttons on retry view                                                                                                                                                                                                                  |
| retrySection.buttons.retry      | No       | object | <p>Styling options for the retry button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Retry',</code></p><p>  <code>visible: true,</code></p><p>  <code>style: { color: 'red' }</code></p><p><code>}</code></p>                                        |
| retrySection.buttons.cancel     | No       | object | <p>Styling options for the cancel button. E.g.:</p><p><code>{</code></p><p>  <code>label: 'Cancel',</code></p><p>  <code>visible: true,</code></p><p>  <code>style: { color: 'red' }</code></p><p><code>}</code></p>                                      |

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

```

![Form with customised Asset Type and Page Range fields](https://1635661993-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MkCEA5YMDcbEW2he0U9%2F-MkMKmCjiZnDXxJ8jzEk%2F-MkMPV3Pi8ErNbviqXQb%2Fstyled-extract-form.png?alt=media\&token=89642463-8a19-4129-8b8c-527516debcac)
