Designing the Apps for Tablet(Navigation)

Step 1: Sign in to oracle bi analytics by prov1ding your credentials.

mob2

Step 2: You will be directed to the answers homepage.

mob3

 

Select the mobile application from the create pane.

mob4

 

Step 3: Select the tablet from the select device dialog box.

select tablet

Step 4: Select the sample sales lite subject area as the data source. Click on save.

select subject area

Step 5: Save your application in your own folder by giving it an appropriate title. Then you will be redirected to the designer screen where you can design your application.

d5

Step 6: In the Mobile Application designer page you can add components.

  • The workspace displays the canvas area as a phone or a tablet-sized screen
    depending on the target device type you chose.
  • Use the ‘+’ to add the components to your app.
  • Preview your app at anytime during the design phase in the mobile device
    simulator.

D6

 

Step 7: Selecting and Deleting Items. This has now become simpler. Now you just have to select i.e. click on the component you want to delete and then you just press the delete button on the keyboard or you can simply click the ‘x’ icon on the top right of the data source pane which is highlighted in the image below.

D7

Step 8: Adding and Editing Pages. The New Page menu provides several pre formatted page templates. When you insert a page, first choose a Main Page or a Subpage.

D8

Step 9: After adding a new page change the page name.

Double-click the page name text on the page icon in the left column as shown in image below.

D9

Step 10: Changing Between Main Page and Subpage.

A main page can be demoted to a subpage by clicking the right-arrow icon. A subpage can be promoted to a main page by clicking the left-arrow icon.

D10

Step 11: To move a page, select and drag the page to the new position.

D11

Step 12: Inserting Images.

The Mobile App Designer supports the following methods for including images in a page:
1. Static image: Upload a static image that is saved in the app. An uploaded image file must be in one of the following graphic file formats: GIF, JPEG, PNG, or BMP.
The image file cannot be larger than 10 MB.
2. Static URL: Specify a static link to a URL where an image is stored. At run time the image is retrieved from the stored location.
3. Dynamic URL: When the image URL is provided in a data field, specify the field that contains the URL. The value of the data field is evaluated at run time enabling dynamic insertion of an image.

To insert an image:

Drag the image component from the add icon on the top

.D12

 

In the Insert an Image dialog, specify one of the following sources for the image:
1.Select the image from a local directory: Click Browse to specify the file name and directory of the image on a local or mapped drive to upload the image.
2.Enter the URL for the image: Enter the URL where the image is stored.
3.Select the data field for the image and for the alternative text:
Image URL: Select the field from the data that contains a URL of an image.
Alternative Text: If the data includes a field that contains alternative text for the image, then select that field to display alternative text.

After selecting the image to be inserted click on insert.

D12

D13

Step 13: Adding Navigation Pages to an application. You add a navigation page to your application for a tablet, by clicking on the New page and then click on Navigation under the main page template.

d13_1

Step 14: After inserting the navigation page you get a master detail view where changing the master’s value affects the details view and you can analyze and compare between the data. You can add the components in the tiles on the right hand side 0f the master’s tab.

D14

Step 15: In the Master panel, You can drag and drop data from the data source pane to the drop data here box. Here we have taken the Brand, Product type & Product dimensions and Revenue measures.

D15

 

Step 16: In the first cell, You can add the chart component and then you can then you can add the revenue to the values and per name Qtr to the label. Then you can change the chart type in the chart tab in the right hand side pane and change it to vertical bar if it is not.

D16

Step 17: In the 2nd cell, You can add the chart component and change the chart type to pie chart and add the revenue to values and product type to the series.

d17

 

Step 18: Now you will be having a 3rd and a 4th cell, what you have to do here is delete the entire row. Here is how you delete the row. Click on the 3rd cell and in the frame cell tab on the right hand side click on delete row under Delete.

d18

 

Step 19: Then you can add pivot table component to the area below the 2 cells. And you can drag and drop the data elements from the data source pane to the pivot table for results.

D19

Step 20: Finally you can view the navigation pages after clicking the preview. Here we can see the MASTER navigation tab where there is brand which is highlighted, when we click on any one of it, it navigates to the next page where we can see the product and revenue.

d201

In the image below we can see the page where the app navigates after clicking on the BizTech brand. Here we can see that the page navigation also provides a button to go back to the previous page, and shows the name of the current element we are looking at. Previous page is highlighted  by red square and current is highlighted by blue color.

d20

You can further navigate to the product type that you have added in the master pane by clicking on any of the products. Here in the image below I have selected the product Bluetooth Adapter.

d203

 

Leave A Reply

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