Creating Mobile Apps with Oracle BI Mobile App Designer

Overview

    Purpose

    This tutorial covers the basic features of the Oracle BI Mobile App Designer, introduced in Release 11.1.1.7.1+ of Oracle Business Intelligence Enterprise Edition (Oracle BI EE).

    Time to Complete

    Approximately 45 minutes

    Introduction

    Oracle BI Mobile App Designer enables you to design purposeful apps for mobile phones and tablets from one of the following data sources:

    • BI Subject Area
    • BI Publisher Data Model
    • Excel Spreadsheet

    Hardware and Software Requirements

    The following is a list of hardware and software requirements:

    • Oracle BI EE 11.1.1.7.1 with 2 patches. See installation instructions in the Installation Guide.
    • The default Sample App Lite repository should be available
    • Optional: a tablet with a QR code scanner to preview applications on a mobile device

    Prerequisites

    None

Creating Basic Mobile Apps

    In this topic, you create a mobile app for tablet devices, based on the information in the Sample App Lite subject area in Oracle BI EE. To create a basic mobile app, you must sign in to Oracle BI EE and open the Mobile App Designer. You can explore the designer interface, modify the cover page, and add pages and content to your app. When you're done, you can preview your app on a PC or mobile device.

    Starting the Oracle BI Mobile App Designer

      Open a web browser and enter the URL for your instance of Oracle BI EE. Note: The default URL is http://<servername>:7001/analytics, but your URL may vary).

      The Oracle Business Intelligence Sign In page is displayed.

      Enter the user name and password of a user with BI Author privileges or higher, and then click Sign In.

      Click Home to display the default Oracle Business Intelligence home page.

      In the left navigation pane, under Create, click Mobile App to start the Mobile App Designer.

      The Create App dialog box is displayed. Under "Choose Target Device Type," select Tablet.

      On the next page, select the data source:

      1. Under "Choose a data source for your App," select BI Subject Area.
      2. In the Subject Area drop-down list, select Sample Sales Lite.

      Click Save to open the Save As dialog box.

      Save the app as OBE_Demo in My Folders, and then click OK.

      The Mobile App Designer is displayed.

    Exploring the Mobile App Designer Interface

      Notice that the data source elements are listed in the navigation pane on the left side of the designer. You can drag and drop columns from the data source to the workspace to build the elements of your application.

      Notice that the pages of the presentation are displayed in a sidebar, similar to presentation programs such as Power Point or Keynote. By default, a new app contains only a cover page.

      Notice the tools ribbon at the top of the designer. This ribbon displays tabs that relate to your current selection. By default, the Insert and App tabs are displayed in the ribbon.

      Try the following actions:

      1. Click on the default image in the center of the designer to display the Image tab.
      2. In the pages sidebar, click the Cover Page page tile to display the Page Layout tab.

    Modifying the Cover Page

      As the first step to building your first app, you want to customize your cover page. Note: You are not required to have a cover page for your app.

      Optional: replace the default photo on the cover page with a custom photo:

      1. Double-click the image to open the Update Image dialog box.
      2. Select a location for the new image. You can specify a file from a local directory, a URL to an image file, or a data field from your data source for the image. The following example shows a file selected from a local directory. Click Browse to select an image from the local directory.
      3. Click Insert to update the image on the cover page.

      Note: You can resize the image after inserting it. For more information, see the User's Guide for Oracle Business Intelligence Mobile App Designer.

      Scroll to the bottom of the cover page to display the title text boxes. Double-click "Double Click to add title" and enter Sample App.

      You do not need a subtitle for this cover page. Remove the subtitle:

      1. Select the subtitle text box (with the text "Double Click to add sub title").


      2. On the Text tab, click Delete.

      The subtitle text box is removed from the cover page.

      You want to make the title larger. First, select the title text box. Then, on the Text tab, in the font size drop-down list, select 32pt.

      The title font is displayed in 32pt size. Notice the other formatting options on the Text tab. You can:

      • Change the font and font size
      • Add bold, italic, and underline formatting
      • Add borders to text boxes
      • Change text alignment (both vertical and horizontal)
      • Add date and time stamps
      • Add and remove hyperlinks

    Adding Pages to Your App

      You can add pages to your app using either the provided layout options, or you can insert a blank page and design a custom layout. In the following steps, you add a page with a bar chart that shows revenue by quarter, a pie chart that shows revenue by organization, and a table that shows revenue detail by quarter, product type, and product.

      On the Insert tab, select New Page > 3 Cells.

      A second page is added to the app. Select the first cell.

      In the ribbon, click the Insert tab, and then click Chart.

      Note: You can also drag and drop the chart icon from the ribbon to a cell in the layout pane.

      Specify the subject area columns to define the chart:

      1. From the Sample Sales Lite hierarchy, drag Per Name Qtr (located under Time) to the Label area of the chart.


      2. From the Sample Sales Lite hierarchy, drag Revenue (located under Base Facts) to the Value area of the chart.

      Resize the chart and hide the chart legend:

      1. Drag the resize handle on the lower right corner of the chart to resize the chart to fit the cell.
      2. On the ribbon, click the Chart tab, and then select Legend > No Legend.

      The legend is removed from the chart.

      Next, insert another chart. On the Insert tab, drag and drop the Chart icon to the second cell in the layout grid.

      Specify the subject area columns to define the chart:

      1. From the Sample Sales Lite hierarchy, drag Revenue (located under Base Facts) to the Value area of the chart.
      2. From the Sample Sales Lite hierarchy, drag Organization (located under Offices) to the Label area of the chart.
      3. In the chart, drag Organization from the Label area to the Series area to view the Organization data as a series instead of individual bars.

      On the Chart tab, select Chart Types > Pie > Pie to change the chart display type.

      The following chart types are available:

      • Area
      • Bar (default)
      • Bubble
      • Line
      • Pie
      • Circular
      • 3D Graphs
      • Funnel

      Drag the resize handle to resize the pie chart to fit the cell.

      Next, insert a table. On the Insert tab, drag and drop the Table icon to the third cell in the layout grid.

      Drag the following columns from the data source to the table:

      • Per Name Qtr (located under Sample Sales Lite > Time)
      • Product Type (located under Sample Sales Lite > Products)
      • Product (located under Sample Sales Lite > Products)
      • Revenue (located under Sample Sales Lite > Base Facts)

      Customize the table formatting:

      1. Double-click the column header Per Name Qtr to edit the header. Replace Per Name Qtr with Quarter.
      2. Drag the column edges to resize the table columns.
      3. Select the data in the Revenue column to display the Column tab in the ribbon.
      4. On the Column tab, in the Data Formatting drop-down list, select -1,237.57 (Number).

      In the Pages list, double-click Page 2 to edit the page name. Replace Page 2 with Analysis.

      Notice that when you press Enter, the page header in the layout pane also changes to Analysis.

      Click the Save icon to save your app.

    Previewing Your App

      Click Preview to open a web preview of your app. Note, you can preview in a new Window too.

      Notice that the preview opens to the cover page of a web-based simulation of your tablet app.

      Optional: If you have a QR Code scanner app on your tablet device, preview the app on your tablet instead of on the web.

      1. Click On Mobile.
      2. The QR code for the app preview is displayed. Use a QR code scanner on your tablet device to scan the code. This opens the app preview on your tablet device. Note: If you do not have a QR code scanner app on your tablet, you can copy the app URL (displayed under the QR code) and e-mail it to your mobile device.

      Clicking on an item in the web-based preview is equivalent to tapping the same item when the app is open in a tablet. Because you can also preview your app in a tablet, the instructions for previewing your apps in this tutorial use the verb "tap" instead of "click."

      From the cover page, tap the page list icon to display the list of pages in the app.

      In the page list, tap Analysis.

      The Analysis page is displayed. Notice that the preview displays your two charts and the table you created.

      Investigate the interactive filter and sort capabilities of the app:

      1. In the pie chart, tap the wedge for the Production Org. Notice that the entire page (the table, bar, and pie charts) is filtered by the Subsidiaries Org.



      2. In the bar chart, tap the bar for 2010 Q4 to filter the page further. Notice that your filter selections are displayed at the top of the page, and you can tap the X next to a filter to remove it.
      3. In the table, tap the header for the Revenue column to sort revenue data. Notice that the up arrow in the column header is activated, indicating that data is sorted in ascending order.
      4. Note: To sort in descending order, tap the column header a second time.

      Click Edit Layout to return to the Mobile App Designer.

