Image

The Image component shows an image in the app. To insert an Image component in the screen, go to the Left Panel in the screens editor. Go through the list of components to find the Image component or click the search bar and type its name. Then, drag and drop the component into the canvas and configure its attributes in the right panel. Refer to the sections below to learn more.Left Panel

Important

The Image component can be used in web and mobile apps (both for Android and iOS devices).

Attributes

In the right panel, you can configure different attributes to customize the component. Refer to the sections below to learn more.Right Panel

Design

In the Design tab, you can configure the selected component's basic information and the attributes that determine how the component will look like in the app. Refer to the sections below to learn more.Design

In this section, you fill in the selected component's basic details and alignment and size attributes. This section is available for every component dragged into the canvas. To learn more, read Design.Design

First of all, you must change the name of the button to represent its position within the screen layout. For example, the name can be imgLogo.

Then, you can configure the position attributes, as specified in the table below.

X	Position of the component in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement.
Y	Position of the component in the canvas with regard to the x axis. Enter a number in the field and then select the % or px unit of measurement.
R	Angle with the vertical axis in which the component is positioned.
W	Width of the component with regard to the screen size.
H	Height of the component with regard to the screen size.

Margin properties	Space around a component's border. To configure the margins, click the number field of each margin (left, right, top, bottom) and enter the desired value. Then, click the unit of measurement located to the right and select the px or % option from the list.
Padding properties	Space between the component's border and the component's content (value). To configure the paddings, click the number field of each margin (left, right, top, bottom) and enter the desired value. Then, click the unit of measurement located to the right and select the px or % option from the list.

In this section, you can configure the size and position attributes of the component. Refer to the table below to learn more.

Position Type

Click the arrow and select a type from the drop-down menu. As a best practice, select Relative.

Refer to the table below to learn more about the options available.

Absolute	Position of the component determined by the X and Y axes. Important If you select Absolute position type, you must configure the X and Y values in the General info section.
Fixed	This value is not implemented.
Relative	Vertical and horizontal displacement from the original position of the component.

Abs. Bottom

Distance from the bottom to the top of the flex component.

Important

The Tab Index attribute is deprecated. Instead, you must use the Accessibility Order attribute.

In this section, you can set the style of one or more borders of your component.

To set all the borders of the component, click the chain link icon in the middle of the square. The chain appears unbroken and all the inner borders of the square turn blue.

To configure the attributes of borders individually, click the desired border of the square icon; the border selected turns blue and the chain link icon appears broken. Remember to configure attributes for each border you want to customize.

Then, you must set the color and width of the border or borders you want to configure. Refer to the table below to learn more.

Color	Border color. To set the color, click the field and type a hexa code or click the rounded-edges square icon to open the color picker. In the color picker, enter the hexa color code.
Width	Border width. Type a number to set the width. To change the unit of measurement, click the ellipsis (three dots) and select an option from the drop-down menu.

In this section, you can configure the radius to define the roundness of the component's corners.

By default, all the component's corners appear selected. The chain appears unbroken and the dots representing each corner of the square turn blue. If you use this option, the same attributes will be applied to all corners.

To configure the attributes of corners individually, click the desired corner of the square icon; the dot in the selected corner turns blue. Remember to configure attributes for each corner you want to customize.

To increase or decrease the radius size of the borders or a specific border, type the value in the Radius field. To change the unit of measurement, click the unit of measurement selected (blue-colored text) and choose an option from the drop-down menu.

In this section, you can configure basic attributes of the component. Refer to the table below to learn more.

CSS Class	CSS or style invoked from Global Design > Themes and applied to the component. Click the field and select a style from the drop-down menu. Tip You can add more than one style.
Src	Id of the image to be displayed in the component. To set the image, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in the list, or use the search bar to find an image by name.
Resource Width	Click the field and enter the resource's width.
Resource Height	Click the field and enter the resource's height.
Text	Text that accompanies the image defined for the component. Click the field and enter the desired word or phrase.
Text Position	Click the arrow and choose an option from the drop-down menu: select top so that the text defined is placed at the top of the component's space or bottom so that the text is placed at the bottom.
Type	Attribute that defines whether the component is an animated GIF or an image sprite. To set the type, click the arrow and choose an option from the drop-down menu. Select animated for animated GIFs or sprite for image sprites.
Visible	Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select true so that the component is visible in the app or false so that it is not visible.
Visibility	Attribute that defines whether the component is visible in the app. Click the arrow and choose an option from the drop-down menu. Select visible so that the component is visible in the app or none so that it is not visible. This attribute is only applicable for web apps.
Important For Accessibility	Attribute that defines whether the screen reader reads or ignores the value defined in the Accessibility Text attribute of the component. Click the arrow and select an option from the drop-down menu. Choose true so that the screen reader reads the component or false so that the screen reader does not read the component. The default value is false.
Accessibility Text	Alternative text. Add a short text to describe the component to users who may not be able to see it. The text will be read by iOS Voice Over or Android Talk Back. You can also add the accessibility text to the translations dictionary or select an existing translation if there are languages selected in your branch settings.Left PanelSettings
Accessibility Order	Attribute that tells the screen reader the order in which it must read the components. To configure it, click the field and enter a number to define the order. For example, if this component should be read in third place, enter the value 3. If you don't configure a custom order, components are read from top to bottom and left to right of the screen.

