Report Studio Workshop - Tabbed Prompt Report -...

Tip or Technique

Tabbed Prompt Report Workshop

Product(s): IBM Cognos ReportNet 1.x and IBM

Cognos 8

Area of Interest: Report Design

Tabbed Prompt Report Workshop 2

IBM Cognos Proprietary Information

Copyright

Copyright © 2008 Cognos ULC (formerly Cognos Incorporated). Cognos ULC is an IBM Company. While every attempt has been made to ensure that the information in this document is accurate and complete, some typographical errors or technical inaccuracies may exist. Cognos does not accept responsibility for any kind of loss resulting from the use of information contained in this document. This document shows the publication date. The information contained in this document is subject to change without notice. Any improvements or changes to the information contained in this document will be documented in subsequent editions. This document contains proprietary information of Cognos. All rights are reserved. No part of this document may be copied, photocopied, reproduced, stored in a retrieval system, transmitted in any form or by any means, or translated into another language without the prior written consent of Cognos. Cognos and the Cognos logo are trademarks of Cognos ULC (formerly Cognos Incorporated) in the United States and/or other countries. IBM and the IBM logo are trademarks of International Business Machines Corporation in the United States, or other countries, or both. All other names are trademarks or registered trademarks of their respective companies. Information about Cognos products can be found at www.cognos.com

This document is maintained by the Best Practices, Product and Technology team. You can send comments, suggestions, and additions to [email protected] .



Contents

1 INTRODUCTION ............................................................................................ 4

1.1 FASTER TABBED PROMPT PAGES ................................................................................4 1.2 SOLUTION OVERVIEW.............................................................................................4 1.3 APPLICABILITY .....................................................................................................5 1.4 UNDOCUMENTED AND UNSUPPORTED CAPABILITIES USED..................................................6

2 TABBED PROMPT REPORT WORKSHOP........................................................ 6

CREATE THE BASIC REPORT .................................................................................................6 2.1 CREATE THE BASIC PROMPT PAGE ..............................................................................7 2.2 CREATE THE TAB BODY...........................................................................................7 2.3 CREATE THE TABS .................................................................................................9 2.4 STYLE THE TABS ................................................................................................. 12 2.4.1 IBM Cognos 8 Button Styling............................................................................. 13 2.4.2 ReportNet Button Styling .................................................................................. 14 2.5 RUN THE REPORT ................................................................................................ 14 2.6 SHOW ACTIVE AND INACTIVE TABS........................................................................... 14 2.7 FORMAT THE TAB BODY ........................................................................................ 18 2.8 FORMAT THE PAGE AND ADD TEXT ........................................................................... 20

3 CONCLUSION .............................................................................................. 21



1 Introduction

1.1 Faster Tabbed Prompt Pages

This document outlines a method to deliver a report to consumers with a tabbed style user interface in the prompt page rather than a series of prompt pages. The most-often used prompts would appear in the first tab with each tab presenting successively less used prompts.

This technique has been applied in applications where as many as 60

prompts across 6 to 8 tabs have been used.

There are 2 issues which drive performance in these reports. First, the sheer number of prompts means that IBM Cognos 8 must analyze many queries before the report is run. Generally this means 1 query per prompt plus the

report queries themselves. Reducing the impact of this analysis phase can only be addressed by using fewer queries in a given report and this is beyond the scope of the current document. Secondly, due to the nature of some

HTML/JavaScript techniques poor performance may result. The standard technique is to create HTML/JavaScript to generate tabs that allow the user to switch tabs using client-side processing without hitting the server. This

means that all prompts (as many as 60) must be populated prior to the first tab being displayed. As queries are run sequentially and the more prompt queries the longer it will take to produce the first prompt page.

1.2 Solution Overview

This solution uses conditional blocks to show prompts. The tabs themselves are still created using HTML and JavaScript. The advantage to using conditional blocks is that the query engine understands that the prompts on

hidden blocks are not visible and therefore these queries are not required and will not be executed. If the user changes tabs, the prompts become visible and the associated queries are only then processed to populate the new prompt tab. The disadvantage is that we require server side processing to change tabs.



The prompt page to accomplish this technique uses conditional blocks to determine which prompts to show. To visualize a conditional block, think of a series of overlapping rectangles only one of which will be shown at a time.

