Hi, welcome to this series of Jasper's support. In this session, we are going to see the inside out of the image element in Jasper's of Design Studio. The agenda for this session is, firstly, I will walk you through on the basics of the image and image element. Then we take a look at the properties of an image element. And finally, we will see an example on how we can use an image element in a product sales report. Let's get started. What is an image? In general, an image is a graphical object. In Jasper reports, we can consider an image as a resource to the report. Now what is an image element in the studio? An image element is a basic element in the studio to plot an image. An image directly does not correspond to the image element. We will discuss more about image and image element when we move on to the scale image property. Now, let us take a look at the properties of the image element. There are several properties that we can apply on an image element in Jasper reports. The properties includes image selection mode evaluation time, lazy using caching, fill, scale image on error type, rotation and image alignment. Let us briefly look at each of these properties with their options to start with image selection mode. Image selection mode space-based location from where we can load the image. There are several options available to select an image. The possible selection modes are workspace resource, absolute path in the pile system, your selected resource from Jasper report server, custom expression and no image. Let us briefly look at each of these options with image selection mode. Workspace resource. Workspace resource option indicates that an image can be located from the workspace folder. For instance, we can add an image to the workspace folder and we can be, we can refer to that image expression using the workspace path of the image. Absolute path in the file system. Absolute path option indicates that an image can be located from the physical drive, physical drive path in the system. We generally avoid taking absolute path in the file system when we publish the reports the server. This is basically used for unit testing purposes. Now URL. URL option indicates that an image can be located from a web URL and this web URL is the value of the image expression. Now select a resource from Jasper report server. This particular option indicates that an image can be loaded from the Jasper report server. For instance, we can upload the images as files to the Jasper report server and we can refer to those images using a repository web path. Custom expression. Custom expression. This option indicates that an image can be loaded based on an expression. That means the value written by the image expression is the source of the image. The value written by this expression will be the source of the image. Custom expression basically it is useful when we want to load the image from the data with fields. For example, we can store an image in data with fields using some binary code and we can load that image in the report based by the particular field expression. The value of the expression could be a string type or it could be a file type or it could be URL type. Now what is no image option? This option indicates that no image will be loaded in a state it displays an icon. Icon for the image. Now let us move on to the other set of properties with image. So evaluation time. Evaluation time specifies the moment when the image expression should be get evaluated. Basically the value of the image expression depends on the evaluation time. The passable values for evaluation time property are now report page column, ban, auto and master. The default value the default evaluation time is now for an image. Let us briefly look at each of these options with evaluation time. Now option indicates that an image expression is evaluated when the current ban is filled. Report option. Report option indicates that the image expression is evaluated at the end of the report execution. Page option. Page option indicates that the image expression is evaluated when the end of the current column is reached. The column option indicates that the image expression is evaluated when the end of the current column is reached. Ban option. The ban option indicates that the image expression is evaluated at the end of the ban. Auto expression auto option. So this is an interesting thing here. Basically an expression could contain more than one variable and each of these variable can contain reset types. So the auto option indicates that the image expression is evaluated at a time based on the reset types of the variables in the expression. Now what is master evaluation time? Master evaluation time indicates that the image expression is evaluated at the end of the master report ends. So basically this option we use when we work with master report and sub report. Now let us move on to the lazy property. Is lazy is a flag option that can be either true or false by default. Lazy flag is set to false. Finally running a report can consist of two phases. They include report filling phase and report exporting phase. So the lazy flag space phase whether the image should be loaded and processed in during the report filling phase or during the report exporting phase. So when the lazy flag is set to true then the path of the image is told at the report filling time and the path will be evaluated as string type. Now when the flag is set to false then the image will be loaded from the location or path during the report exporting time. Now what is cache property? cache is a flag option that can be either true or false by default. cache flag is set to true. Options test phase the memory of the report engine. That means it could be the memory of the studio or it could be the memory of the server when it published the reports. So the cache flag indicates whether an image should be loaded each time or should be loaded from the cache. We can increase the performance of the report using this property. So when the flag is set to true the report engine will try to recognize previously loaded images and if the flag is set to false then the image is loaded each time when we run the report. Now let's move on the remaining set of the properties of the image. Image fill is by default. We have only one option with the fill property. Scale image property. Scale image space how the actual image should be rendered with respect to the size of the image element. Image is different from image element in the Jasper reports. So basically we need to understand that image element does not directly correspond to the actual image in the report and normally images are loaded at runtime. So we do not know their exact size while we create the report template. So using the scale image property we can let the image element know how and what part of the image should be displayed. The possible values for this attribute are clip, fill frame, retention, real height and real size. So let us briefly look at each of these options. Click using the clip option we can cut off the image size when the actual image is larger than the element size. When I say element it is the image element on the report. So this means that the image element keeps the image original resolution and only the region that fits the specified size will be displayed. Frame option using fill frame option we can force the image to stretch when dimensions of the actual image do not fit those specified for the image element. Retent shape option. Using the retent shape option we can display the original image as it is even though the actual image does not fit into the image element. That means we can adapt the original dimensions of the image using the retent shape option. Real height. Real height option using this option the image can be stretched vertically to match the actual image height while preserving the declared width of the image element. Real size option. Using this option the image can be stretched vertically to match the actual image height while adjusting the width of the image element to the two match the actual image width. Now what is on error type property. Specifies that some kind of output should be provided when the image is not available while we run the report or while the report loads. The possible options to display some kind of output instead of image or error blank and icon. Let us briefly look at each of these again error error option displays exceptions. If the report cannot load the image blank blank option displays nothing for any image load exception icon. Icon option puts a small specific icon on the report output indicating that actual image is missing. Now let us quickly look at this rotation and image alignment properties. So rotation property there are three attributes that are responsible for the image rotation. The possible values are left, right and upside down image alignment. There are two attributes that are responsible for image alignment, horizontal alignment and vertical alignment. Allignments face the horizontal alignment and the possible values are left, center and right. Vertical alignment specifies the vertical alignment. The possible values for this one is DOM, middle and bottom. Now let us move on to the example. Let us consider the scenario of the product sales report. In the report we are going to display the company logo on the title band and in the details band we are going to conditionally display the symbols to indicate whether the company gain profit or losses for the product sales. So in this demo we are going to take a report selection mode as from Jasper report server using a repository report path. Further we need to upload the image to the server and repeat the paths. I am uploading profit plus crypto image to the server as files and the paths we will see in a minute. So in the server we have resources for the creator for our previous examples and image is a kind of resource to the report. So I am going to upload tick logo and profit and loss images to these resources folder. Further select the resources folder or click on it then click on add resource and image is a file. So select on the file then select the image option. Now in the upload a file from your local computer let us select the logo from the physical path. So in the physical drive I have tick go image here and description is optional but it is always good to provide the description for any of the resources of the whatever we publish to the whatever we upload to the server. So we have uploaded tick go image then click on submit button. Similarly upload the other two images related to the profit and loss. So right click on the resources folder and resource file then image. Now choose the file for profit. So I am going to indicate profit image using this icon and we can see that we can see that the properties of PNG image format. So submitting then again select the final image for our demo that is loss image. So these two symbols right or wrong symbols yes or no we can consider whether profit is gained whether the loss is occur. So we can indicate those symbols with s or no in the form of images. So let us upload this loss image. So now we have the image of to the Jasper report server our strategy for selecting those these image is selector resources from the Jasper report server for that we require two for that we require paths of these image. So we can right click on each of these image then go to the properties and we can take this path. So we I think I have already taken these paths. So the tip of file path is this one repo Jasper report 2021 resources then the image name similarly for profit and loss these are the repository paths. So let us quickly create a report. So I have already created a report to take the screenshot but let us freshly create a new report before doing that let me let me remove the other one or even this is fine. So to start with create a blank report from new file Jasper report then select the blank report from the report templates then let us save this report under reports folder of Jasper report 20 21 project and let us give it a name to save the report. So I am I am going to name it as image element for sets report. So take this one here click on next then from the data adapter select the footma database and I have created a query here which will get the required information for the report. So this query has the branding and product work brought by and product sold price and we have calculated the profit and loss. So whenever we see the native values for proctor plus fields we are going to display the no symbol from the image and whenever we see the positive values you would expect to see the a symbol image on the report. So let us see how we can do that by taking this query in the report. So I am copying it here and testing it on the reporting tool. So click on next then let us take all the fields for the report click on next. We do not for this demo we do not require to group by group by the report. So click on next then click on finish. Now let us remove the unnecessary bands from the report. So we require title column header and detail for this demo. So I am going to delete page header column quarter page total summary. So these bands I am deleting. Now from the fields node let us select all the fields and push them on to the detail band. Let us remove profit or loss. We do not want to see the actual value instead we want to get them from the images. So I am deleting this particular field from the detail band. Now I am going to take the images on to the report. So as I mentioned we are going to work with two images. One image is for the logo of the company and we are conditionally going to display a profit or sales based on positive values and based on negative values. So for that we are going to use print when expression option of the image. So we reach to the core part of the demo here. We can see the uploaded images from the servers node within the studio. So for that select the connection then click on refresh. It will get all the folders available from the server and Jasper reports 2021 is our project folder. So let us expand this one and in the resources folder we can see the recently uploaded image is available under this one. So the easiest way to get the path for these images on to the report is we can directly drag and drop these images on to the report is in our or we can manually repeat the paths using repo keyword. So I am going to use this methodology to have the images on to the design space. So I need to copy and g image as a logo. So images. So this is the logo and serve this image element and we can see the default properties and voters images and inheritance if we go and check the image expression image expression is taken as the path from the Jasper report server with repo keyword. So this is how we can generate the paths for an image while we drag and drop the images on the design space. So we can see the evaluation the default evaluation time as now and the lazy option is selected as false here and the other properties is in cache. By default it is true for any of the image fill is solid always scale image we we are having written shape and on error type is by default taken as error and rotation is none and we are going with the default elements for this logo. Now let us give the let us give title to this report here. So I am going to use the same name that I use it for the report saving. So that is nothing but image element for a sales report. So this one here within the double course and naming the report. So now instead of a instead of beating the actual value on the report for profit or loss field we are going to make use of images from the server for that let us take the profit image first and drag it on to the detailed band here and let us keep the same height as the field here. Now let us take the loss image. Let us take the same height and width as the other image and keep one over the other. Now from the outline view we can see two semas are available as notes here. So we can select these image elements from the outline and we can work through the properties of this one. So to conditionally get this on or say yes or no image symbols we have to provide the positivity and negativity expression in its properties. So let us select this loss image and in the properties go to the print when expression and then conditionally try to condition that evaluates to negative that means false. So this should be less than 0. So whenever we get negative values we are going to display this into symbol instead of the value. So we can finish similarly select the other image which is right icon. So go to the image go to the appearance and in the print when expression let us take the same field profit and loss and we want to get this when we get a positive value. so when the profit and loss results in positive value then it should be greater than 0. So click on finish and let us adjust the height and width. Save the report. Click click no for now. we are done with the now we are done with the processing of images on the design space. So now we are done with the elements of elements of right and wrong on the report design space. So let us see how this image is coming up on the resource. So basically this image or resources to the reports. So let us quickly format this a bit more to have a better look and feel. Let us publish this report to the server and see how the image are showing up on the report output. So let us publish this reports to the reports folder then then provide the reporting unit. Then click on next. So the reporting the publishing strategy for this one is it should be it should be ignore because we are referring the image from the server. So we do not want to override the expression of the image if we do that we ended we end up with the error message on the server. So let us take this one ignore. So this is important when we work with the resource any type of resource if the resource is available in the server it is always good practice to provide the strategy as ignore for the resources. So in this case the resources are images. So let us take the public strategy as ignore then click on next then data sources from the repository and put on data of this. Then click on finish click okay. So now let us run this report from the Jasper report server. So this report should be available in the reports folder here and the report name is image element. So that's the report of sales report right click on it and then click on run in new tab. So we can see that the images are available on the the image the image are displayed on the report output. So this is the company logo here and we can see positive positive values are displayed with the right icon and the negative values are displayed with into icon. So this is how we can work with the image elements with the with the Jasper report server as the selection. So this brings us to the end of the session on how we can use image element in the Jasper reports. So before we wrap up let's do a quick recap of what we saw in this video. So there was a question I left it for your review better let me let me do a quick recap. So firstly we have seen what is an image and what is an image element in the studio then we've occurred through the properties of the image element. And finally we have seen how we can use image element in a product detail report. So that's all for this session thank you for watching stay tuned for more updates.