Skip to main content
These elements can be added to your interface using the UI Designer tool, and they are often used to convey information, enhance the aesthetic appeal of an interface, provide visual cues and feedback, support branding and marketing efforts, or present complex data or concepts in a more intuitive and accessible way.

​
Configuring an image

Configuring an image in the UI Designer involves specifying various settings and properties. Here are the key aspects of configuring an image:

​
Image settings

The image settings consist of the following properties:
  • Source - where the image is loaded from:
    • Media Library
    • Document Plugin path (process user tasks): a Documents plugin downloadPath, such as the one in an upload reply. The renderer adds the Documents plugin base URL, so no business rule is needed.
    • Document Plugin (UI Flows): an object that contains downloadPath, such as an upload reply.
    • URL: a complete, absolute URL, used as-is. The renderer attaches the user’s access token only when the URL ends in download.
    • Base64: a Base64-encoded image string.
  • Value type - for Document Plugin path, URL, and Base64: Static for a fixed value, or Variable to read it from a data key. Document Plugin always reads a data key.
  • Placeholder URL - for every source except Media Library, the public URL where the image placeholder is available.
Depending on which Source is selected, different configurations are available:

​
Media library

  • Image key - the key of the image from the media library
  • Select from media library - search for an item by key and select it from the media library
  • Upload to media library - add a new item (upload an image on the spot)
    • upload item - supported formats: PNG, JPG, GIF, SVG, WebP; ❗️(maximum size - 50 MB by default)
    • key - the key must be unique and cannot be changed afterwards

​
Variable value

  • Set Value type to Variable and enter the Data key that holds the value.
  • With URL, the value at that key is used as-is, so it must be a complete, absolute URL. With Base64, the key holds the encoded image.
  • To show a file uploaded through the Documents plugin, set Source to Document Plugin path in a process user task and point the key at the upload reply’s downloadPath. In a UI Flow, use Document Plugin and point the key at an object that contains downloadPath, such as an upload reply. In both cases the renderer builds the URL. See Preview an uploaded file for the upload reply.
  • Provide a Placeholder URL for public access. This is the URL where the image placeholder is available.

​
Static value

  • Source: URL or Base64, with Value type set to Static
  • Value: the valid URL of the image, or the Base64 string.
  • Placeholder URL: the public URL where the image placeholder is available

​
Event handlers

The event handlers property allows you to add an event handler, which must be configured on the same node. For more information, see the Event Handlers documentation.

​
Image styling

The image styling property allows you to add or to specify valid CSS properties for the image. For more information, see the styling documentation.

​
Color

The image component has a Color property that applies a color to the image, useful for tinting single-color icons and SVGs so they match a theme without editing the source asset. Set it in the component’s configuration; the color is applied by the web and Android renderers.
Last modified on October 30, 2026