In this recipe, we will see how to use one report as a container to call or display different reports. We will use an HTML element called iFrame that allows the browser window to be split into segments. Each segment can be updated separately.
We will give users the ability to choose which report contents to display and toggle between two reports by clicking the appropriate button. You can build upon this idea to create many practical solutions like displaying help, toggling graphs, providing tabs to display different reports, and so on.
Create a simple list report with Product related columns (Product query subject) and save it as iFrame–Products.
Create another simple list report with Retailer related columns (Retailer query subject) and save this report as iFrame–Retailers.
- Go to Connection Portal and locate the reports we created previously.
Click on the Set Properties button for 'iFrame –Products'. From General tab, click the View search path link.
Copy the Default Action URL and save it somewhere for use in later steps. This URL will look similar to: http://localhost:80/cognos8/cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2fpackage%5b%40name%3d%27GO%20Data%20Warehouse%20(query)%27%5d%2ffolder%5b%40name%3d%27Chapter%2010%27%5d%2freport%5b%40name%3d%27iFrame%20-%20Products%27%5d&ui.name=iFrame%20-%20Products&run.outputFormat=&run.prompt=true
- Similarly save the Default Action URL for 'iFrame – Retailers' report.
- Now go to Cognos Report Studio and create a new blank report.
- On the report page, drag a new HTML Item to the page. Define the code as follows:
<script language="javascript" type="text/javascript">function showReport(x){switch(x){/* Replace the URL in below stmt with the one you saved for iFrame-Product report */case 1: document.getElementById("dynamic_report").src = "http://localhost:80/cognos8/cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2fpackage%5b%40name%3d%27GO%20Data%20Warehouse%20(query)%27%5d%2ffolder%5b%40name%3d%27Chapter%2010%27%5d%2freport%5b%40name%3d%27iFrame%20-%20Products%27%5d&ui.name=iFrame%20-%20Products&run.outputFormat=&run.prompt=true&cv.toolbar=false&cv.header=false";break;/* Replace the URL in below stmt with the one you saved for iFrame-Retailer report */case 2: document.getElementById("dynamic_report").src = "http://localhost:80/cognos8/cgi-bin/cognos.cgi?b_action=cognosViewer&ui.action=run&ui.object=%2fcontent%2fpackage%5b%40name%3d%27GO%20Data%20Warehouse%20(query)%27%5d%2ffolder%5b%40name%3d%27Chapter%2010%27%5d%2freport%5b%40name%3d%27iFrame%20-%20Retailers%27%5d&ui.name=iFrame%20-%20Retailers&run.outputFormat=&run.prompt=true&cv.toolbar=false&cv.header=false";break;}}</script><button type="button" onclick="showReport(1);">Products</button> <button type="button" onclick="showReport(2);">Retailers</button>For the URL shown in bold, you need to place the Default Action URLs that you saved for both the reports in the first step.
- Now create another HTML item on the report page and define the code as:
<iframe name="dynamic_report" src="" frameborder="0" height="90%" width="100%"></iframe>
- The report will look like a blank page with two HTML items on it.
- Run the report to test it. You should see two buttons called Products and Retailers. When you click on Products, the 'iFrame – Products' report will be displayed. By clicking on the Retailers button, you can display the 'iFrame – Retailers' report.
Here we are using the iFrame element of HTML to achieve dynamic content on the report page. In one HTML item, we define an iFrame element called dynamic_report and set it's source (src property) to blank.
Then in another HTML item, we define two buttons and one JavaScript to dynamically change the source (src) property of the iFrame. Depending on which button is clicked, we set the source of iFrame to the Default Action URL of either 'iFrame-Product' report or 'iFrame-Retailers' report.
When the report first loads, the iFrame is empty (because the source property is blank). As soon as user clicks on any of the buttons, the iFrame source is changed by the JavaScript. This causes either of the reports to execute and the output is loaded on the page. This way it allows us to dynamically switch between the report contents while staying on the same page.
Please note that you should append &cv.toolbar=false&cv.header=false to the URLs in the JavaScript. This would hide the Cognos toolbar and header from showing up again in the iFrame.
Also, you should try and extend this concept to create other dynamic solutions, for example like displaying help, toggling graphs, providing tabs to display different reports, and so on.