What is Mobile Page Layout?
The Mobile Page Layout has been implemented mainly for supporting all layout scenarios of Webi Reports, as per the Report Element arrangements, defined on BI Launch-Pad. This layout model helps user to design the Webi Reports with minimal design work, and user does not need to strain to place the report element in exact pixels or to align the report elements with accurate coordinate details.
In this approach, the report elements are arranged and resized for the improved space efficiency and aesthetics, which work best when the report is displayed on tablet or a mobile device. The report page is cut up in to multiple columns and as per the coordinates the report elements will be grouped on the specific column. The report elements of a particular column will share space according to the proportion of actual size of the Report elements.
It is recommended to use Mobile Page Layout, rather than Card Layout, as the Mobile Page Layout covers all the layout scenarios of a Webi Document, such as pagination, space efficiency, report element spanning.
A Report Page cut up into multiple columns:-
The number of columns, created on the page, will be equivalent to the maximum number of report elements, which are located horizontally, without horizontal overlap with other report elements. In the below specified diagrams, it is explained with some examples.
| Arrangement in Webi | Number of Columns | Detail | |
|---|---|---|---|
| 1 |  |  | In this layout, at maximum there are three reports elements, placed horizontally. The report elements are 1, 2 and 3. The Report element 2 comes to 2nd Column, because right side of Report element 1 ends before the left side report element 2. |
| 2 |  |  | In this layout, at maximum there are around 5 report elements, placed horizontally. The report elements are 1, 2, 5, 6 and 7. |
| 3 |  |  | In this Layout, the report element 2 remain on the first column itself, as it is overlapped with report element 1, and will be rendered one below the other. |
Following statement will be easy to perceive, with the understanding of above examples.
In technical terms, a report element (2) will be placed in to a new column (on the right side), when at least one of its left side report element’s (1, 4, 😎 right side boundary ends before the report element’s (2) left side boundary.
Why do we have column-based layout in Mobile Page Layout Model?
For aligning report elements boundary to a nearest vertical or horizontal line, the layout needs to follow either a column based rendering or a row based rendering. The main reason for following column based rendering in this layout model is to have space efficiency under a Vertical Table which may grow or shrink vertically, based on the number of rows, when filters are applied.
Pagination of Mobile Page Layout:-
The Pagination of a Webi Report in mobile device will be done as per the Page Format setup of the report, defined in BI Launch Pad. The default Webi Page Format is A4 size with Portrait orientation. When the page format is configured for other page size and orientation, the pagination with respective size is done in the mobile device screen as well.
| Page Format | On BI Launch Pad | On Mobile Device |
|---|---|---|
| A4_Portrait on BILaunchpad |  |  |
| A4_Landscape on BILaunchpad |  |  |
As shown in the snapshot, the arrangements of A4-Portrait of Webi Page in BI Launchpad will be same for both Portrait and Landscape orientation of Mobile WebI Page, i.e. when the orientation of mobile device screen is changed, the report elements will be just stretched to different dimension, and will not be moved to other page.
A Report element will not be spread across multiple pages:-
In BI Launchpad, a Report element can be bigger than a Page size, hence it will spread across multiple page as show in the following snapshot.
But when the same report is rendered on Mobile Device screen, the Report elements will not be split or spread across multiple Pages. Instead a report element will be clipped with the page, where its origin resides. For instance, in the above example, the Pie Chart is spread on Page1 and Page2. But in the Mobile Device, the Pie chart will be displayed on Page1. And the vertical table in BI Launchpad is originated on Page1 and spread on Page2, Page3 and Page4. In the Mobile Device the table will be clipped and displayed inside Page1. Hence the report will be displayed in Mobile Device as per the below specified snapshot.
This webi report in Mobile Device has single page (only Page1) and the other pages (Page2, Page3, Page4) are not listed, as there is no report element, with its origin, on those pages.
Dimension of a Report element on Mobile Device:-
Along with the space optimization on Mobile Device, Mobile Page Layout decides dimension of each Report element, based on the size proportion of a Report element against the size of a Report elements available on the particular page. For instance, the below Webi Report Page has Report elements with various different dimension and unaligned origins.
When the same Report Page is rendered on Mobile Device, Based on the origin and dimension, each Report element will be aligned into a column, and the report element will be rendered one below the other inside the column.
The above Report Page will be displayed in Mobile device as per below snapshot. There are 2 columns, one column covers RP1 and RP2. And the other column covers RP3, RP4 and RP5. Here each column will get width based on the proportion of that column with all other columns.
Column width:-
On the first column, there are Report elements with maximum width as 2 inches (Width of RP1 or RP2). On the second column there are Report elements with maximum width as 3 inches (width of RP3). Here the width proportion of the columns is 2”:3”. When it is rendered on Mobile Device which has around 750 pixel width, as per the proportion, the first column will get 300px and the 2nd column will get 450px.
Report element height:-
On the first column, there are 2 Report elements, one of which(RP1) has 3 inch height and other Report element(RP2) has 1 inch height. Here the height proportion is 3”:1”. When these report elements rendered on Mobile device, as per the proportion, RP1 will get 675px height and RP2 will get 225px height.
On the Second Column, there are Report elements (RP3, RP4, RP5) with equal height of 2 inches. Here the height proportion of the report elements is 2”:2”:2”. Hence on the mobile device, each Report elements on the Column2 are rendered with equal height of 300px.
Report elements of a Column will have equal width:-
The report elements of a particular column will have same width, which will be equal to the width of the column.
Space between Report elements:-
Each Report elements and columns are rendered with 10px gap, on all of the sides. Even when there is more gap or no gap between report elements on BI Launchpad, there will be always a constant 10 px gap between report elements, when it is rendered on Mobile Device.
Report elements can be spanned across multiple columns:-
A report element can be designed for spanning across multiple columns. For instance in the following Webi report page, the Line Chart is spread on both Column 1 and Column2.
The above webi report page will be rendered on Mobile Device as per the snapshot given below.
Tables on Mobile Page Layout :
Tables on webi report may grow and shrink vertically, based on the applied filter values. On the mobile device, whenever a Table shrinks on its height, the Report element, which resides under the table will occupy the space. If the below report element is another table and it is not spanned across multiple columns, then it will be moved up to occupy the space created by the shrunken table.
When a Table grows on its height, it can grow up to the allotted height, which is derived from the proportion with other report elements on the same column.
When the table content needs more height than the allotted size, then the Table will be vertically scrollable, within the allotted height. And when there is more number of columns, which could not be accommodated on the given width (column’s width), then the table will be horizontally scrollable, within the allotted height.
| On BI Launchpad | On Mobile Device |
|---|---|
 |  |
Based on the filter the Table has shrunk and have just 4 rows
| Table has shrunk, and the gap is filled with Bar chart
|
Horizontal Alignment of report elements across columns: -
The horizontal alignment of report elements across columns is achieved by keeping size proportion of the report elements equally on those columns. For instance, the following Webi Report page has 3 columns, and on each column report element height proportion is equal across the column.
On the first column, the report element size proportion is 1.5”:2”:3”, likewise on the 2nd column also the size proportion as 1.5”:2”:3”. So RP2 and RP5 are horizontally aligned, as RP1 and RP4 heights on Mobile device are equal. And RP3 and RP6 are horizontally aligned, as RP1 + RP2 and RP4 + RP5 heights on Mobile device are equal.
On the third column, the report element size proportion is 3.5”:3”. Based on this proportion, the sum of height of RP4 and RP5 will be equal to height of RP7. So RP8 will be horizontally aligned with RP3 and RP6.
As the horizontal alignment of report elements are decided based on the height proportion, it is not necessary to keep the report elements exactly aligned origin on BI Launchpad.
Hence the above webi report will be rendered on Mobile device as per the below snapshot. Horizontal Alignment could not be achieved or will not consistent for the report elements, which comes below a Table, because when the table shrinks the report will be moved up automatically for space optimization, so alignment with other column report element will be disturbed. So it is suggested to use Charts or spanned Table, above the report elements, which need to be aligned horizontally.
Horizontal Alignment when there are Tables in the WebI Report:-
When a table comes above to another Report element, due to the variable height of the table according to the number of rows, the other report element will keep on moving up and down. In such scenario, horizontal alignment across multiple columns can not maintained consistently.
In the above example report, the Pie Chart and the Line Chart is not horizontally aligned. In this scenario, we can follow following steps to arrange the report elements in horizontal alignment.
- Make sure the table height is constant(for example, the number of rows of the table, or the content of the table should not be varied while applying different filter values)
- Now the need is to slightly bring up the divider(between the bar chart and the line chart) in the second column.
- This can be achieved either by reducing the bar chart height or by increasing the line chart height.
- With some trials, we can achieve the horizontal alignment.
Sections on Mobile Page Layout:-
When a Webi Report, which has sections, is displayed on Mobile Device, at a time a single section’s report elements only rendered. User can navigate to different section by selecting an item from the left side section navigation panel. For instance, the below webi report has 3 Charts are each section and it has one non-section report element(Vertical Table), above to the sections.
When the above webi report is opened on Mobile Device, initially the non-section report element will be displayed and no sections will be displayed. If there is no non-section report element, then initially the first section (2004) will be displayed. Then user can navigate to next section (2005), then the previous section will be cleared and the page will be rendered with the non-section report element (Vertical Table) and new section content (2005), as specified in the below snapshot.
Free cell on Mobile Page Layout: -
Like other Report elements, Free cell follows all above-mentioned logics like size proportion, Spanning across columns and horizontal alignments. In addition to that the free cell can be used for creating empty space on the Mobile Device Report page, by keeping blank cell without any text.
- SAP Managed Tags:
3 Comments
