KB001384

Introduction

This Knowledge Base article describes how to use the Picture control Events.

A Rule can be configured to execute a Picture Event. The Events available are as follows:

• When Picture is [Clicked] - When the control is clicked, the cursor will change to a hand (pointer) and the Rule will execute
• When Picture is [Active] - When the cursor is hovered over the picture (Mouse Over), the Rule will execute
• When Picture is [Not Active] - When the cursor is moved from within the picture to its container (Mouse Out), the Rule will execute

Implementation Details

The Picture Events can be found when using the Picture control in the Rule Designer:

Example Scenarios

Example 1

In the scenario below we will be using the When Picture is [Clicked] Event to navigate to a URL.

Follow the steps below to set up the scenario:

1. Create a View with a Picture control.
2. Configure the Source of the Picture control by clicking on Source in the Data Source section of the control properties and adding a Picture.
3. Navigate to the Rules and add the following Rule:
   Events: When a control on the View raises an event
   Actions: Navigate to a URL
   
4. Click on configure next to the Navigate to URL Action and provide a URL.
   
5. Click OK and Finish to save the Rule.
6. Click Finish to save the View.
7. Run the View.
8. Click on the picture to open the URL.

Example 2

In the scenario below we will be using the When Picture is [Active] Event to change the picture when hovered over through the Set Control Properties Action.

Follow the steps below to set up the scenario:

1. Create a View with a Picture control.
2. Configure the Source of the Picture control by clicking on Source in the Data Source section of the control properties and adding a Picture.
3. Navigate to the Rules and add the following Rule:
   Events: When a control on the View raises an event
   Actions: Set a control's properties
   
4. Click on configure next to the Set a control's properties Action and select a new Data Source as shown below. 
   
5. Click OK and Finish to save the Rule.
6. Click Finish to save the View.
7. Run the View.
8. Hover over the picture to change the picture.

The When Picture is [Not Active] Event can be used in the same manner to change the picture back to the original when the cursor is moved from within the picture to its container (Mouse Out).