Overview
The Image component displays an image on a page, which can be changed when certain conditions are met. The images used by this component must first be uploaded to a web site.
The following diagram shows an Image component being configured:
Display: |
Defines how the image will be displayed in the container. In a grid layout the container is the grid cell; in a precision layout the container is indicated by the bounding box of the Image component:
|
Image URL: | The URL of the image to display when this condition is met. |
Event: | The event that is to be evaluated to see if the condition is met. |
Comparison: | The operator that determines the condition to be met. The operator can be a mathematical or text comparison operator. |
Is Value: | The value that the event is being compared with to see if the condition set by the comparison operator is met. |
Default Image URL: | The image to show if none of the conditions are met. |
Tutorial
In this tutorial, we’ll look at adding an Image component that references 3 images. The page will display a smiley face, sad face, or neutral face, depending on certain conditions.
Let’s go through this process, step-by-step.
Step by Step: Displaying an Image That Changes When Conditions are Met
Before you start, open a new tab in Explorer and click the “Create a New Page in Studio Mode” thumbnail. Choose the grid layout.
If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.
Step 1. Add and Configure a Combo Box
This combo box will provide the basis for determining which image to show.
- Drag and drop the Combo Box component onto the canvas.
- Configure it as follows:
- Option Values: (Event) optionValues
- Selected Option: selectedOption
Step 2. Add Source Data
We will need some data to drive the comparisons, so let’s add this now. We’re going to add a dataset, and we're also going to publish some events from this dataset. The Image component will use these events to determine the conditions.
- Below the canvas, click the button labelled “Add Data”.
- Add the ProductionSumWithTargets_Perth dataset and configure it as follows:
- Name: ProductionSumWithTargets_Perth1
- Query: ProductionSumWithTargets_Perth
- names: (List) BOSSIER 1, BOSSIER 2, BOSSIER 3, BOSSIER 4, BOSSIER 5, BOSSIER 6, BOSSIER 7, BOSSIER 8
- prodEndTime: (Datetime) 01/02/2012 12:00:00 AM
- prodStartTime: (Datetime) 01/01/2012 12:00:00 AM
- readingType: (Text) Monthly
- typeTemplate: (Text) Well
- Configure the 1st event on the dataset:
- Type: Single
- Event: water
- Column: Water
- Filter Column: Entity
- Filter Value: (Event) selectedOption
- Configure the 2nd event on the dataset:
- Type: Single
- Event: watertgt
- Column: Water Tgt
- Filter Column: Entity
- Filter Value: (Event) selectedOption
Step 3. Set the Event Defaults
You can add an event at any time. Here we want to set the value for the event used in the Combo Box.
- Click the Event Defaults button to the right of the canvas.
- Add an event called “optionValues” with a list containing the following items: BOSSIER 1, BOSSIER 2, BOSSIER 3, BOSSIER 4, BOSSIER 5, BOSSIER 6, BOSSIER 7, BOSSIER 8
Step 4. Add the Image Component to the Page
Drag and drop the Image component onto the canvas, and configure it as follows.
- Display: (Options) Default
- Default Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/neutral.png
- Add 2 images.
- 1st Image:
- Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/happy.png
- Event: water
- Comparison: (Number) =
- Is Value: (Event) watertgt
- 2nd Image:
- Image URL: https://e4helpcenter.petroleumplace.com/help/wp-content/tutorials/sad.png
- Event: water
- Comparison: (Number) <
- Is Value: (Event) watertgt
Step 5. All done!
Congratulations! You now have a page with an image that changes depending on what you select from the combo box. Click the preview button on the Studio toolbar to see what your page will look like in run-time.
Don’t forget to save your page!