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 an 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.
    • Record ID: If this image belongs to a joined form, specify the join record ID (Eg. id).
      New Feature
      This is a new feature in Joget DX 9.0.5 and above.
• 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.