Follow

Image

The Image control adds an Image to a Coach and can be programmed to have an on-click event.  The Image Control comes with many easy to configure behavior and appearance options.

Like almost all SPARK controls, you can trigger events that are fired when the user interacts with the control (see the Event and Methods sections below and the Event Handling article for more information).

The Image control can be bound to a String variable.

Behavior

Prevent Multiple Clicks Prevent the user from clicking the image more than once when on click event is programmed

Image URL Type Web, External, Server, Design.  Note that for all images not being hosted on the local server, external should be used. 

Image App Acronym Acronym of the process app the image is located in.  This is optional and defaults to the current process app.

Default Image URL URL for default image.  See below under 'How to Add Images to Managed Files' on detailed information on uploading Image files to Process Designer.

Default Image URL Type Web, External, Server, Design.  Note that for all images not being hosted on the local server, external should be used. 

Default Image App Acronym Default acronym of the process app the image is located in.  This is optional and defaults to the current process app.

Appearance

Border Radius Roundness of the image

Width Width in px, %, em; ex. 50px, 20%, 0.4em. If no unit is specified, px is assumed

Height Height in px, em; ex. 50px, 0.4em. If no unit is specified, px is assumed

How to Add Images to Managed Files

1.  Click the plus (+) sign next to 'Files' and select 'Web File'

2.  Click 'Browse' and select desired image, once done you should see the image in the Web File list

Example

These are the configuration option settings...

This is the result ...

Note: The Image is inside a Vertical layout, which is inside a Well

Events

With the Image control, there are 2 types of event handlers:

  • On Load When the page loads
  • On Click When the Image is clicked

You can use JavaScript logic to affect the effects of the control, depending on the event. More information on using these controls can be found in the Event Handling article.

Methods

For detailed information on the available methods for this control, access the JS Doc file.

 

  • Author: Courtney Silva
  • Date Created: June 8, 2015
  • Date Modified: August 3, 2015
Was this article helpful?
0 out of 0 found this helpful

Comments

  • Avatar
    Jeff Goodhue
    Not sure if this is just me, but I was using the Image control in BPM 856 in a Client Side Human Service (CSHS) and noticed that I could not get Web files to resolve in the process app but as soon as I uploaded the file as a Server file (same exact file) and changed the type configuration on the Image control to Server, it worked immediately. In case it helped others.
  • Avatar
    Stu Leibowitz

    Thanks Jeff! I had the same problem in my 8.5.7. I struggled with it until I scrolled down to the bottom of this page and read your comment...

  • Avatar
    SPARK Support

    Apparently the Configuration option for Default Image URL Type is not saving if the control is left on the initial default of Web. To work around this issue, select another option such as External and Save the CSHS. Select Web again and Save. You will notice the icon next to the Configuration option now displays as a small monitor with the option to "unset" on click. The service will now run as intended.