2 Getting Started

To help you get started with the Oracle BI Mobile App Designer use this tutorial to guide you through the creation of your first app.

This chapter includes the following section:


To complete this tutorial the following is required:

2.1 Creating Your First Tablet App

This tutorial demonstrates how to build a simple tablet app. To complete the tutorial use the sample data source "Sample Sales Lite" that is provided with Oracle BI EE. The app you will build in this tutorial is shown in Figure 2-1.

Figure 2-1 Tablet App Created in this Tutorial

Sample tablet app

To build this app, follow these steps:

2.1.1 Choose Your Data Source and Save the App

  1. From the Oracle Business Intelligence Home page, select Create Mobile App.

    Selecting Create Mobile App
  2. Click Tablet.

    Figure 2-2 Choosing Device Type

    Choosing tablet as device type
  3. Select the source of data for your app. Click BI Subject Area and then select Sample Sales Lite from the list.

    Figure 2-3 Choosing the Data Source

    Choosing Data Source
  4. Click Save to save your app. Select a folder location, then enter a name and click Save.

    Saving the tablet app

    The app designer opens to display the default cover page.

    Figure 2-4 Mobile App Designer Default Display

    Mobile App designer default display

    Notice the data fields displayed on the left. Fields can be dragged from the left column to the components in the design area. Notice the Insert toolbar that displays the components you can drag and drop to your app page.

2.1.2 Add a Title to the Cover Page

Update the title and subtitle of the cover page. Double-click the text to edit it. Enter the following:

  • Title: Sales Report

  • Subtitle: FY 2013

Figure 2-5 Updating the Cover Page Title and Subtitle

New values shown for the default title and subtitle

2.1.3 Create the Tile Page

The second page of the app displays tiles. To add the second page:

  1. Click the Insert toolbar and then click New Page.

    From the new page menu select Tile.

    Figure 2-6 Inserting the Tile Page

    Inserting a new page by selecting the Tile template
  2. From the Select a column to group list, select Product Type.

    Figure 2-7 Selecting Product Type

    Selecting Product Type as column to group

    By selecting Product Type as the Column to group value, for each Product Type that occurs in the data, the app generates a tile cell with the data specific to that product type.

    Figure 2-8 displays the inserted tile page. During design time the "Repeated contents" tiles display as placeholders only and do not show the content you define for the first tile. Use Preview to view the repeated contents at anytime during the design phase.

    Figure 2-8 Inserted Tile Page

    Inserted empty tile page
  3. To position the fields that will display in your tiles, first insert a Frame:

    With the first tile selected, click the Insert toolbar. Select and drag the Frame component to the first tile.

    Figure 2-9 Dragging the Frame Component to the Tile

    Inserting a frame to the tile
  4. In the Frame dialog, enter 1 for the Rows value and 2 for Columns.

    Figure 2-10 Entering Frame Dimensions

    Enterg frame dimensions
  5. Drag and drop the Product Type field from the Data Source pane to the left frame cell. Drag and drop the Revenue field from the Data Source pane to the right frame cell.

    Figure 2-11 Data Fields Inserted to the Tile Frame

    Adding data fields to the frame

    Notice that the Revenue field has the Summation formula applied to it. Revenue will be summed for the Product Type grouped in each tile.

    Figure 2-12 Summation Formula Applied to Revenue

    Summation applied to the Revenue field
  6. To insert the chart, ensure that the first tile is selected by clicking the outer border of the tile. From the Insert menu, click Chart.

    Figure 2-13 Inserting Chart to Tile

    Inserting the chart to the tile

    A default chart placeholder is inserted to the cell.

    Figure 2-14 Default Chart Inserted to Tile

    Default chart inserted to tile
  7. Change the Chart Type to a line chart: With the chart selected, click Chart Type, then select Line, then select Vertical Line.

    Figure 2-15 Changing the Chart Type

    Changing the chart type to a Line chart
  8. Add data to your chart by first dragging the Revenue field from the Data pane to the Drop Value Here position. Then drag the Per Name Qtr field from the Data pane to the Drop Label Here position.

    Figure 2-16 Data Elements Inserted to the Chart

    Adding data to the chart
  9. To add the stoplight formatting, select the first tile and then click Stoplight, as shown in Figure 2-17.

    Figure 2-17 Selecting Stoplight Formatting

    Adding stoplight formatting
  10. In the Stoplight dialog enter the following:

    • Select Values.

    • For the Measure field select Revenue.

    • For the Formula select Summation.

    • In the Less Than entry box enter 100000.

    • In the Greater Than entry box enter 500000.

    Figure 2-18 Editing the Stoplight Conditions

    Choosing stoplight options

    Click OK. The conditional formatting does not display during design time, but you can see the effects when you preview.

  11. The final task on this page is to change the page title. Double-click the text "Page 2" on the page icon in the left column as shown in Figure 2-19. Update the text to "Revenue Analysis".

    Figure 2-19 Updating the Page Title

    Updating the page title
  12. Click the Preview toolbar button and select Preview.

    Figure 2-20 Selecting Preview Option

    Clicking Preview

    Your app is displayed in the tablet simulator.

    Figure 2-21 Tablet Simulator in Preview Mode

    App shown in preview mode on the desktop tablet simulator

    To view the second page of your app, click the page menu icon in the upper left corner, then click the page title Revenue Analysis.

    Figure 2-22 Using the Page Menu to Navigate the App

    Using the table of contents feature to navigate the app

    Your second page displays showing the tiles you created with the stoplight formatting applied.

    Figure 2-23 Preview of Tiles

    Preview of Tiles

    Notice the Information icon in the upper right corner. Click the icon to see the stoplight conditions you applied.

    Figure 2-24 Click the Information Icon to View Stoplight Conditions

    Show stoplight conditions
  13. Click Edit Layout to return to the designer.

