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.
This document applies to IBM Cognos BI versions 10.2.x and up.
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
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
The following example shows how to use the Display for Orientation property.
- Open the report attached to this article (Financial report.txt) in a text editor such as Notepad or vi and copy its content.
- Open Report Studio against the GO Data Warehouse (analysis) package.
- When Report Studio is running, click on Tools and select Open report from clipboard.
- 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
- 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
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
Let’s look at how this was performed on our sample Active Report.
- 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
- 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.
- 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.
- The text item below the crosstab has been set to Portrait.
- 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
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.
|Code sample||Financial report||133KB|
Dig deeper into Big data and analytics on developerWorks
Get samples, articles, product docs, and community resources to help build, deploy, and manage your cloud apps.
Crazy about Big data and analytics? Sign up for our monthly newsletter and the latest Big data and analytics news.
Software development in the cloud. Register today to create a project.
Evaluate IBM software and solutions, and transform challenges into opportunities.