Image Formatter

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.

Configure Image

To add this Formatter, go to the element's properties under Formatter and choose Image in the Formatter field.

When adding Image, you will see the following field available for configuration:

• Image URL Source:
  • Column Value
  • Form Upload
    
    Form: Target form from which to retrieve the image.
• Click on Image to View Full Size: Allows the image to open in a new tab to view full size.
• Height: Height of the image in px or % to view in the CRUD.
• Width: Width of the image in px or % to view in the CRUD.
• Default Image URL: Default Image URL to be displayed if no image is provided.

Usage Example

In the sample app, there are three columns demonstrating the three types of formatting an image using the Image Formatter:

1. Uploading an Image:
   • Use the image upload form element to select images.
   • In the list builder, apply the image formatter and set the Image URL Source to Form Upload.
   • Choose the specific form and its corresponding form element.
     
2. Column Value:
   • Enter an image address into a form element field, which is saved for preview as an image.
   • Use the image formatter and set it as the column value.
     
3. Default Image URL:
   • Save the Default Image URL within the image formatter, automatically assigning the image to that column.
     

 Video tutorial

Here is a video tutorial explaining the Image Formatter configuration process in detail. This tutorial provides a step-by-step guide to ensure you understand how to use this feature effectively.