Handling the missing image issue
In the previous recipe, we saw how to add images to the report. You will be using that technique in many cases, some involving hundreds of images (for example, Product Catalog).
There will often be a case in which the database has a URL or image name, whereas the corresponding image is either missing or inaccessible. In such a case, the web browser shows an error symbol. This looks quite ugly and needs to be handled properly.
In this recipe, we will see how to handle this problem gracefully.
Getting ready
We will use the report prepared in the previous recipe. We need to delete the Green.jpg file (or rename it to something else) from the server in order to create the missing image scenario.
How to do it...
In this recipe, we will first delete the green indicator image to test the problem of a missing image then we will see how to handle it. To do this, perform the following steps:
- In the previous recipe, we added an image object and defined its conditional URLs. We need to replace that image with an HTML Item. For that, unlock the report objects and delete the image component. Add an HTML Item in the same column as shown in the following screenshot:
- Select this HTML Item and from the Properties pane, set its HTML Source Variable to Traffic (please note that we already have this conditional variable in the previous recipe).
- Now define the HTML for different conditions. Start with red. Choose red from Conditional Explorer and define the HTML as
<img src="../samples/images/red.jpg" alt="downsell" onError="img2txt(this)"/>. - For yellow, define the HTML as
<img src="../samples/images/yellow.jpg" alt="No Change" onError="img2txt(this)"/>. - For green, define HTML as
<img src="../samples/images/green.jpg" alt="Upsell" onError="img2txt(this)"/>. - Now go back to the No Variable state by double-clicking on the green bar, and add another HTML item on the report. Put it just before the list.
- Define this HTML as follows:
<script> function img2txt(img) { txt = img.alt; img.parentNode.innerHTML=txt;} </script> - Now run the report to test it as shown in the following screenshot:
As you can see, if the image is missing, the report will now handle it gracefully and show some text instead of an error image.
How it works...
Here we are using our custom code to display the image instead of using Cognos Report Studio's in-built Image component.
We have pulled an HTML item onto the report and defined it to display different images depending on the condition using the <img> tag. This tag allows us to define an alternative text and onError event as well. We are using the onError event to call our custom made JavaScript function called img2txt.
This function replaces the HTML item with text which was originally defined as alternative text. Hence, if green.jpg is missing, this function will replace it with the text Upsell.
There's more...
As we are using HTML code and JavaScript in this technique, it works in HTML format only. This technique will be useful for a lot of graphical reports (dashboards, scorecards, online product catalogs, and so on).