Image

The “Image” element is used to display an image on the screen or page. To use an image, you can import an image from the local storage media or an external image that you can access from the URL. You can also use an image that is stored in the database in binary format.  

In the application, images are used as a symbol, illustration, company logo, icon for a functionality, etc. You can use the images in varieties of formats such as PNG, JPFG, GIF, etc.

Usage

When to use	When not to use
You can use the image: –> To display it as a background skin for a widget. –> As a company logo. –> For common functions such as mail, delete, task completion, task failure, downloading, etc.	–> Do not use the distorted image. –> If the image does not relate to the context. –> Avoid the overdone images.

Image Configuration

On the “Image” element, you can perform the following configurations:

• UI Configuration
• Event Configuration

UI Configuration

For the “Image” element, you can configure the following UI properties:

Tab	Property Name	Description	Mandatory	New Default Value	Visibility Rules
Basic	Reference Name	Specifies a unique name of the element. At the application level, an element is identified and managed by the reference name.	Yes	Image_1
Basic	Image Type	Allows you to choose the type of image- Icon or Letter	No	Icon
Basic	Image Source	Helps you configure the source location from where the application fetches the image and then displays it. You can configure the source location by using the two following options: –> None:- Click this option when you want to display the hardcoded image instead of defining the source location to fetch the image. –> URL:- Click this option when you want to fetch the image from a specific URL-based location. After you select this option, the Enter Image URL box appears. –> Asset Library:- Click this option when you want to fetch the image from the Assets Manager module. After you select this option, the Select Asset box appears.	No	URL
Basic	Enter Image URL	This box appears after you select URL in the Image Source list. In this box, enter the URL to load the image file from a specific URL location. You can upload the image in the following file formats: i. JPEG ii. GIF iii. PNG iv. SVG	No		If Image Source = URL
Basic	Select Asset	Allows you to fetch the image from the Assets Manager module. To fetch the image: –> In the Select Asset box, click icon (), and the Select Asset dialog box opens. –> In the Select Asset dialog box, find the image and then select it. –> After you select the image, click Select, and the Select Asset box displays the path of the selected asset. –> Thus, you successfully configure the image from the Assets Manager module. You can upload the image from the Assets Manager in the following file formats: i. JPEG ii. GIF iii. PNG iv. SVG	Yes	No File Selected	if source = Assets
Basic	Visible	Allows you to define the default visibility of the UI element.	No	marked
Basic	Business Rule	Click this list and then select a pre-defined business rule that will determine the element’s visibility. If the user’s action satisfies the condition in the business rule, the application will display or hide the element. To define the business rule, access the Business Rule Manager module.	No
Basic	Enable	Click this check box to make the element active or inactive. The user can perform the function on the active element.	No	Selected
Basic	Business Rule	Click this list and then select a business rule to make the element active or inactive. If the user’s action satisfies the condition in the business rule, the application will make the element active or inactive in the application. To define the business rule, access the Business Rule Manager module.	No
UI Properties	Styles	Allows you to select a specific style for the element from the list of pre-defined styles. The vDesigner module offers pre-defined styles that you can apply to the element.	No	Default
UI Properties- Background	Color	Click in the Color box and then define the color of the image?s background.	No	E0E0E0	if image type = letter
UI Properties- Background	Opacity	Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.	Yes	100%
UI Properties- Alignment & Spacing	Margin	Allows you to desirably define margin around each side of the element. It provides four different boxes to define the margin outside the right, left, top, and bottom border of the element.	No	Theme Variable (Margin)
UI Properties- Alignment & Spacing	Element’s Alignment	This property contains three tabs. You can use these tabs as follows: 1. Left:- By default, this tab is selected. It aligns the element to the left of the page. 2. Center:- If you select this tab, it aligns the element at the center of the page. 3. Right:- If you select this tab, it aligns the element to the right of the page.	No	Left
UI Properties- Shape & Decoration	Type	Under the Shape and Decoration section, this property has the two following options: Autofill:- If you select this option, the element will occupy the available space of the parent layout. Manual:- If you select this option, you can define a specific size of the element.
UI Properties- Shape & Decoration	Width Value	Enter the width of the element in the percentage or pixel unit.	No	108px
UI Properties- Shape & Decoration	Height Value	Enter the height of the element in the pixel unit.	No	108px
UI Properties- Shape & Decoration	X	Allows you to move the element along the X-axis; when the value increases, the element moves from left to right.	No	Show & Disable
UI Properties- Shape & Decoration	Y	Allows you to move the element along the Y-axis; when the value increases, the element moves from top to bottom.	No	Show & Disable
UI Properties- Shape & Decoration	Fit Type	Allows you to configure the size of the icon (image of the icon) in the container based on the following options: –> Cover:- It expands the width of the image in the image container to maintain the aspect ratio. After applying this option, the height of the image may be cropped in the image container. –> Fill:– After you select this option, it stretches the width and height of the image to fit the image in the image container.  –> Contain:- After you select this option, it may resize the image to fit it in the image container to maintain the aspect ratio.	No	Cover
UI Properties- Shape & Decoration	Border Radius	Allows you to define the radius of any of the corners of the element. Defining the radius of the corner makes the corner of the element round.	No	Theme Variable (Border Radius)
Data	Entity Path	This property allows you to map an attribute to the element. You define the JSON based attributes in the entity in the Data Modeler module. To define the entity path: –> Click in the Entity Path box, and a list expands. –> The list displays several attributes from the entity. –> In the list, select an attribute to map it to the element. After the user performs the function on the element, the application can perform the following functions: a. Fetches data from the attribute and then displays it in the element. b. Stores data in the attribute.	No	EntityName.
Data	Error Image	You can use this property to configure an error image. The error image is used to display a specific error. To configure an error image, you can use the following options: –> URL: i. When you select this option, the Enter Image URL box appears. ii. In the Enter Image URL box, enter the image’s URL. The application will access the URL to display the error image to the user. –> Asset Library: i. When you select this option, the Select Asset box appears. ii. In the Select Asset box, click the asset library icon (), and the Select Asset dialog box opens. iii. In the Select Asset dialog box, select an image and then click Select, and you successfully configure the image as an error image.	No

Event Configuration

On the “Image” element, you can configure the following event:

• onClick