Designing Apps with Tile Pages

    Tile pages provide a scrollable grid of cells, each containing identical components that are repeated for a specific field in your data. You can use tile pages to provide an instant view of a key measure across a specific dimension. This view not only provides a complete picture within each cell, but also enables an at-a-glance comparison across the data set. You can further enhance the visual impact of the values represented in each cell by creating stoplight formatting to highlight cells whose results fall outside the range of specific threshold values.

    In this topic, you learn how to create the following tile page, which shows a line chart of revenue over time, repeated for each product type. Spotlight formatting is enabled, which lets you instantly see which product types fall outside a specific range, when compared to target revenue.

    Inserting Tile Pages

      In the designer for your OBE_Demo app, click the Insert tab, and then select New Page > Tile.

      The Tile dialog box is displayed. In the group drop-down list, select Product Type, and then click OK.

      The tile page is displayed. On the Tile tab, notice the Columns tool, which enables you to specify how many columns of tiles to display. The default is 3 columns.

      Click the Insert tab, and then drag the Frame icon to the layout cell on the tile page.

      The "Insert Frame" dialog box is displayed. Specify 2 rows and 1 column, and then click OK.

      Add data columns to the layout grid cells:

      1. From the Data Source pane, drag Product Type (located under Sample Sales Lite > Products) to the first row.
      2. From the Data Source pane, drag Revenue (located under Sample Sales Lite > Base Facts) to the second row.

      Click the Insert tab, and then drag the Chart icon to the tile page layout cell, below the layout grid.

      The chart is inserted into the tile page. Drag columns from the Data Source panel to define the chart:

      • Chart label: Per Name Month (located under Sample Sales Lite > Time)
      • Chart value: Revenue (located under Sample Sales Lite > Base Facts)

      Format the chart:

      1. Drag the chart resize handle to make the chart shorter and fit the width of the chart to the cell.


      2. On the Chart tab, select Legend > No Legend.

      Format the revenue data displayed in the layout grid:

      1. In the layout grid, select the Revenue cell.


      2. On the Data Field tab, in the Data Formatting drop-down, select ($1,234.57) (Currency).


      3. On the Data Field tab, in the Font size drop-down, select 20pt.

      At the top of the page, double-click Page 3 to edit the page name. Enter Product Revenue to replace Page 3.

      Preview your tile page:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Product Revenue page.


      4. The Product Revenue page is displayed. Notice that your custom numeric formatting and font size were applied to the revenue data.

    Formatting Tile Pages

      Click Edit Layout to return to the Mobile App Designer, then in the pages list, select the Product Revenue page.

      Select the tile layout cell to display the Tile tab in the ribbon.

      Add Stoplight formatting to your tiles:

      1. On the Tile tab, click the Stoplight icon.


      2. The Stoplight dialog box is displayed. Verify that Enabled is checked.


      3. Under Select Stoplight Comparison Type, select Growth %.


      4. Under Select Measures, make the following selections:
        • Base Measure: Revenue
        • Base Formula: Summation
        • Target: Measure
        • Target Measure: Target Revenue
        • Target Formula: Summation
      5. Under Set Threshold Values, enter the following values:
        • Less Than: 10
        • Greater Than: 15


      6. Click OK to apply Stoplight formatting. Note: Stoplight formatting is not displayed in the designer.

      With Stoplight formatting enabled, you want to change the color scheme of the bars in the chart to white, to provide a better contrast against the Stoplight background.

      1. In the layout cell, select the chart.


      2. Under the Data Source hierarchy, expand the Properties list.


      3. Expand Chart Plot Area.


      4. Click the cell next to Series 1 Color.


      5. The Color Picker dialog is displayed. Select the white color tile, and then click OK.


      6. Notice that the chart bars are changed from blue to white.

      Finally, instead of bars, change the chart to a display a line. On the Chart tab, select Chart Types > Line > Vertical Line.

      The bar chart is changed to a line chart.

      Preview the Product Revenue tile page:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Product Revenue page.


      4. The Product Revenue page is displayed. Notice that the Stoplight formatting, series color change, and chart type change were applied.

    Creating Subpages for Additional Detail

      A subpage presents detail information of the main page to which it is associated. Typically you navigate to a subpage by tapping a data item on its main page (such as a repeating grid cell, or a chart value). The data presented on the subpage is automatically filtered based on the item you tapped on the main page. The subpage does not display in the app table of contents. When swiping sequentially through the pages of the app, the subpage displays with no filters applied.

      These steps show you how to add the following subpage for the Product Revenue tile page. The detail page displays the Product Type name, a chart of revenue by product, and a detailed table with monthly product revenue and target revenue by office.

      Note: A main page can have multiple subpages beneath it; however, only one level of hierarchy is supported; you cannot add a subpage to another subpage.

      Click Edit Layout to return to the Mobile App Designer, then in the pages list, select the Product Revenue page.

      Click the Insert tab, then select New Page > Subpage > 3 Cells.

      Notice that Page 4 is added as a subpage of Product Revenue. Note: You can promote subpages to main pages and demote main pages to subpages by clicking the promote or demote icons in the pages list.

      Double-click Page 4 to enter edit mode, then enter Detail to replace Page 4.

      Display the Product Type name in the first cell of the layout grid:

      1. From the Data Source list, drag the Product Type column (located under Sample Sales Lite > Products) to the first layout cell.


      2. On the Data Field tab, under Font, select 24pt.

      Next, add the chart. Click the Insert tab, then drag the Chart icon to the first layout cell, under Product Type.

      Drag columns from the data source to the chart:

      • Value: Revenue (located under Sample Sales Lite > Base Facts)
      • Label: Product (located under Sample Sales Lite > Products)

      On the Chart tab, select Legend > No Legend to hide the chart legend. Adjust the chart size.

      Click the Insert tab, then drag the Table icon to the bottom cell in the layout grid.

      Drag the following columns from the Data Source panel to the table:

      • Per Name Month (located under Sample Sales Lite > Time)
      • Product (located under Sample Sales Lite > Products)
      • Office (located under Sample Sales Lite > Offices)
      • Revenue (located under Sample Sales Lite > Base Facts)
      • Target Revenue (located under Sample Sales Lite > Base Facts)

      Preview the Detail subpage from the Product Revenue tile page:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Product Revenue page.


      4. Tap the Cell Phones tile to view the Detail subpage for Cell Phones.


      5. The Detail subpage is displayed for cell phone data. Notice the page is automatically filtered by the tile you tapped on the main page.
      6. Optional: In the chart, tap the bar for CompCell Rx3 to filter the table.
      7. Tap the Back button to return to the main Product Revenue page. You can review detail pages for other product types by tapping on other tiles on the main page.

      Click Edit Layout to return to the Mobile App Designer.

