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.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.
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. |
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.
|
|
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.
|
|
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:
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.- 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.