In this section, you configure the style of the component. Refer to the table below to learn more.

Resource Origin

Method through which the resource referenced by the component is loaded. Fill in this field if the component selected references a resource, like an image or a video. Click the arrow and select one of the options available in the drop-down menu: choose L (Local) to retrieve the coded content from the local resources or choose H (HTTP) to retrieve the resource content from the Comm Server.

Expires

Indicates the form and validity of the defined HTTP resource's cache. By default, no value is defined. If the field remains empty, the image will be downloaded every time it is used.

To define this attribute, click the field and enter the desired value. Refer to the table below to learn more about the values that can be configured.

session	The image is valid until the app user closes the app or signs out of the app.
Never	The image won't be deleted from the cache.
M:[number of days in a month, separated by commas] Note To specify the last day of the month, use the word last instead of the number.	The image is valid up to the day or days specified. It applies for every month of the year. For example: M:1,10, 20, last
W:[days of the week, separated by commas] Note To specify the days of the week, use the following expressions (in order): mo, tu, we, th, fr, sa and su.	The image is valid up to the day or days specified. It applies for every week of the month. For example, W: mo, fr, sa.
[amount of hours]h	The image is valid for the number of hours specified, from the moment it loads. For example, 12h.
[number of days]d	The image is valid for the number of days specified, from the moment it loads. For example, 10d.
[amount of seconds]s	The image is valid for the amount of seconds specified, from the moment it loads. For example, 25s.
[YYYYMMddHHmmss]	The image is valid up to the date and time specified (including year, month, day, hours and minutes). Then, the image will load every time until the value is changed. For example, 20151231182056.

Tip

Regardless of this attribute, if the app user deletes the app or its data, cached images will be deleted too.

Scale Type

Attribute that defines the behavior of the scale applied to the component's limits. Click the arrow and select an option from the drop-down menu. Refer to the table below to learn more about the options available.

Keepaspecttofill	Scales the image so that it occupies the component's entire space while maintaining its aspect ratio. No empty spaces are left in any of the axes.
Fill	Scales the image so that it occupies the component's entire space but does not maintain its aspect ratio. No empty spaces are left in any of the axes.
Keepaspecttofit	Scales the image to fit the view considering one of the axes. The whole image is shown but there will be empty spaces along the other axis.

In this section, you can set the different attributes available to configure the component's tooltip. Refer to the table below to learn more.

Tooltip Enabled	Determines whether the tooltip is enabled in the app for the selected component. Click the arrow and choose an option from the drop-down menu. Select true to enable the tooltip or false to disable it.
Message	Message displayed by the tooltip. Enter a message to be displayed on screen.
Color	To set a color, click the field and type the hexa color code or click the rounded-edges square icon to open the color picker. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.
Font Size	To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.
Background Color	To set a color, click the field and type the hexa color code or click the rounded-edges square icon to open the color picker. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.
Position	Click the arrow and select an option from the drop-down menu to set the position of the tooltip with regard to the component: Bottom, Left, Right or Top.

An image sprite is a group of images put into a single image to reduce the number of server requests. In this section, you can configure the attributes applicable to one of the images within a component's image sprite. Refer to the table below to learn more.

Background Image	Sprite background image. To set the image, click the field and type the name of the image, or click the magnifying glass icon to open the image picker. Then, select one of the images available in the list, or use the search bar to find an image by name.
Background Position X Position	Enter the position of the desired image within the sprite with regard to sprite's X axis. To select the unit of measurement, click the arrow located to the right of the field and select an option from the drop-down menu.
Background Position Y Position	Enter the position of the desired image within the sprite with regard to the sprite's Y axis. To select the unit of measurement, click the arrow located to the right of the field and select an option from the drop-down menu.
Background Size Width	Enter the width of the desired image within the sprite. To select the unit of measurement, click the arrow located to the right of the field and select one of the options available in the drop-down menu.
Background Size Height	Enter the height of the desired image within the sprite. To select the unit of measurement, click the arrow located to the right of the field and select one of the options available in the drop-down menu.

In this section, you can set the attributes applicable to the text content of the component that will be visible in the app. Refer to the table below to learn more.

Color

To set a color, click the field and type the hexa color code or click the rounded-edges square icon to open the color picker. and type the HEXA color code in the Hexa field. To set the opacity, go to the Opacity field and enter a number up to 100. You can also set the opacity outside the color picker in the Opacity field next to the Background color field.

