v7.0

Image

The Image control displays the picture that you want to add in the report. You can use images in various scenarios in the report, like displaying logo images in the report or displaying any product picture in a product list report.

You can use the Image control directly in a report or within a table cell. You can use the images as shared pictures that exist on the portal, as external images that are from any external image resources, and as database images where images are in the database.

The supported image formats are BMP, JPEG, GIF, PNG, EMF, WMF, and SVG.

Image Control

Using Image Control in a Report Designer

This section describes how to use an Image control in a report.

Follow the below steps to add an Image control.

From the Report Toolbox on the left, drag and drop the Image control onto the design area. You can also add it to a table cell.
Now you need to set the source of the image. For this, go to the Properties tab and under the Appearance section click the dropdown list Image.

You will see the following three options: Shared, Embedded, and Database.

Shared: The image source Shared refers to the images stored in the Wyn application in the Admin portal.

These images are listed under the Shared option.

Steps to add the Shared images:
1. You can select the Shared option and select the desired image from the list.
  
  The selected image will be displayed in the Image control.
Embedded: The image source Embedded refers to the images stored locally on the system that can be embedded into the report designer. These are uploaded image files, which are only used by the current report.

Steps to add the Embedded image:
1. Select the Embedded option and click the Load icon as shown below in the image.
2. A new window is opened. Navigate to the desired path where the image to be uploaded is stored and select the image.
  
  The selected image will be displayed under the Embedded option.
3. Select the image from the list and the selected image will be displayed in the Image control on the report.
  
  The embedded images that are uploaded in the report are available under the report Layout section on the Properties tab.
Database: The image source Database refers to the images stored in the database which can be used in the reports. If you want to use an Image field in the database, you must bind the image field.

You can also use the URL address of any image as the image source of the image control by:

(a) setting Source to External, (b) Setting Value to the URL of an image, as shown below:

Image URL

Inspector Panel properties

The Inspector Panel properties of the Image control are listed and described in the below tables.

Common

Property	Description
Name	Sets the name of the selected image control.

Action

Property	Property
Type	This sets the action to be taken when clicking on the image in the image control. The dropdown list has five options. None: This option means no action is to be taken. Apply Parameters: This option is used to re-render the report with new parameters. Choose the Apply Parameters option from the dropdown, click + Add, select a parameter, and action type, and name the action. The action types are explained below: Set: Used to set a specific value to a specific parameter. Toggle: Used to add or remove value to the multi-value parameter collection. Reset: Used to reset the parameter to its default value. See the Apply Parameters section for more information. Jump to Report: This option, allows you to jump from the current report to another report. You can link any image in the report. When a user clicks the linked image, it will jump to the report linked with that image. Jump to Bookmark: This option is used for jumping within the current report. You can define the bookmark and then select the jump to bookmark settings, to make it easier to jump between report content. You can bookmark any element in the report to make it a destination anchor for the jump. Jump to URL: This option is used to jump to an external web page.

Property

Type

This sets the action to be taken when clicking on the image in the image control. The dropdown list has five options.

None: This option means no action is to be taken.

Apply Parameters: This option is used to re-render the report with new parameters. Choose the Apply Parameters option from the dropdown, click + Add, select a parameter, and action type, and name the action. The action types are explained below:

Set: Used to set a specific value to a specific parameter.

Toggle: Used to add or remove value to the multi-value parameter collection.

Reset: Used to reset the parameter to its default value. See the Apply Parameters section for more information.

Jump to Report: This option, allows you to jump from the current report to another report. You can link any image in the report. When a user clicks the linked image, it will jump to the report linked with that image.

Jump to Bookmark: This option is used for jumping within the current report. You can define the bookmark and then select the jump to bookmark settings, to make it easier to jump between report content. You can bookmark any element in the report to make it a destination anchor for the jump.

Jump to URL: This option is used to jump to an external web page.

Appearance

Property	Description
Image	This option sets the image to be displayed in the image control in the report. Click the dropdown list to select the image source. Shared refers to the images that are uploaded on the portal, Embedded refers to the new images that you can select and upload here, Database refers to the database graphics field. Click the Expand image icon to display more image properties.
Source	This is the source from which the image is coming.
Value	This refers to the image selected from the source. Example: If the image source is "Shared", then you need to select the specific shared image here.
MIME Type	This refers to the image format like png, gif, etc.
Image Sizing	This sets the size of the image to be displayed while previewing. This dropdown list has 4 options: Autosize, Fit, FitProportional, and Clip.
Horizontal Alignment	This sets the position of the image in the control horizontally. It has 3 options: Left, Center, and Right.
Vertical Alignment	This sets the position of the image in the control vertically. It has 3 options: Top, Middle, and Bottom.

Border

Property	Description
Width	You can set the thickness of the image border using this option. By clicking the Expand option, you can set the width of the border of all the sides of the image.
Style	Select the borderline style of the image from the dropdown list. By clicking the Expand option, you can set the style of the border of all the sides of the image, in case required.
Color	Select the border color from the dropdown list. By clicking the Expand option, you can set the color of the border of all the sides of the image.

Dimensions

Property	Description
Left	This option sets the landscape position of the image to be maintained from the upper left side of the report.
Top	This option sets the vertical position of the image to be maintained from the top in the report.
Width	This option sets the width of the image.
Height	This option sets the height of the image.

Layout

Property	Description
Padding	Padding refers to the space between the image and the border or within the image control. You can set the padding from - Top: Sets the top padding in points, Left: Sets the left padding in points, Right: Sets the right padding in points, Bottom: Sets the bottom padding in points.
Layer Name	Sets the report layer.
Z-Index	This property sets the position of the image element when multiple images are stacked together. The image with a greater Z-Index value will always be in front of the image that has a lower Z-Index value.

Visibility

Property	Description
Hidden	This option sets whether to hide the image or not on the preview. Set it to True, to display the image. BY, default it is False.
Toggle Item	Visibility can be toggled by another report item. This option sets another item such as a text box, as a toggle button to display the current image or not.

Misc Options

Property	Description
Tooltip	Sets the textual label of the image when the mouse is moved over the image.
Label	Sets a text content that is used as display text for report catalog items. The report catalog is made using the Table of Contents element in the toolbox, and the table of contents is used for quick positioning jumps in multi-page reports.
Bookmark	Enter text or an expression to use as a positioning identifier to jump to this element. You can define the bookmark and then select the "jump to bookmark" setting, to make it easier to jump between report content. You can bookmark any element in the report to make it a destination anchor for the jump.
Accessible Description	Enter the text to be added as the accessible description here.

Image Properties

Example with Database Image: In the below example, we will display the list of the products with images in a table. Follow the below steps to add the Database images:

Drag and drop the table control on the report designer.
Bind the table with the database having images and drag the desired fields from the dataset into the details filed on the table.
Now add another column next to the field ModifiedDate and add an Image control into the details field.
Select the Image control and click the Properties tab.
Now you need to set the source of the image. Under the Appearance section click the dropdown list Image and select the Database option and select the image field from the list. Here we have selected the ThumbNailPhoto from the list as shown below in the image.
Now click the Expand icon next to the Image dropdown list.

The Source and Value fields are populated.
Set the display properties of the image and click Preview. The report will display the images in the Thumb Nail Photo column as shown below: