UI Configuration Guide

This guide explains all available UI configuration options when creating a new session. All settings are optional and default to enabled/visible for backward compatibility. Therefore, you can send only a limited set of settings for just the parts you want to disable.

UI Controls Screenshot

Complete JSON Structure

▶

{
  "options": {
    "ui": {
      "enableUpload": boolean,
      "toolbox": {
        "buttons": {
          "undo": boolean,
          "rotateLeft": boolean,
          "rotateRight": boolean,
          "flip": boolean,
          "reset": boolean,
          "zoomOut": boolean,
          "setToFit": boolean,
          "crop": boolean
        }
      },
      "sideList": {
        "buttons": {
          "addBlankPage": boolean,
          "deleteAll": boolean,
          "downloadPreview": boolean,
          "deleteSide": boolean
        },
        "showQualityLabels": boolean
      },
      "rightBar": {
        "enabled": boolean,
        "qualityControlSection": {
          "enabled": boolean
        },
        "pageInfoSection": {
          "enabled": boolean,
          "pageNumber": boolean,
          "scaling": boolean,
          "fileFormat": boolean,
          "font": boolean,
          "resolution": boolean
        },
        "yourProductSection": {
          "enabled": boolean,
          "pagesCount": boolean,
          "productSize": boolean,
          "minimalResolution": boolean
        },
        "sourceFileSection": {
          "enabled": boolean,
          "filename": boolean,
          "pageNumber": boolean,
          "size": boolean
        },
        "tipSection": {
          "enabled": boolean,
          "title": string,
          "text": string
        }
      }
    }
  }
}

Upload Functionality

▶

Disable the complete upload functionality.

Possible use case: provide a PDF file when creating the session (via fileUrl) and then disable the upload function to prevent the customer from uploading their own files.

{
  "options": {
    "ui": {
      "enableUpload": false
    }
  }
}

Default: true (enabled)
Effect: Enable/disable uploading

Toolbox Configuration

▶

Configure which buttons are shown in the editing toolbox.

{
  "options": {
    "ui": {
      "toolbox": {
        "buttons": {
          "undo": false,
          "rotateLeft": true,
          "rotateRight": false,
          "flip": true,
          "reset": false,
          "zoomOut": true,
          "setToFit": true,
          "crop": false
        }
      }
    }
  }
}

All buttons default: true (visible)
Available buttons:
- undo: Undo last action
- rotateLeft: Rotate 90° counter-clockwise
- rotateRight: Rotate 90° clockwise
- flip: Flip horizontally
- reset: Reset to original state
- zoomOut: Fill including bleed
- setToFit: Fit within trimbox
- crop: Open crop editor

Side List Configuration

▶

Configure the left sidebar functionality.

Buttons

{
  "options": {
    "ui": {
      "sideList": {
        "buttons": {
          "addBlankPage": false,
          "deleteAll": false,
          "downloadPreview": true,
          "deleteSide": false
        }
      }
    }
  }
}

All buttons default: true (visible)
Available buttons:
- addBlankPage: Add blank page
- deleteAll: Delete all pages
- downloadPreview: Download preview PDF
- deleteSide: Delete individual page (trash icon per page)

Quality Labels

{
  "options": {
    "ui": {
      "sideList": {
        "showQualityLabels": false
      }
    }
  }
}

Default: true (visible)
Effect: Controls both individual page badges (orange/red labels) and the summary text above the list ("X pages with warnings")

Right Bar Configuration

▶

The right sidebar contains multiple sections that can be configured individually.

Master Toggle

{
  "options": {
    "ui": {
      "rightBar": {
        "enabled": false
      }
    }
  }
}

Default: true (visible)
Effect: Hides entire right sidebar and expands preview area to full width

Quality Control Section

{
  "options": {
    "ui": {
      "rightBar": {
        "qualityControlSection": {
          "enabled": false
        }
      }
    }
  }
}

Default: true (visible)
Effect: Shows/hides the entire quality checklist section
Note: Individual items shown depend on backend quality checks configuration

Page Info Section

Configure the page information display with detailed control.

{
  "options": {
    "ui": {
      "rightBar": {
        "pageInfoSection": {
          "enabled": true,
          "pageNumber": false,
          "scaling": true,
          "fileFormat": false,
          "font": false,
          "resolution": true
        }
      }
    }
  }
}

All options default: true (visible)
Section control: enabled controls entire section visibility
Individual fields:
- pageNumber: Current page number
- scaling: Scaling percentage with warnings
- fileFormat: File format (PDF)
- font: Font information
- resolution: Resolution message component

Your Product Section

Configure the product information display.

{
  "options": {
    "ui": {
      "rightBar": {
        "yourProductSection": {
          "enabled": true,
          "pagesCount": false,
          "productSize": true,
          "minimalResolution": false
        }
      }
    }
  }
}

All options default: true (visible)
Section control: enabled controls entire section visibility
Individual fields:
- pagesCount: Number of pages/sides
- productSize: Product dimensions (width x height)
- minimalResolution: Required DPI setting

Source File Section

Configure the source file information display.

{
  "options": {
    "ui": {
      "rightBar": {
        "sourceFileSection": {
          "enabled": true,
          "filename": false,
          "pageNumber": true,
          "size": false
        }
      }
    }
  }
}

All options default: true (visible)
Section control: enabled controls entire section visibility
Individual fields:
- filename: Original filename
- pageNumber: Source page number
- size: Source file dimensions in mm

Tip Section

Configure the tip/help section with custom content.

{
  "options": {
    "ui": {
      "rightBar": {
        "tipSection": {
          "enabled": true,
          "title": "Custom Tip Title",
          "text": "Your custom tip text here with instructions."
        }
      }
    }
  }
}

Default enabled: true (visible)
Default title: "Tip"
Default text: "Use mouse wheel to zoom in and out on the large preview. Drag the image to inspect the edges."
Customization: Both title and text can be fully customized

Layout Behavior

▶

### Responsive Design

When rightBar.enabled = false:

Right sidebar completely disappears
Preview area expands from span 14 to span 19 (gaining 5/24 width units)
Layout maintains left sidebar at span 5

Hierarchical Control

The configuration follows a hierarchical structure:

Master level (e.g., rightBar.enabled) override all subsections
Section level (e.g., pageInfoSection.enabled) override individual fields
Field level provide granular control within enabled sections

Example: Minimal UI Configuration

▶

{
  "options": {
    "ui": {
      "enableUpload": false,
      "toolbox": {
        "buttons": {
          "undo": false,
          "rotateLeft": true,
          "rotateRight": true,
          "flip": false,
          "reset": false,
          "zoomOut": false,
          "setToFit": true,
          "crop": true
        }
      },
      "sideList": {
        "buttons": {
          "addBlankPage": false,
          "deleteAll": false,
          "downloadPreview": true,
          "deleteSide": false
        },
        "showQualityLabels": false
      },
      "rightBar": {
        "enabled": false
      }
    }
  }
}

This configuration creates a minimal interface with:

No upload functionality
Limited toolbox (rotate, fit, crop only)
No quality labels
No right sidebar (maximum preview space)
Only download preview button available