---
title: "Preflight | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/preflight/"
---

# Preflight

> You can add this widget to your ordering process so that your customers can see if their design uses the correct color space, fits the product surface, and all design elements are within trim lines.

:::note
This widget works based on the [Preflight plugin](https://customerscanvas.com/docs/on-premises/preflight/installing-preflight.md) for Customer's Canvas. If you don't have this tool, contact our [support team](https://customerscanvas.com/account/cases).
:::

## General info

- **type**: `preflight`

## Params

- `config` - the preflight configuration. For details, see the [Config Reference](https://customerscanvas.com/docs/on-premises/preflight/reference/config.md).
- `files` - files for validation. For details, see the [F.A.Q.](https://customerscanvas.com/docs/on-premises/preflight/howto/upload-files.md)
- `style` - CSS variables to apply custom colors in the user interface. For details, see the [F.A.Q.](https://customerscanvas.com/docs/on-premises/preflight/howto/change-appearance.md)
- `onPageChange` - `Function` | `Array<Function>` - a function (`"{{#function <expression>}}"`) or an array of functions that work when changing pages in this widget.

## Properties

- `hires` - a URL that links to the print-ready file in PDF format.
- `preview` - a string array of URLs that link to proof images.
- `page` - the current preflight page - either **uploader** or **editor**.
- `failedChecks` - an object containing two arrays, **errors** and **warnings**, with failed validation rules.
- `hasFiles` - if true, the user has uploaded a file.
- `stateId` - the identifier of the last saved state file.
- `userId` - the identifier of the user in an e-commerce system.

## Methods

- `setStep(page)` - sets a page in this widget to either `uploader` or `editor`.
- `setFiles(files[])` - passes links to images into this widget, i.e. initializes the widget as if these images were uploaded by the user.
- `getPreviews()` - initializes rendering preview images and returns an array of URLs linking to these images.
- `getResults(boolean)` - initializes rendering the print files and returns links to the output images. If `true`, it also renders previews.
- `saveProduct(boolean)` - saves the product to a private state file in Asset Storage and returns its ID. If `true`, it enables preview rendering and also returns origin files and preview images.

## Examples

This widget may be configured as follows:

```json
{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "language": "en",
      "backendUrl": "http://preflight.example.com",
      "startFromUploader": true,
      "uploader": {
        "fileTypes": [ ".pdf", ".jpeg", ".jpg", ".psd" ],
        "multiple": true
      },
      "product": {
        "dpi": 300,
        "size": {
          "width": 595,
          "height": 842
        },
        "bleed": 20,
        "safetyLines": [
          {
            "color": "#00ff00",
            "altColor": "#00ff00",
            "margin": 40
          }
        ],
        "pages": 4,
        "allowAddPages": true,
        "allowDeletePages": true
      },
      "viewer": {
        "keepAspectRatio": false,
        "zoom": {
          "min": 0.2,
          "max": 1.2,
          "step": 0.1
        }
      },
      "rules": [
        {
          "type": "colorspace",
          "severity": "error",
          "enableFix": true,
          "params": {
            "allowedColorSpaces": [ "cmyk" ]
          }
        }
      ],
      "interface": {
        "topToolbar": [
          {
            "name": "upload"
          },
          {
            "name": "fitToBleed"
          },
          {
            "name": "fitToTrim"
          },
          {
            "name": "center"
          },
          {
            "name": "reset"
          }
        ]
      }
    },
    "onPageChange": [
      "{{ #function(page) page==='editor' && main.stepIndex === 0 ? main.nextStep() : ''  }}"
    ]
  }
}
```

#### How to define validation rules

If you need to adjust the color space and resolution of products, you must define two elements in the [rules](https://customerscanvas.com/docs/on-premises/preflight/reference/rules.md) array.

```json
{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "rules": [
        {
          "type": "colorspace",
          "severity": "error",
          "enableFix": true,
          "params": {
            "allowedColorSpaces": ["CMYK"]
          }
        },
        {
          "type": "resolution",
          "severity": "warning",
          "params": {
            "target": 300
          }
        }
      ]
    }
  }
}
```

Here, `severity` specifies whether a preflight problem can remain in the print file or if it must be fixed.

As a result, if images contain graphics in color spaces other from CMYK, then they are considered as invalid, and this widget enables the **Fix** button to resolve this issue automatically. If these images have a resolution of less than 300 DPI, then a warning only appears in the widget.

You can find more details in the [Preflight Rules](https://customerscanvas.com/docs/on-premises/preflight/reference/rules.md) topic.

#### How to load state files

When you use Customer's Canvas BackOffice to store and process your assets, you save the resulting templates in the ST format in Asset Storage. The Preflight Tool allows you to [load state files](https://customerscanvas.com/docs/on-premises/preflight/howto/load-state-files.md) instead of configuring products in the JSON config.

At the same time, along with custom elements such as text and shapes, safety lines with bleed zones and product mockups will be imported from the state file.

```json
{
  "name": "preflight",
  "type": "preflight",
  "params": {
    "config": {
      "state": {
        "stateId": "64f6d1be4737b3417c7a546a"
      },
      "services": {
        "designAtoms": {
          "url": "https://api.customerscanvashub.com",
          "token": "{{vars.apiAccessToken}}"
        },
        "tenantId": "{{vars.tenantId}}"
      },
      "product": {
        "dpi": 300
      }
    }
  }
}
```

Here, `stateId` contains the design identifier.

In the `services`, you can provide properties for the Design Atoms API service. This object is required when you're creating workflows in BackOffice. The `token` and `tenantId` are defined through [variables](https://customerscanvas.com/docs/on-premises/ui-framework/writing-configs/parametrizing-configs.md#using-the-vars-block). If you define the `preflight` widget for working in the UI Framework, you can pass these properties when [initializing the driver](https://customerscanvas.com/docs/on-premises/preflight/howto/load-state-files.md#driver-initialization).

Since the product parameters are imported from the state file, only the following `product` settings will be applied:

- allowAddPages
- allowDeletePages
- dpi

### How to get preview images

To display preview images generated by the Preflight widget, you can use another widget, for example, the [Image carousel](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/image-carousel.md) widget. This widget can be initialized with the images stored in `$['preflight'].preview`.

```json
{
  "name": "preview",
  "type": "image-carousel",
  "params": {
    "containerColor": "#eee",
    "images": {
      "{{ #each $['preflight'].preview as image}}": {
        "url": "{{ image }}"
      }
    }
  }
}
```

#### Generating preview images

To generate preview images, use one of the following methods:

- `getPreviews()`: Generates preview images in the background and stores their URLs in `$['preflight'].preview`.
- `getResults(boolean)`: Renders print files and stores their URLs in `$['preflight'].hires`. If its parameter is omitted or set to `true`, it also generates preview images. If `false`, it only prepares print files.

You can call these methods when moving to a specific [Step](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/steps.md), such as a confirmation step for personalized results.

```json
{
  "name": "Preview design",
  "mainPanel": {
    "name": "preview"
  },
  "onActivate": [
    "{{#function $['preview'].showPreloader(1) }}",
    "{{#function $['preflight'].getResults() }}",
    "{{#function $['preview'].showPreloader(0) }}"
  ]
}
```

#### Passing images to the order widget

To include the generated images in an order, pass them to the [Order](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/order.md) widget as follows:

```json
{
  "name": "order",
  "type": "order",
  "params": {
    "images": "{{$['preflight'].preview }}",
    "downloadUrls": "{{ [$['preflight'].hires] }}",
    "data": {}
  }
}
```