Font Size

To set the size, click the field and type the desired value. Refer to the table below to learn more about the types of text sizes and values available.

Standard absolute size	Enter any of the following values: xx-small, x-small, small, medium, large, x-large and xx-large.
Relative size	Enter any of the following values, where each constant represents a fixed portion of the screen: rel-xx-small (1/54); rel-x-small (1/40); rel-small (1/30); rel-medium (1/22); rel-large (1/15); rel-x-large (1/10) and rel-xx-large (1/5).
Absolute size in pixels	Enter a value followed by the suffix px. For example, 6px.
Size in millimeters	Enter a value followed by the suffix mm. For example, 6mm.
Size according to the number of base line rows	Enter a value followed by the suffix br. For example, 2br. You can use decimal numbers.

Font Family

To set a font family or typeface, click the arrow and select an option from the drop-down menu. You can also click </> and type the code to set the text font family manually.

Font Style

To set the font style, click the arrow and select an option from the drop-down menu. The only option available is italic.

Font Weight

To set the font weight, click the arrow and select an option from the drop-down menu. The only option available is bold.

Text Decoration

To set the decoration, click the arrow and select an option from the drop-down menu. The only option available is underline.

In this section, you can configure different attributes that affect how you see the component in the screens editor.

Important

Changes made in this section will not appear in the published app.

The only attribute to be configured is Src, which is the component's image. To set the Src, click the field and type the image's name or click the magnifying glass icon to open the image picker. In the image picker, go through the list to find the desired image or use the search bar to find an image by name, and then click it.

Actions

In the Actions tab, you can set animations for the components in your app's screen and determine how the user invokes effects and triggers actions while interacting with the app. Refer to the sections below to learn more.Actions

In this section, you can set events or actions on the component that will be triggered by other certain actions. For example, if the action configured is "On Click", an event or action will be triggered when the app user clicks the component. Refer to the table below to learn more about each action.

On Double Click	Action triggered when the user clicks or taps the component twice.
On Hold	Action triggered when the user clicks the component and maintains it clicked for more than one second.
On Click	Action triggered when the user clicks or taps the component.
Click Delay	Attribute that activates a delay between any clicks made on the same component. Important The delay impacts on the On Click and On Double Click attributes (if configured). For example, if you set the delay in true, and both On Click and On Double Click attributes are configured, such delay will apply on both. Previous configuration Before setting this attribute, you must first configure the global parameter CLICK_DELAY. This parameter defines the behavior of the attribute: you can globally define if you enable (true value) or disable (false value) the 500 milliseconds delay between multiple clicks. When configuring it, select the string Type and then define the Value: select True to disable the multiple click and activate the 500 milliseconds delay between one click and the other or False to enable the multiple click without any delay. To set the delay, select an option from the drop-down menu, that impacts on the Value defined in the CLICK_DELAY parameter: choose None (default value) to apply the value in the parameter; choose True to override the parameter value and activate the delay; choose False to override the parameter value and disable the delay.

In all cases, to set the event or action to be triggered, type the action in the corresponding field or click the vertical three-dot icon. The Create new link window opens. Click the down arrow and select one of the link types available in the drop-down menu: View, SW States, Process, Lambda, Pop Up, Toggle, Event, Link, Mail, Module Screen or Interface Message. A new drop-down menu appears. Click the down arrow and select the action or event within the selected type. Then, complete the parameters applicable to the option selected. Once you configure the required parameters, click Accept.Instancing a Screen-type Module

Note

The Click Delay attribute is the only attribute that is not configured through the Create new link modal.

In this section, you can set different effects on the component's attributes and the animations through which the effects take place. First, you must select the attributes for which you want to set effects. Refer to the table below to learn more.

Alpha	Component’s transparency or opacity. Enter the value to set the initial opacity of the component before the animation is executed. The value can range from 0 to 1, considering 1 as the value that grants the highest level of transparency.
Scale	Component's dimension. Enter the value to set the initial scale of the component before the animation is executed. By default, the scale value is 1, which equals the component’s original size. The value can be any number starting on 1.

Then, you configure the animation through which the effects previously defined will be executed. Refer to the table below to learn more about the animations available.

On Load Effect	Animation executed immediately after the screen loads.
On Call Effect	Animation executed upon invoking it through a message.

In all cases, you can set the animation's code or configure it with the Animation Editor. To configure the animation, click </> and then click on the text field to start typing the code or click the vertical three-dot icon to open the Animation Editor. Refer to Actions to learn how to use the editor.Actions

In this section:

Veritran Docs

Image

Important

Attributes

Design

Important

Important

Tip

Note

Note

Tip

Important

Important

Actions

Important

Previous configuration

Note

Search results