Creating an Accordion Page for a Mobile Device

Step 1: Sign in to the obiee analytics by providing your your UserId and password.


Step 2: Then in the answers homepage select the mobile application and then select the device on which you want to design the application. And click on next.

mob4select phone




Step 3: Now select the subject area which would be the data source for the application. Then click on save to save the subject area for your app.

select subject area

Step 4: Now in the designer screen you can add a cover page to the app screen then you can swap between the page to make the cover page show on top of the hierarchy.


Step 5: Select the entire page and click on app settings which is present on the upper right corner of the screen. Here you can change the theme of the app by selecting the drop-down under the theme tab.


Step 6: Now you can see that the black theme is applied to the application. This is the accordion page whose background theme has changed.


Step 7: Now you can change the name of your page by double clicking on it. here I have changed the name of my page to the Accordion View.


Step 8: You can also edit the name of the Header, the Title and Subtitle on the cover page by double-clicking on it.


Step 9: On the accordion page, you can edit and add the the data elements from the data source tab to the design area as indicated by the arrows. just drag and drop the data elements on the place provided for dropping the data.



Step 10: On the previous step you can see the rectangular space, under the accordion list, Drag Component Here, the you can add the components by clicking on the ‘+’ icon on the top center.



Step 11: Now in the chart component that I have added in the area, we can add the product type and the Per Name Qtr. We can also change the chart type to pie chart.


Step 12: Now you can add a detail page so as to where the application will navigate if the user taps on any analysis. You can add a subpage by clicking on the new page and then click on the subpage template you want to add. I have added a 2 rows template subpage as the detailed navigation I need to prepare.


Step 13: Change the name of the sub-page that you have added, to Detail.


Step 14: In the detail page add a frame to show the values by product type and revenue. Set the Rows to 1 and columns to 2. And click OK.


Step 15: Now add product type and revenue from the data source pane to the frame.


Step 16: Then in the first cell add a chart component and add the Product type and the Per Name Qtr to the values and labels respectively.


Step 17: Then add a table in the 2nd cell & add columns to it. Here you 1st drag and drop the Columns from the data source to the table and then you can drag the edges to fit it into the table. You can remove the decimal by clicking on the up down arrow button in decimals under data formatting in Formatting tab.









Step 18: As you can see in the above image that the Grand total cell have the same back ground as the all other values. So you can highlight this particular cell to show it more prominently. You can highlight this particular cell by clicking on the cell first and then click on the rectangular box beside the Fill under the Style area in the Formatting tab in the right hand sidebar.


















Step 19: Then finally you can save your application by clicking on the floppy icon on the top left corner of the screen. Then there will be a message showing that your analysis saved as an app.



Step 20: Click on preview to see the application running. This is the first page of the app. i.e the cover page.




Step 21: You can click on the menu icon to go to the navigation tab to see the other pages of the application. Then click on the page Accordion View



Step 22: The image below shows the Accordion view. The accordion page provides an expandable display of a specific data dimension and akey measure (such as Product and Revenue). Add visualizations to the expansion area  that you can view and close easily from a mobile phone.


Step 23: Then you can click on any one of the pie charts to go to the detail subpage. This completes your application for the test purpose of an accordion page. Now you can publish it in the local or remote machine’s app library to use it in your own mobile device.



Leave A Reply

Your email address will not be published. Required fields are marked *