Unlike the blocks, only one of which is visible at any time, all of the tabs are always visible. The borders of the ‘current’ tab and the text color are set

black to make it appear to be in front of the other tabs. The non-current tabs use grey to make them less prominent.

At one level the report authoring is reasonable straight forward. We will create a conditional block with as many blocks as tabs – 4 in this case. We will create the basic tab structure (the rectangles) as cells in a table setting the border as required. The text that appears in the tabs is created as HTML items with some simple JavaScript.

When a user clicks on a tab (actually, on the text in the tab), the associated conditional block is displayed and the tab border and text color are changed

and the associated block is displayed.

Behind the scenes, a parameter value is set to identify which tab is to be

displayed and the report is re-prompted. Ideally, we would use a prompt control or prompt button to set the parameter value and re-prompt. But, there is neither a prompt control nor button that meets the requirements. A

prompt can both set the parameter value and re-prompt (via auto-submit) but cannot look like a piece of text.

1.3 Applicability

The technique should work with any release of ReportNet or IBM Cognos 8.



1.4 Undocumented and Unsupported Capabilities Used

As discussed in detail below, this solution requires the use of two undocumented and unsupported capabilities in IBM Cognos 8. Therefore, there is a risk associated with this solution in the support for these two capabilities may change or be dropped entirely in some future release requiring rework of this technique. However, the risk of such a change is low as none are planned for these areas at this time.

2 Tabbed Prompt Report Workshop

In our scenario, the first tab will allow the user to select an Order year(s) and

the second tab will allow the user to select a Product name(s) to run a very simple list report.

We will walk through creating a sample report from beginning to end. To keep things simple, we will use only two tabs with one prompt each.

Create the Basic Report

Open Report Studio with the GO Sales and Retailers package, and create a

new list report using the following items:

� \Orders\Order year

� \Orders\Product name

� \Orders\Revenue

As so1:

Create two optional detail filters:

� [Order year] in ?p_OrderYear?

� [Product name] in ?p_ProductName?

This is the completed basic report which we will use to demo this technique.

1 You may see minor differences in colours, fonts and styles between IBM Cognos ReportNet

and IBM Cognos 8.



2.1 Create the Basic Prompt Page

While the steps to create the tabbed prompt user interface are not difficult, they are long. Most of our time will be spent on formatting while implementing the actual functionality takes relatively little time.

The first thing that we need a prompt page so add a new prompt page to the report:

Drop a 1 row by 2 column table onto the prompt page body as so:

We’re going to ignore the table for a while but we will come back to it for a

later portion of this exercise.

2.2 Create the Tab Body

The conditional blocks will eventually hold the prompts that appear on each tab.



We will start by creating the basic tab body structure and using some text items to allow us to see which tab is current at a given time.

Drop a Conditional Block2 object onto the page body:

Select the conditional block object and edit the Block Variable property to create a <New String Variable> as so:

� Name: TabToShow

� Values: Tab2

� Expression: ParamValue('pTabToShow')

The name of the Variable TabToShow, the value Tab2 and the parameter

pTabToShow are critical as we will refer to them several times later in this workshop.

With the block selected, set the Current Block property to Other.

Drop a text item ‘Tab 1’ into the block as so:

This text will serve to remind us which tab we are currently viewing.

2 In ReportNet 1.x, this object has the name Conditional Block List. It is the same object with

a different name.



Select the block and set the Current Block property to Tab2. The text item will seem to disappear from the block.

Drop a text item ‘Tab 2’ into the block as so:

Again, this text will serve to remind us which tab we are currently viewing.

By selecting the block and alternating the Current Block property value between Other and Tab2, you should be able to switch tabs in Report Studio.

2.3 Create the Tabs

As I said previously, we will use HTML items with some undocumented and

unsupported techniques to make the tabs work.

The first thing we will do is to take advantage of how the Report Viewer

communicates parameter values to the server. Parameter values are passed as form variables3 with the name being the parameter name, such as pTabToShow, prefixed with p_ to produce p_pTabToShow.

This parameter passing mechanism is undocumented and unsupported. Please see the provisos at the beginning of this document.

We will use an HTML object to create this form variable.

