UI Configuration

By defining a ui object in your Flow JSON, you control how the Flow’s design, form and results are presented to users, especially for public ones. This includes background images, theme colors, preview images, and the final results layout.

Example


"ui": {
  "leftBackgroundAssetId": "b60548bd-5dfa-4758-b244-90a3d2df2df4",
  "rightBackgroundAssetId": "f920f87a-a38b-4fce-84c9-aa10d2bc9f5c",
  "previewAssetIds": [
    "93746af4-228a-403c-bc20-825a5946125f",
    "cefd5cbb-6164-41a7-9b78-eac70579b1da",
    ...
  ],
  "submitLabel": "Start",
  "textColor": "#FFFFFF",
  "backgroundShadowColor": "#000000",
  "bodyBackgroundColor": "#000000",
  "instructions": [
    "Upload images with high quality and a variety of angles. You must be the only person in the image. Avoid sunglasses, hats and other accessories."
  ],
  "deliverables": [
    "100 custom images",
    "ZIP file with all images"
  ],
  "results": {
    "widgets": [
      {
        "type": "Images",
        "sources": ["ingredientsImageGenerator","recipeImageGenerator"]
      },
      {
        "type": "Objects",
        "sources": ["recipesGenerator"]
      },
      {
        "type": "Download",
        "sources": ["zipOutput"]
      }
    ]
  }
}

Top-Level UI Fields

Field	Type	Description
`leftBackgroundAssetId`	`string (UUID)`	ID of an Asset to use as the left background image.
`rightBackgroundAssetId`	`string (UUID)`	ID of an Asset to use as the right background image.
`previewAssetIds`	`string[] (UUID)`	A list of Asset IDs used as a preview carousel in the Flow’s form page (often displayed at the bottom).
`submitLabel`	`string`	The label on the form submission button, e.g. “Start”.
`textColor`	`string`	A hex code or color string for text (e.g. “#FFFFFF”).
`backgroundShadowColor`	`string`	A hex code for background overlay or shadow color.
`bodyBackgroundColor`	`string`	Primary background color for the Flow page.
`instructions`	`string[]`	A list of instructions for the user to follow.
`deliverables`	`string[]`	A list of deliverables the user will receive.
`results.widgets`	`array`	Defines how the final results are displayed to the user. This is an array of objects with type and sources. See Results & Widgets.

Assets: Any of these AssetId fields (like leftBackgroundAssetId) references an Asset previously uploaded to your dashboard. An Asset is simply a stored image or media file. The front-end fetches it from S3 and displays it as a background.

Where Do Asset IDs Come From?

In the lensless dashboard, you can upload images while creating or editing a flow. Each image gets a unique ID. You can then:

Choose an asset among all the assets you’ve uploaded.
Assign leftBackgroundAssetId or rightBackgroundAssetId with that asset’s ID.
Optionally include a list of previewAssetIds to show a slider or gallery on the form page.

Partial vs. Full Customization

You can supply any subset of these UI fields. For example, you might only set backgroundShadowColor and submitLabel, leaving other defaults.
If you omit ui entirely, a basic design with a minimal form layout is used.
For advanced styling not covered by these fields, you will want to build a custom front-end using lensless’s Flow and run APIs. These APIs are currently limited to beta users and will soon be generally available.