Creating Navigation Lists for Investigating Data

    Navigation pages enable you to define a navigable set of filters that you can use to filter the data visualized on the page. The navigation area of the page contains a hierarchy of dimensions that you tap through to drive the display on the detail side of the page; you can see successively more refined sets of data, or navigate up and down the hierarchical filters to see the subset of data that interests you.

    In this topic, you learn how to create the following navigation page, which enables you to navigate from a yearly revenue summary, to revenue for lines of business, and then to revenue for individual offices.

    Inserting Navigation Pages

      On the Insert tab, select New Page > Navigation.

      The Navigation List dialog box is displayed. In the drop-down list, select Per Name Year to specify years as the top level in the navigation hierarchy.

      Note: The data source column you select defines the top level of the navigation menu.

      Under "Select data to aggregate for each group," define a sum of revenue to display next to the navigation groupings:

      1. In the aggregation function drop-down list, select Summation.
      2. In the data field drop-down list, select Revenue.

      Click OK to display the Navigation page. Notice that the navigation area contains Per Name Year and a sum of revenue by year.

    Creating the Navigation Hierarchy and Content

      Drag columns from the Data Source list to create the navigation hierarchy:

      1. Drag LOB (located under Sample Sales Lite > Products) to the navigation area under Per Name Year.


      2. Drag Office (located under Sample Sales Lite > Offices) to the navigation area under LOB.

      Next, insert a chart that shows revenue by month. On the Insert tab, drag the Chart icon to the first cell in the layout grid, then drag the following columns from the Data Source into the chart:

      • Value area: Revenue (located under Sample Sales Lite > Base Facts)
      • Label area: Per Name Month (located under Sample Sales Lite > Time)

      Notice that the default layout grid for navigation pages contains two rows and two columns. Your page requires two rows, but only one column. You can merge the row cells to create a single column:

      1. In the layout grid, select the second cell in the first row. On the Frame Cell tab, click Delete Column..


      Drag the chart resize handle to resize the chart to fit the layout cell.

      Click the Insert tab, then drag the Table icon to the bottom cell in the layout grid.

      Drag the following columns from the Data Source panel to the table:

      • Per Name Month (located under Sample Sales Lite > Time)
      • LOB (located under Sample Sales Lite > Products)
      • Office (located under Sample Sales Lite > Offices)
      • Revenue (located under Sample Sales Lite > Base Facts)

      At the top of the page, double-click Page 5 to edit the page name. Enter Navigation, and then press Enter to rename the page.

      Preview the Navigation page:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Navigation page.


      4. In the navigation area, tap 2010 to view only 2010 data.


      5. The chart and table are filtered to show only 2010 data. In the navigation area, tap Digital.


      6. The chart and table are filtered to show only the Digital LOB for 2010. In the navigation area, tap College Office.


      7. Notice that the chart and table show revenue data for only the College Office, for the Digital LOB, in 2010.

      Click Edit Layout to return to the Mobile App Designer.

    Formatting Navigation Hierarchies

      Similar to tile pages, you can add Stoplight formatting to navigation hierarchies to highlight values conditionally, based on static threshold values, a comparison to a target value, or a comparison to another field. This section shows you how to add Stoplight formatting to revenue values, based on a comparison to target revenue.

      Additionally, if levels in your navigation hierarchy have too many members to display on one page, you can add a data filter to the column. Data filters enable you to search for specific members in the column. This section also shows you how to add a data filter to the Office column.

      Select the Navigation page. In the navigation area, select the Revenue column header to display the Metric Field tab.

      Click the Stoplight icon to display Stoplight formatting options.

      Verify that Stoplight formatting is enabled.

      Under Select Stoplight Comparison Type, select Growth %.

      Notice that because you are applying Stoplight formatting to a metric field (Revenue), the base measure for the comparison is already selected and cannot be changed. Under Select Measures, make the following selections:

      • Target: Measure
      • Target Measure: Target Revenue
      • Target Formula: Summation

      Under Set Threshold Values, enter the following values, and then click OK:

      • Less Than: 10
      • Greater Than: 20

      Preview the Navigation page with Stoplight formatting:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Navigation page.


      4. In the navigation area, tap 2010 to view only 2010 data.


      5. Notice that in the LOB list, the Stoplight formatting shows that revenue for Communication, Electronics, and Services are more than 10% less than target revenue. Tap Electronics to investigate the data.


      6. Notice that the Stoplight formatting enables you to see at a glance where the revenue for an office is more than 10% less than target revenue. Also notice that the list of offices does not fit on a single page; you have to swipe to scroll through the list.

      Click Edit Layout to return to the Mobile App Designer.

      Select the Navigation page, and then, in the navigation area, select Office.

      Under the Data Source hierarchy, expand the Properties list.

      In the Show Data Filter row, click False to display the drop-down list, and then select True.

      Click the Save icon to save your app.

      Preview the Navigation page with a data filter for the Office column:

      1. Click Preview.


      2. Tap the page list icon to view the pages in the app.


      3. Tap the Navigation page.


      4. In the navigation area, tap 2010 to view only 2010 data.


      5. Notice that in the LOB list, the Stoplight formatting shows that revenue for Communication, Electronics, and Services are more than 10% less than target revenue. Tap Communication to investigate the data.


      6. Notice that a data filter is displayed at the top of the list of offices.


      7. Experiment by entering text strings into the data filter. For example, entering ma returns "Madison Office" and "Sherman Office," and entering s returns every office with an s in its name.

Summary

    In this tutorial, you have learned how to:

    • Create basic mobile apps
    • Design apps with tile pages
    • Create navigation lists for investigating data

    Resources

    The following resources are available online for more information relating to the Mobile App Designer and Oracle BI EE:

    • Oracle Fusion Middleware User's Guide for Oracle Business Intelligence Mobile App Designer (PDF)
    • To learn more about Oracle BI EE, search for additional OBEs in the Oracle Learning Library.

    Credits

    • Lead Curriculum Developer: Lisa Alexander
    • Other Contributors: Kan Nishida and Kasturi Shekhar

To navigate this Oracle by Example tutorial, note the following:

Hide Header Buttons:
Click the title to hide the buttons in the header. To show the buttons again, click the title again.
Topic List:
Click a topic to navigate to that section.
Expand All Topics:
Click the button to show or hide the details for the sections. By default, all topics are collapsed.
Hide All Images:
Click the button to show or hide the screenshots. By default, all images are displayed.
Print:
Click the button to print the content. The content that is currently displayed or hidden is printed.

To navigate to a particular section in this tutorial, select the topic from the list.