Image

Using this control, you can add an image in a coach and you can program the image to be clickable using the On click event.

Data binding

Set or modify the data binding for the control in the General properties tab. The Image control can be bound to a String variable which contains the location of the image to be displayed by the control. Typically, you bind the control to an image stored as a web file and the URL is a relative path to retrieve the file from the server. When you bind the control to a variable, the variable must contain a URL that is resolvable on the server.

Tip: Absolute URLs are acceptable, however, relative URLs are generally a better choice in order to avoid potential security warnings.

You can use the binding to specify the image. If no binding is specified, the Default image URL configuration property is used. To set a different image for different screen sizes, you must use theDefault image URL configuration property.

Configuration properties

Set or modify configuration properties for the control, such as appearance and behavior properties, in the Configuration properties tab.

Screen size: A configuration property that has the Screen Sizes icon beside the property name can have different values for each screen size. If you do not set a value, the screen size inherits the value of the next larger screen size as its default value. If you are using the Process Designer desktop editor (deprecated), you are setting the value for the large screen size. The other screen sizes inherit this value.

Theme definitions: Theme definitions specify the colors and styles for a control and determine the appearance of the control. You can preview the look and feel of controls in the theme editor. See Themes.

The appearance configuration properties for the Image control are shown in the following table:

Table 1. Appearance configuration properties for Image
Appearance configuration property	Description	Data type
Border radius	Specifies the radius of the curvature for an image. You can make an image perfectly round by setting it to at least half of the width specified for the Width property. By default, no border radius is specified.	`String`
Width	Specifies the width of an image in pixels, percent, or em units. For example: `50px` or `20%` or `0.4em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no width is specified.	`String`
Height	Specifies the height of an image in pixels or em units. For example: `50px` or `0.4em`. If only a number is specified without any unit, the number is interpreted as the number of pixels. By default, no height is specified.

The behavior configuration properties for the Image control are shown in the following table:

Table 2. Behavior configuration properties for Image
Behavior configuration property	Description	Data type
Prevent multiple clicks	Prevents a user from clicking an image more than once when the on click event is programmed. By default, this property is not selected.	`Boolean`
Image URL type	The type of the image URL. Web External Note: Use External for images that are not hosted on the local server.
Image app acronym	The acronym of the process app that contains the image. By default, the acronym of the current process app is used.
Default image URL	If the control is not bound, this URL is used. To set a different image for different screen sizes, you must use this property. To use an image, you must upload it to IBM® Process Designer. See Adding managed files
Default image URL type	If the control is not bound, this URL type is used. Web External Note: Use External for images that are not hosted on the local server.
Default image app acronym	The default acronym of the process app that contains the image. By default, the acronym of the current process app is used. If the control is not bound, the acronym specified here is used.

Example

Upload the image that you want to use to Process Designer. See Adding managed files.

In this example, the Image control is inside a Vertical Layout control, which is inside a Well control. The example uses the following configuration options:

Image URL type is Web.
Default image URL is magnolia.gif.
Default image URL type is Web.
Label position is Bottom.
Border radius is 50px.
Width is 300px.

When you run the coach, you see the following:

Image of a gear icon

Events

Set or modify the event handlers for the control in the Events tab. You can set events to be triggered programmatically or when a user interacts with the control. For information about how to define and code events, see User-defined events.

The Image control has the following types of event handlers:

On load: Activated when the page loads. For example:
console.log("Img1 successfully loaded")
On click: Activated when an image is clicked, before navigating away from the page. If the evaluated expression returns false, the click does not fire a boundary event. For example:
return ${Text1}.isValid();

Methods

For detailed information on the available methods for Image, see the Image JavaScript API.

Additional resources

For information about how to create a coach, see Building coaches.
For information about standard properties (General, Configuration, Positioning, Visibility, and HTML Attributes), see Coach view properties.