The Image Formatter is a dynamic tool that allows you to incorporate images into your list display. It offers a wide range of customization options, enabling you to present your data in a visually appealing and creative manner. 

Image Formatter Properties

Configure Image Formatter

Image URL Source
  1. Column Value
  2. Form Upload

    FormTarget form to retrieve the image from.
Click on Image to view full sizeThis allow the image to open in a new tab to view full size.
HeightHeight of the image in px or % to view in the CRUD.
WidthWidth of the image in px or % to view in the CRUD.
Default Image URLDefault Image URL

Sample Usage

In the sample app, we have 3 columns which demonstrates the 3 types of formatting an image using the image formatter.

  1. Uploading an Image
  2. Column Value
  3. Default Image URL

Upload an image using the image upload form element to select the images. In the list builder, apply the image formatter and set the Image URL Source to "Form Upload." Then, choose the specific form and its corresponding form element.

"Input Image URL" involves entering an image address into a form element field, which is subsequently saved for preview as an image. This is achieved by utilizing the image formatter and setting it as the column value.

The Default Image URL is saved within the image formatter, automatically assigning the image to that column.

Related Video Tutorials

Sample App


  • No labels