- IBM Cognos 8 Report Studio Cookbook
- Abhishek Sanghani
- 448字
- 2021-08-06 17:15:52
Handling 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 Catalogue).
There will often be a case in which 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 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 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.
- 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 last 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:
<script> function img2txt(img) { txt = img.alt; img.parentNode.innerHTML=txt;} </script> - Now run the report to test it.
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 CRS'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 a text which was originally defined as 'alternative text'. Hence, if green.jpg is missing, this function will replace it with a text item 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 catalogues, and so on).
- 云化虛擬現(xiàn)實技術(shù)與應(yīng)用
- PrestaShop 1.3 Theming – Beginner’s Guide
- Entity Framework Tutorial
- ERP沙盤模擬教程
- 剪映專業(yè)版（電腦版）視頻剪輯全攻略：音效添加+轉(zhuǎn)場特效+視頻制作
- BPEL Cookbook: Best Practices for SOA/based integration and composite applications development
- SolidWorks 2018有限元：運動仿真與流場分析自學手冊
- AutoCAD 2017從新手到高手
- UI功夫：PC和APP界面設(shè)計全流程圖解
- Premiere Pro短視頻剪輯零基礎(chǔ)一本通
- 虛擬現(xiàn)實：沉浸于VR夢境
- 零基礎(chǔ)學Premiere Pro短視頻制作
- 企業(yè)虛擬化實戰(zhàn)：VMware篇
- iOS智能手機APP界面設(shè)計實戰(zhàn)教程
- AI寫實人物繪畫關(guān)鍵詞圖鑒（Stable Diffusion版）