2.1.4 Create the Subpage

The next page of your app is a detail page of the Revenue Analysis page. When you tap one of the Product Type tiles on your first page, a detail page opens to show detail information filtered for the Product Type that was tapped. To create the master-detail relationship, simply add a subpage to the Revenue Analysis page.

To add the subpage:

  1. Click the Insert toolbar and then click New Page. To add a subpage, choose one of the Subpage options. For this tutorial, select the 3 Cells page layout.

    Figure 2-25 Creating the Subpage

    Creating the subpage by selecting the 3 cells template
  2. Insert the Filter component:

    Select the upper-left cell and then click the Insert tab. Click Filter.

    Click Insert Filter

    An empty filter is inserted. From the Data Source pane drag Order Status to the Filter component.

    Figure 2-26 Dragging the Order Status Field to the List Component

    Dragging the Order Status field to the Filter
  3. Insert the pie chart:

    Select the upper-right cell and then click the Insert tab. Click Chart. A default chart placeholder is inserted to the cell.

    Change the chart type to pie by clicking Chart Type, then Pie >, then Pie from the submenu.

    Changing the chart type to Pie
  4. Add data to your chart by first dragging the Revenue field from the Data Source pane to the Drop Value Here position. Then drag the Organization field from the Data Source pane to the Drop Series Here position.

    Adding data to the chart
  5. Change the position of the legend:

    With the chart selected, on the Chart tab, click Legend then select the Right Side option.

    Figure 2-27 Changing the Position of the Pie Chart Legend

    Changing the position of the pie chart legend
  6. Insert the table:

    Select the bottom cell and then click the Insert tab. Click Table. Drag the following fields from the Data Source pane to the table:

    • Product Name

    • Revenue

    • Target Revenue

    • Billed Quantity

    Figure 2-28 Dragging the Data Items to the Table

    Dropping the data items to the table
  7. Finally, change the title of the subpage to "Detail" by double-clicking the text in the subpage icon as shown in Figure 2-29.

    Figure 2-29 Updating the Subpage Title

    Updating subpage title

2.1.5 Preview Your App on a Mobile Device

Preview your app on your tablet:

Click Preview and then click On Mobile. Use your tablet's QR code reader to obtain the URL to open your app in your tablet browser. Or, alternatively, copy the URL and e-mail it to your mobile device to open it.

Figure 2-30 Preview Page Showing the App QR Code

Preview page showing QR code for the app.

Enter your login credentials for Oracle BI Enterprise Edition to view your app on your mobile device.

Figure 2-31 Login screen on tablet

Login screen shwon on tablet

To share with your colleagues, tap the page menu, and then tap Share to send e-mail link to your app.

Figure 2-32 Tap Share to Send Link to Your App

Share option on page menu