Image

1. Overview

The "Image" component is used to display static or dynamic images from the database. This component is ideal for various contexts, such as displaying product photos in a product list, showing employee avatars in a team list, or creating visually appealing interfaces.

2. How to Configure

Drag to Screen: Drag the image component to the screen where you want to display the image.

Configure the View: Set up the View using SQL, Data Analysis View, or Dimension View if you want the image to be dynamic and sourced from the database. The View should return the image URL in the first column and first row.

3. Personalize

3.1. General Settings

Image: You can define a static image or the file address directly. To make the image dynamic, enable the "Set image based on VIEW" option, which will load the image from the URL returned by the View.

Maintain Proportion: Default setting that maintains the image proportion within the component’s space.

Image Format:

• Cover: The image covers the entire component, maintaining proportion and applying a zoom effect to fill the space.

• Shapes:

  • Circle: Displays the image in a circular shape.

  • Square: Displays the image in a square shape.

  • Square with Soft Edges: Displays the image in a square shape with rounded corners.

3.2. Animation

Animation options include:

• Transition: Enable to add a hover effect when the cursor moves over the image.

• Transition Color: Set the background color during the transition.

• Elevation: Enable to add a shadow effect that adds depth to the image.

• Elevation Level: Set the depth level of the shadow effect.

3.3. Dynamic Visibility

Dynamic Visibility allows the image to become visible or invisible based on the value returned by a View. The image will disappear if the value is 0 or null and will appear for any other number. This functionality can be applied using the component’s own View or the screen’s View, providing flexibility in configuring and controlling component behavior.

• Referencing the Component’s Own View: This is based on the first row and column returned by the View to determine visibility.

• Referencing the Screen’s View: Use variable commands, such as "$A1," to get the value from the first row and column of the screen’s View.

3.4. Reactivity

Like the Label component, the Image can also be configured to manually update specific components when necessary. For more information, refer to the "Reactivity" documentation.

4. Interactions

The Image component accepts the following interactions:

• Action: Define an action to be executed when interacting with the image.

• Database Action: Allows performing data manipulation operations, such as INSERT, UPDATE, DELETE, or calling PROCEDURES.

• Form: Opens a form when interacting with the image.

• Modal: Opens a modal when interacting with the image.