- IBM Cognos 8 Report Studio Cookbook
- Abhishek Sanghani
- 641字
- 2021-08-06 17:15:51
Show/Hide prompt controls at runtime
A report shows sales quantity by product line and order method. Users need to filter on either product line or order method, any one at the time.
They would like a facility to select which prompt they want to filter on, and depending on the selection, prompt should appear.
Getting ready
Create a list report that shows product lines, order methods, and sales quantity. Create two options filters—one on product lines and the other on order methods.
How to do it...
- We will start by creating prompts for both the filters. For that, add a prompt page and add two value prompts. Use the prompt wizard to connect them to the parameters (product line and order method).
- Set the Hide Adornment property of both the prompts to Yes.
- Now drag an HTML item just before the product line prompt. Define it as:
<Input type = radio Name = r1 title= "Click me to select Product Line..." Value = "PL" onclick= "radioSelect(this)">Product Line <Input type = radio Name = r1 title= "Click me to select Order Method..." Value = "OM" onclick= "radioSelect(this)">Order Method <span id = 'ProductSpan'>
- Now add another HTML item between the product line prompt and order method prompt. Define it as:
</span> <span id = 'OrderSpan'>
. - Finally, add a third HTML item after the order method prompt. Define it as:
</span> <script> var fW = (typeof getFormWarpRequest == "function" ?getFormWarpRequest() : document.forms["formWarpRequest"]); if ( !fW || fW == undefined) { fW = ( formWarpRequest_THIS_ ?formWarpRequest_THIS_ : formWarpRequest_NS_ );} var theSpan = document.getElementById("ProductSpan"); var a = theSpan.getElementsByTagName('select'); for( var i = a.length-1; i >= 0; i-- ) { var ProductBox = a[i]; ProductBox.style.display = 'none'; } theSpan = document.getElementById("OrderSpan"); a = theSpan.getElementsByTagName('select'); for( var i = a.length-1; i >= 0; i-- ) { var OrderBox = a[i]; OrderBox.style.display = 'none'; } function radioSelect(rad) { if (rad.value == "PL") /* Hide OrderBox and show ProductBox */ { ProductBox.style.display = ''; OrderBox.style.display = 'none'; } else if (rad.value == "OM") /* Hide ProductBox and show OrderBox */ { ProductBox.style.display = 'none'; OrderBox.style.display = ''; } else /* Hide both controls */ { ProductBox.style.display = 'none'; OrderBox.style.display = 'none'; } } </script>
Now your prompt page will look like the following in Report Studio:
- Run the report to test it. You will see two radio buttons. Depending on which one you select, one of the prompts will be visible.
How it works...
Tip
Before explaining how this recipe works, I would like the readers to know that it is possible to achieve the required functionality using Conditional Block instead of JavaScript. You would use the auto-submit functionality of radio button prompt, which will then cause the Conditional Block to show appropriate prompt.
If you are using Cognos Report Studio version 8.2 or older, this will refresh the page and will not give a seamless user experience. Hence, you might consider the JavaScript alternative that is explained next. From 8.3 onwards, the whole page is not refreshed. But still you might want to consider JavaScript for a quick response time.
This recipe works in three parts. First, we defined the radio buttons in the HTML item. This is our own code so we can control what happens when users select any of the radio buttons.
Then, we wrapped both the prompts into spans so that we can capture them in the JavaScript and manipulate the properties.
Finally, we wrote the JavaScript to toggle the display of prompts depending on the radio button selection.
There's more...
When the prompt is hidden through the style.display
property, the adornments aren't hidden. That is why we set the adornments off in step 2.
When the visibility of a control is turned off, the control is still present on the form and the selected value (if any) is also submitted in the query when user clicks on Finish button.
Hence, it is preferred that we reset the selection to index(0)
when a prompt is hidden. For information on how to select a value through JavaScript, please refer to Dynamic default value for prompt recipe of this chapter.
- Spring Python 1.1
- Excel 2013使用詳解(修訂版)
- 剪映專業版(電腦版)視頻剪輯全攻略:音效添加+轉場特效+視頻制作
- 魔法詞典:AI繪畫關鍵詞圖鑒(Stable Diffusion版)
- PHP應用開發與實踐
- Android從入門到精通
- Jetpack Compose:Android全新UI編程
- Premiere Pro CC 2018基礎教程(第3版)
- Photoshop CS6從入門到精通
- 人人都能玩賺AI繪畫
- 中文版CINEMA 4D R20 實用教程
- 構筑敏捷的開發團隊:微軟Visual Studio 2010實戰兵法
- Cinema 4D/After Effects印象 影視包裝技法精解基礎篇
- Photoshop 2021中文版入門、精通與實戰
- Photoshop+PxCook+Cutterman網頁UI設計教程