IBM BluemixDevelop in the cloud at the click of a button!

IBM Business Analytics Proven Practices: Portrait Aware Mobile Reports Using IBM Cognos Active Report

Product(s): IBM Cognos Report Studio, IBM Cognos Mobile; Area of Interest: Reporting

You can optimize your reports to run in either landscape or portrait orientation on a supported mobile device. Use these tips to ensure that your reports appear as intended.

Share:

Business Analytics Proven Practices Team, Business Analytics Proven Practices Team, IBM

Business Analytics Proven Practices Team



05 March 2014

Also available in Russian Spanish

Introduction

Purpose of Document

You can optimize your reports to run in either landscape or portrait orientation on a supported mobile device. Use these tips to ensure that your reports appear as intended.

Applicability

This document applies to IBM Cognos BI versions 10.2.x and up.

Assumptions

This document assumes that the reader has good knowledge of Cognos Report Studio, Active Reports and Cognos Mobile. This document provides examples that make use of the sample database GO Data Warehouse and it is assumed that the reader has installed and deployed the Cognos Samples.


Use percentage values to set size and overflow

Percentage settings adapt to the screen for landscape or portrait orientation on a mobile device. The report changes automatically when rotating a mobile device between landscape and portrait views. The Size & Overflow dialog (Figure 1) allows you to use percentages to set the width and height as well as settings to determine if the content should be clipped or scrollbars used in the event the content is too large for the screen.

Figure 1 – Report Studios block properties box showing the Size & Overflow set to percentages
Figure 1 – Report Studios block properties box showing the Size & Overflow set to percentages

Adding a percentage defined report object to a block or table cell can also help adjust percentage for the object in Active Report. For example,

  • Add a block or table cell and set the Size and Overflow property to a width of 100% and a height of 40%.
  • Insert a report object such as a crosstab or text item into the block or table cell and set the Size and Overflow property to a width of 90% and a height of 100%.

The size and overflow setting of the report object is relative to the parent container. In this example, the report object would have a page width of 90% (90% of 100%) and a page height of 40% (100% of 40%).


Make fixed-sized report objects portrait aware

Sizes in objects such as charts, sliders, and button bars, that cannot be defined as a percentage can be made portrait-aware. Use the Display for Orientation property (Figure 2) in order to make a fixed-sized object portrait or landscape aware.

Figure 2 – Block properties showing Display for Orientation set to Portrait
Figure 2 – Block properties showing Display for Orientation set to Portrait

The following example shows how to use the Display for Orientation property.

  1. Open the report attached to this article (Financial report.txt) in a text editor such as Notepad or vi and copy its content.
  2. Open Report Studio against the GO Data Warehouse (analysis) package.
  3. When Report Studio is running, click on Tools and select Open report from clipboard.
  4. Within the Active Report, in the top centre of the page, click on the Current Card drop down list and select the Balance Sheet card.
    Figure 3 – Active report card drop down selection showing all available cards with the Balance Sheet card selected
    Figure 3 – Active report card drop down selection showing all available cards with the Balance Sheet card selected
  5. Scroll to the bottom of the Active Report and there will appear to be two identical combination charts. However, upon further examination the top chart’s Display for Orientation property is set to Landscape with Margin and Size set to a particular value. The bottom chart’s Display for Orientation property is set to Portrait with Padding and Size set to a different value. (Hint: To easily test and compare how objects will appear with different size and display properties, use copy and paste functionality to create the object on the same page and then redefine the size and display properties.)

If an object is shifting from its position when swiping on a mobile device, it may be better to create two objects and use the steps described later in this section.

Reports can be created whose information changes as the mobile device switches from landscape to portrait. This is done by using the Display for Orientation property on objects. When this property is set, the object will only show in the report at that set orientation. By defining the object twice in Active Report, you can assign the different position sizes for these views. The mobile device displays the correct orientation automatically.

In Figure 4 the landscape view contains a crosstab and two charts that show the differences of Gross Revenue and Expenses between year 2011 and year 2010.

Figure 4 – Landscape version of the report
Figure 4 – Landscape version of the report

In Figure 5, the portrait view adds complementary information to the report by using the crosstab, a single chart and adding text to give more information about income.

Figure 5 – Portrait version of the report
Figure 5 – Portrait version of the report

Let’s look at how this was performed on our sample Active Report.

  1. Within the Active Report, in the top centre of the page, click on the Current Card drop down list and select the Income Statement card.
    Figure 6 - Active report card drop down selection showing all available cards with the Income Statement card selected
    Figure 6 - Active report card drop down selection showing all available cards with the Income Statement card selected
  2. At the top of the report, there are two header bars at the top. Both are identical in content but the top one has been set to landscape and the bottom one to portrait. Both have different size properties set.
  3. The crosstab in the middle of the screen has the Display for Orientation property set to Both to show in both modes. Look at the Size and Overflow property. The width has been set to 92% of the block object that it is in and the height has been set to a fixed size of 150px so it never changes.
  4. The text item below the crosstab has been set to Portrait.
  5. Scroll down and you will see three charts (shown in Figure 7). The top chart is contained in a block object in which the Display for Orientation property has been set to Portrait. The bottom two charts are in a block object in which the Display of Orientation property has been set to Landscape.
    Figure 7 – Active report showing three charts that will be displayed depending on display orientation
    Figure 7 – Active report showing three charts that will be displayed depending on display orientation

In this example, we duplicate items to fit and move items on the screen for different orientation views. Be aware that when duplicating items, you will be storing the data in the Active Report for each item. If you duplicate a chart or deck that holds a lot of data it could significantly increase the size of the report.


Things to avoid

Here are a few points to watch out for when creating an Active Report.

  • Avoid setting percentage sizes greater than 100% as there could be unexpected results in browsers.
  • Avoid setting margins as this might cause unexpected shifting and items to appear outside their container. Use padding instead to get your results.
  • Setting the page to a fixed size should be avoided so the report will adapt to any screen size.

Download

DescriptionNameSize
Code sampleFinancial report133KB

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into Big data and analytics on developerWorks


  • Bluemix Developers Community

    Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.

  • Big data and analytics

    Crazy about Big data and analytics? Sign up for our monthly newsletter and the latest Big data and analytics news.

  • DevOps Services

    Software development in the cloud. Register today to create a project.

  • IBM evaluation software

    Evaluate IBM software and solutions, and transform challenges into opportunities.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=Big data and analytics
ArticleID=964860
ArticleTitle=IBM Business Analytics Proven Practices: Portrait Aware Mobile Reports Using IBM Cognos Active Report
publish-date=03052014