3 Or on a URL but we can’t use that approach here



Drop an HTML item into the Page Header as so:

The location of this item is not critical as it will not appear to the user. For easy identification of HTML items on the report you can use the description field to provide information on the contents of the HTML object. The description will show up when in the page layout in Report Studio within the

HTML object as .

Select the HTML item and set the HTML property to:

<input type="hidden" name="p_pTabToShow" value="Tab1"/>

This is small bit of HTML creates a form variable called p_pTabToShow and sets the value to Tab1. This form variable will cause the server to think that a

parameter called pTabToShow has been defined in the report. The value of this input field will be preserved and passed back to the Report Viewer when the report is reprompted.

Now we will return to the table we added earlier in this workshop.

While it does not appear as such now, the two cells in this table will become the tabs for users to click on.

The text items that appear on the tabs will be HTML items.



Drop an HTML item in the each table cell and center them in the cells:

Select the left HTML item and set the HTML property to:

<button title="Show Tab 1"

onclick="document.formWarpRequest.elements['p_pTabToShow'].value='

Tab1';SetPromptControl('reprompt')">Show Tab 1</button>

This HTML creates a button with JavaScript actions as so:

� Button title (tooltip text) – Show Tab 1

� Actions

o set the form variable called 'p_pTabToShow to Tab1

o Run the function ‘reprompt’

� Button label – Show Tab 1

In other words, when the user presses this button it will set the form variable and then reprompt the report.

Note that the reprompt function is undocumented and unsupported. Please see the provisos at the beginning of this document.

Select the right HTML item and set the HTML property to:



Tab2';SetPromptControl('reprompt')">Show Tab 2</button>

Run the report4:

4 The appearance of the buttons may change between browsers and releases.



By clicking the buttons you can switch between ‘tabs’. The text items that we added to the conditional blocks will show which tab we are on.

Believe it or not, the tab functionality is now complete. All that remains to be done is cosmetics. In other words, the user interface may be working but it certainly does not look like a tabbed user interface. We also still need to place

our prompt controls onto the tabs themselves.

Return to Report Studio for the next section.

2.4 Style the Tabs

We will use borders, alignment and other styling to change the appearance of the HTML buttons and block to look like tabs.

First, we will deal with the HTML buttons.

Select the parent table and in the Table Properties property, select Fixed Size.

With the table still selected, select the Size and Overflow property and delete the current width setting. This will reset the table width to fit the contents

rather than spanning the width of the page.

Select each table cell and set the widths to 100 pixel (px) each.

In your real report, you will need to vary the width to match the text you

insert in each tab. Remember that stylistically all tabs are usually the same width and varying widths may look slightly odd.

We now have the table cells and HTML buttons appearing a bit more tab-like as so:

Now, we need to re-style the HTML buttons so they show only the text.



Select one of the HTML objects and you’ll see there are no options to style them:

Since there are no style options we will need a technique to format the result

of the HTML code.

We can define styles in our report and apply them to report objects. Can we

also apply them to HTML objects? We can but only in IBM Cognos 8.

2.4.1 IBM Cognos 8 Button Styling

In IBM Cognos 8 we can define a class and then reference this class in the HTML button definition.

Using the Page Explorer, open Classes.

Drop a Class object from the toolbox into the Local Classes area.

Select the new class object and set the properties as so:

� Label: HTMLButtons

� Border: None

� Box Type: Block

� Background Color: White

� Selector: HB

Return to the prompt page.

The Class property is the identifier we will use when we apply a style to the HTML items.



Select the left HTML object and change the HTML property to:



Tab1';SetPromptControl('reprompt')" class="HB">Show Tab 1</button>

Select the right HTML object and change the HTML property to:



Tab2';SetPromptControl('reprompt')" class="HB">Show Tab 2</button>

2.4.2 ReportNet Button Styling

This approach can be used in either ReportNet or IBM Cognos 8.

We will apply the style in the HTML button definition directly using individual

style properties.

Select the left HTML object and change the HTML property to:



Tab1';SetPromptControl('reprompt')" style="border-top-

style:none;border-left-style:none;border-right-style:none;border-

bottom-style:none;display:block;background-color:white">Show Tab

1</button>

Select the right HTML object and change the HTML property to:



Tab2';SetPromptControl('reprompt')" style="border-top-

style:none;border-left-style:none;border-right-style:none;border-

bottom-style:none;display:block;background-color:white">Show Tab

2</button>

2.5 Run the report

Run the report. The button-like appearance of the buttons has been removed

to leave only the text.

2.6 Show Active and Inactive Tabs

We now need to style the tabs to show which is active. The active tab will

have black borders and text. The inactive tab will have grey borders and text.

Select the left table cell.

Set the Style Variable to TabToShow.



Using the Conditional Explorer, select TabToShow to Other:

Set the Border to Black, Solid Line, 1.5 point (pt) on the Left, Top and Right sides:

Using the Variable Explorer, select TabToShow to Tab2:

Set the Border to Silver, Solid line, 1.5 point (pt) on the Left, Top and Right sides:



Run the report:

Click on Show Tab 2 so that Tab 1 becomes ‘not current’:

We will perform a similar set of steps for Tab 2 (the right table cell).

Return to Report Studio.

Select the right table cell.

Set the Style Variable to TabToShow.

Using the Conditional Explorer, select TabToShow to Other:

Set the Border to Silver, Solid line, 1.5 point (pt) on the Left, Top and Right

sides:

Using the Variable Explorer, select TabToShow to Tab2:



Set the Border to Black, Solid Line, 1.5 point (pt) on the Left, Top and Right sides:

Run the report:

Click on Show Tab 2:

That does not look quite right. The left border for the second tab is grey but we set it to black. Well, actually the border between the two table cells has been set to both grey and black. Each table call actually has its own borders but they are currently collapsed.

That is, rather than seeing the borders side-by-side as so:

The borders are overlapped. When the borders overlap, there are rules to determine which border gets displayed. In this case, the left cell border appears.

What we need to do it to adjust the borders so that the left table cell has no border when the right cell is active.


Select the left table cell.

Using the Conditional Explorer, select TabToShow to Tab2:



Remove the border from the right hand side of the cell by applying the None style:

Run the report:

Click on Tab 2:

This is now exactly the tab border that we want to see for highlighting the active tab.

2.7 Format the Tab Body

Now we need to tie the tabs and tab body together.


Using the Conditional Explorer, select No variable:



Select the Block:

Set the Border to Black, Solid, 1.5 point (pt) on all 4 sides:

With the Block still selected, set the Current Block property to Tab2.

Set the borders the same Black, Solid, 1.5 point (pt) on all 4 sides:

Run the report:

We now have our tabs operating.

Next we would like to do some more formatting.

First, we would like to move the tabs down the page and make them narrower.

Return to Report Studio for the next section.



2.8 Format the Page and Add Text

Select the Page Body object and set the Padding to 100 pixels (px) on the left, top and right.

This will provide a 100 pixel buffer on all sides of the tabs.

Finally, we will provide some instructional text and actually put the prompts

into the tabs.

Edit the title text to say ‘Revenue Report’:

Drop a block in as the last item in the page header:

Drop a text object into the block and use the following message ‘You may switch tabs to choose a different prompt.’:

Select the conditional block and set the Current Block property to Other.

We want the primary prompt (on tab 1) to be for Order year.

Drop a Value Prompt object into the block:

� Use the existing parameter: p_OrderYear

� Create a new query with Order year (should be the default)



Select the prompt and set the Required property to No.

Select the conditional block again and set the Current Block property to Tab2.

We want the secondary prompt (on tab 2) to be for Product name.

Drop a Value Prompt object into the block:

� Use the existing parameter: p_ProductName

� Create a new query with Product name (should be the default)

Select the prompt and set the Required property to No.

Run the report.

As the filters are optional, you can select from either prompt, both or neither before clicking the Finish button to execute the list report we created at the very beginning of this exercise.

3 Conclusion

This is a handy technique. While it does use some undocumented and

unsupported capabilities of the product, it also provides high value to end-users.

Of course, you can use this technique as required with more tabs, different prompts, text, etc. to provide the user interface experience which your users prefer.

Date post:	07-Aug-2020
Category:	Documents
Upload:	others
View:	6 times
Download:	0 times

Report Studio Workshop - Tabbed Prompt Report -...

Documents