v7.1

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

Properties Tab

You can customize the default Image control appearance by setting properties in the Properties tab of the image control. Properties like adding a border, layout, visibility, etc. can be customized.

Listed below are the common properties.

Property Section	Property Description
Common	Name: Sets the name of the selected image control.
Action	Type: This sets the action to be taken when clicking the image. The dropdown list has four options. None: This option means no action is to be taken. 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:	This sets the appearance of the image. 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, and Database refers to the database graphics field. Click the Expand 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	This option sets the border of the image. Width: You can set the thickness of the image border using this option. By clicking the Expand icon , you can set the width of the border on all sides of the image. Style: Select the borderline style of the image from the dropdown list. By clicking the Expand icon , you can set the style of the border on all the sides of the image, in case required. Color: Select the border color from the dropdown list. By clicking the Expand icon , you can set the color of the border on all sides of the image.
Dimensions	This sets the location and size of the image. 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	This sets the image layout in a report as a whole. 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 there are multiple images that 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	This sets the visibility of the image on the report preview. 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 whether display the current image or not.
Misc Options	Tooltip: Sets the textual label of the image when the mouse is moved over the image. Label: Sets textual content that is used as a 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.

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: