Skip Headers
Oracle® Fusion Middleware User's Guide for Oracle Business Intelligence Mobile App Designer
11g Release 1 (11.1.1)

Part Number E40220-01
Go to Documentation Home
Home
Go to Book List
Book List
Go to Table of Contents
Contents
Go to Master Index
Master Index
Go to Feedback page
Contact Us

Go to previous page
Previous
Go to next page
Next
PDF · Mobi · ePub

4 Designing Apps

This chapter describes how to insert and customize the components available in the BI Mobile App Designer.

This chapter describes the following:

4.1 The Oracle BI Mobile App Designer Workspace

Figure 4-1 shows the Oracle BI Mobile App Designer workspace.

Figure 4-1 Oracle BI Mobile App Designer

B Mobile App Designer interface

Note the following features of the app designer:

4.1.1 Setting Properties

The Properties pane displays the properties for the selected component in the workspace. For example, when you select a table in the workspace, the Table properties display. Some of the properties available in the Properties pane are also editable in the component-specific toolbar.

Click the property value to edit it. The change is applied to the component when you move the cursor out of the field. Collapse or expand a property group by clicking the plus or minus sign beside the group name.

Some properties available from the Properties pane are described in Chapter 6, "Advanced Design Features."

Figure 4-2 shows properties available for a chart.

Figure 4-2 Sample Properties Pane for a Chart

Example of the properties pane

4.1.2 Selecting and Deleting Items

Each of the component-specific toolbars includes the Select region.

  • The Select tool enables you to control precisely which component on the page has focus. This feature is particularly helpful when working with a complex design with overlapping components.

    Figure 4-3 shows the Select tool.

    Figure 4-3 The Select Tool

    Example of the Select tool
  • The Delete tool also provides a drop-down selection list to enable you to precisely select the component to delete.

4.2 Adding and Editing Pages

The New Page menu provides several preformatted page templates. When you insert a page, first choose a Main Page or a Subpage.

Figure 4-4 Inserting a New Page for a Tablet App

Inserting a new page from the New Page menu

Main Pages and Subpages

A main page is a page at the top level of your app. A main page displays in the app menu. You can navigate through the main pages of the app by swiping through the app sequentially, or you can navigate directly to a specific page using the page menu.

A subpage presents detail information of the main page to which it is associated. A subpage does not display in the app page menu. Typically you navigate to a subpage by tapping a data item on its main page (such as a tile or a chart value). The data presented on the subpage is automatically filtered based on the item you tapped on the main page. When you access a subpage by swiping the previous page, the subpage displays all data received from the previous page.

When you create a subpage beneath another subpage, each subpage can be filtered by tapping the page before it.

4.2.1 Selecting a Page Template

The Mobile App Designer provides several preformatted page templates to help you get started with your design:

  • Cover

    The default cover page includes an image and headings. Use a cover page to introduce your app. See Editing the Cover Page to customize your cover page.

  • Navigation

    A navigation page provides a master-detail interaction between a set of hierarchical filters that users navigate to control the display of the detail region of the page. The detail region contains visualizations you define that automatically update based on the selection in the navigation region. See Adding Navigation Pages.

  • Tile

    A tile page provides a set of dynamic, scrollable tiles containing visualizations that enable easy comparison of key measures across your data set. A tile is generated for each occurrence of a specific item in your data. See Adding Tile Pages.

  • Accordion (page template available for phone apps only)

    The accordion page provides an expandable display of a specific data dimension and a key measure (such as Product and Revenue). Add visualizations to the expansion area that you can expand and collapse easily to accommodate the mobile device viewing area. See Adding Accordion Pages.

  • Columns or cells

    Choose from several column-cell design patterns to arrange your app components.

  • Blank

    To design a custom page layout, choose Blank. Insert Frames to create your own column and cell arrangement. See Inserting Frames.

4.2.2 Changing the Page Name

The page name displays at the top of the page and in the app menu. To edit the page name:

  • Double-click the page name text on the page icon in the left column as shown in Figure 4-5 to open the text box for editing. Enter the new name.

    Figure 4-5 Updating the Page Name

    Updating the page name

4.2.3 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.

Figure 4-6 Changing the Page Hierarchy

Using the arrow icons to promote and demote pages

4.2.4 Moving Pages

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

Figure 4-7 Moving a Page

Moving a page to a new position

4.2.5 Deleting Pages

To delete a page, select the page and then click the delete icon.

Figure 4-8 Deleting a Page

Deleting a page

4.3 Editing the Cover Page

A cover page with a default image is included when you create an app. You can update the cover page image and title text; or, delete these default components and insert any other app component to the cover page.

4.3.1 Updating the Cover Image

To update the cover page image:

  1. Double-click the cover image.

  2. In the Update Image dialog, specify one of the following sources for the image:

    • Select the image from a local directory: Click Browse to specify the file name and directory of the image on a local directory to upload the image.

    • Enter the URL for the image: Enter the URL where the image is stored.

    • Select the data field for the image URL and for the alternative text:

      Image URL: Select the field from the data that contains a URL to an image.

      Alternative Text: If your data includes a field that contains alternative text for the image, you can select that field to define the alternative text that is displayed for the image.

    Figure 4-9 Update Image

    Update image dialog
  3. Optionally resize the image in one of these ways:

    • Drag the right bottom corner of the image. To preserve the aspect ratio when resizing an image, press and hold the Shift key before starting to drag the corner.

      Figure 4-10 Resizing an Image

      Resizing an image
    • Modify the width and height in the Properties pane. The Properties pane enables you to enter precise height and width values in pixels, centimeters, inches, or points.

      Figure 4-11 Setting Image Dimensions from the Properties pane

      Setting image dimensions on Properties pane

4.4 Adding Tile Pages

Tile pages provide a scrollable set of tiles each containing the same components repeated for a specific field in your data. Use a tile page to provide an instant view of a key measure across a specific dimension. This view not only provides a complete picture within each tile, but also enables an at-a-glance comparison across your data set.

The example tiles shown in Figure 4-12 provide an overview of revenue for a set of products. Each tile displays the overall revenue and a chart showing revenue by quarter. When you design a tile page you can include any visualization in each tile.

Figure 4-12 Tiles Displayed on a Tablet

Tiles shown at runtime on tablet

To enhance the visual impact of the values represented in each tile, you can add stoplight formatting to highlight tiles with results that fall outside the range of specific threshold values.

Figure 4-13 Tiles with Stoplight Formatting

Tiles with stoplight formatting

When a tile page is paired with a subpage, each tile is a touch point to open the subpage filtered by the tile value. This combination enables your users to quickly assess areas that require attention and drill down for deeper analysis.

Figure 4-14 Tap Tile to Display Detail Subpage

Tapping a tile to open a subpage

Features of tile pages include:

4.4.1 Creating a Tile Page

When you insert a new page, Tile is available as a page template selection. You can also insert a tile into a specific page area using the option on the Insert toolbar.

To insert a tile page:

  1. On the Insert toolbar, click New Page and then click Tile.

    Choosing Tile from the New Page menu
  2. In the Tile dialog, choose the data field that you want grouped for each tile. The drop-down list includes all the fields from your data. The example tile page in Figure 4-15 will display one tile for each Product Type.

    Figure 4-15 Selecting Data Field Column to Define Tiles

    Selecting the group field for each tile

    When inserted, the tiles display as shown in Figure 4-16. Note that in the app designer, only the first tile displays the contents. Use Preview when you want to see content across all tiles.

    Figure 4-16 Inserted Tile Page

    Default tile display
  3. To add contents to the tiles, select the first tile, and drag the components from the Insert menu to the first tile.

    A common use case is to add the data field label to the tile with a measure. For example, drag Product Type from the Data Source pane to the first tile and then drag Revenue from the Data Source pane to the first tile.

    Figure 4-17 Adding Field Label and Measure to Tile

    Adding a label and measure field to a tile
  4. Preview your tile page to view the contents so far. Click Preview.

    Tile page shown in Preview

    To finish your tile page, add the components to the first tile. For example, to add a chart, simply drag the chart component from the Insert menu and customize the chart as desired. An example is shown in Figure 4-18. For information about more customizations you can apply to your tile page, see Customizing Tiles.

    Figure 4-18 Sample Tile Page

    Sample completed tile page

4.4.2 Adding a Subpage to a Tile Page

A common use case is to add a subpage to a tile page to provide more detailed information about the data provided in a specific tile. The detail subpage opens when you tap a specific tile.

To add a subpage:

  1. Select the Tile page.

  2. On the Insert menu, click New Page and then select one of the Subpage options from the menu.

    Inserting a subpage
  3. The empty subpage is inserted for you to add content.

    Empty subpage
  4. Add components to your subpage. The example in Figure 4-19 shows a subpage with two charts and a pivot table. At run time, when you tap a tile on the tile page, the components on this page are filtered by the item tapped.

    Figure 4-19 Example Subpage

    Sample complete subpage

4.4.3 Customizing Tiles

You can insert any combination of components to the tiles. To accommodate the components you choose you can apply the following customizations:

Most of these options are available from the Tile toolbar. Select the first tile to display the toolbar.

Figure 4-20 Tile Toolbar

Tile toolbar

4.4.3.1 Specify Columns

To change the number of columns that display across the page, click the Columns option and select the number of columns. Supported values are one through four.

The column width automatically adjusts depending on the size and type of mobile device used to view the app.

Figure 4-21 Changing the Number of Columns Displayed

Using Columns command to change tile columns

4.4.3.2 Apply Filters

Apply a filter to refine the items displayed in the tile page. For example, you can apply a filter to limit the display to only:

  • The top 10 salaries

  • The bottom 25 store sales

  • Employees in the IT department

  • Sales that are between $10,000 and $20,000 and in the Southern region

You can add multiple filters and manage the order in which they are applied to the tile page.

See Section 6.3, "Adding Filters to Tiles, Charts, Tables, and Pivot Tables" for information about adding filters to page components.

4.4.3.3 Sort

The Sort option sorts the tiles by the field you selected as the tile grouping field. For example, if you chose Product Type as the tile grouping field, and then select Sort ascending, the tiles will be sorted from A - Z by the Product Type name.

To sort the tiles:

  1. Select the first tile to view the Tile toolbar.

  2. In the Sort group click Ascending Order or Descending Order.

    Applying a sort order to tiles

4.4.3.4 Add Stoplight Formatting

Stoplight formatting applies one of three distinct background colors to each tile depending on the value of a chosen aggregated field in your data. You can customize the colors or use the default colors red, amber, and green. Use stoplight formatting to quickly assess an indicator as unacceptable, acceptable, or desirable.

The Stoplight feature enables you to highlight values conditionally based on static threshold values, a comparison to a target value, or a comparison to another field.

4.4.3.4.1 Apply Formatting Based on Static Values

Use this option when the unacceptable, acceptable, and desired values are the same for the aggregated field for all items. You can customize the colors for each range.

To apply conditional formatting based on static values:

  1. Select the first tile and click Stoplight.

    Selecting the Stoplight command from the Tile toolbar
  2. In the Stoplight dialog select Values.

    Stoplight dialog, with Values selected
  3. Select the Measure field on which to base the formatting and then select the formula to apply to the Measure.

    For example, assume you have grouped tiles by Product Type. You want to apply formatting to each tile based on the value of Revenue for each product type. Select Revenue as the Measure and Summation as the Formula.

    Choosing Measure and Formula fields
  4. Enter the threshold values for the background colors. Values less than the left entry will display the Less Than background color. Values greater than the right entry will display the Greater Than background color. Values between display the Between color.

    Setting the threshhold values

    To change the default colors, see Customizing the Colors.

  5. Click OK.

    Note that for Tile pages the stoplight formatting does not display in the design workspace.

  6. Click Preview to view how the formatting will display at run time.

    Preview of stoplight
4.4.3.4.2 Apply Formatting Based on Percent Achievement

This option enables you to conditionally highlight the aggregate value based on the percentage of a target value. For example, you want to highlight sales that are less than 50 percent of target to display as red, sales that are 50-75 percent of the target as amber and sales that are greater than 75 percent of the target to display as green.

To apply conditional formatting based on the percent achievement of a target:

  1. Select the first tile and click Stoplight.

    Selecting the Stoplight command from the Tile toolbar
  2. In the Stoplight dialog select Achievement %.

    Stoplight dialog with Achievement % selected
  3. Select the Base Measure from the data field list and the Formula to apply to the measure field. In this example, Revenue will be summed for each tile to establish the base measure.

    Choosing the stoplight Base measure and formula
  4. Choose the Target Measure or enter a Value.

    • Measure - select a field from the data to supply the target value for comparison.

    • Value - enter a static value to supply the target value for comparison.

    The app calculates what percentage the calculated Base measure value is of the Target value. In the example below, the Revenue column (Base) is compared to the Target Revenue column (Target). The calculation performed is:

    Revenue/Target Revenue X 100%

    Therefore if your Revenue is $8,000 and your Target Revenue is $10,000, the percent achievement is:

    8,000/10,000 X 100% = 80%

  5. Enter the Less Than and Greater Than percentage values for the background colors.

    Entering the percentage values

    If the Base value percentage of the Target value is less than the percentage you enter on the left, the Less Than color displays. If the Base value percentage of the Target value is greater than the value you enter on the right, the Greater Than color displays.

  6. To change the default colors, see Customizing the Colors

4.4.3.4.3 Apply Formatting Based on Percent Growth

This option enables you to conditionally highlight the aggregate value based on the percent difference of the base value from the target value. The calculation applied is:

(Base - Target)/Target X 100%

For example, you want to compare sales from the current and previous quarters and you want to see when sales in the current quarter showed less than 10% growth from the previous quarter. When sales showed 10% growth you want to display the value in green, when 0-10% growth display amber, and when less than 0% growth display red.

To apply conditional formatting based on percent growth:

  1. Select the first tile and click Stoplight.

    Selecting the Stoplight command from the Tile toolbar
  2. In the Stoplight dialog select Growth %.

    Stoplight dialog with Growth % selected
  3. Select the Base Measure from the data field list and the Formula to apply to the measure field. In this example, Revenue will be summed for each tile to establish the base measure.

    Choosing the stoplight Base measure and formula
  4. Choose Target Measure or Value.

    • Measure - select a field from the data to supply the target value for comparison.

    • Value - enter a static value to supply the target value for comparison.

    The app calculates the percent difference that the Base column value is from the Target value. In the example below, the Revenue column (Base) is compared to the Quarter Ago Revenue column (Target). The calculation performed is:

    ((Revenue - Quarter Ago Revenue)/Quarter Ago Revenue) X 100%

    Therefore if your Revenue is $11,000 and your Quarter Ago Revenue is $10,000, the percent growth is:

    ((11,000 - 10,000)/10,000) X 100% = 10%

  5. Enter the Less Than and Greater Than percentage values for the background colors.

    Entering the threshold values

    If the Base value percentage difference from Target value is less than the percentage you enter on the left, the Less Than color displays. If the Base value percentage difference from the Target value is greater than the value you enter on the right, the Greater Than color displays.

  6. To change the default colors, see Customizing the Colors.

4.4.3.5 Resize Tile Margins

You can adjust the space around each tile.

To customize the margin area between tiles:

  1. Select the first tile.

  2. Click Properties on the left pane.

    Clicking the Properties pane
  3. Click the value column next to Margin.

    Figure 4-22 Customizing Tile Margins

    Setting Tile margins
  4. Enter the new margin values and select the unit of measurement.

  5. Click OK.

4.5 Inserting Images

The Mobile App Designer supports the following methods for including images in a page:

To insert an image:

  1. From the Insert toolbar, drag the Image component to the page.

    Inserting Image
  2. In the Insert an Image dialog, specify one of the following sources for the image:

    • 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.

    • Enter the URL for the image: Enter the URL where the image is stored.

    • 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.

    Figure 4-23 Insert Image Dialog

    Insert image dialog
  3. Add alternative text for the image. Click the Properties pane and enter text in the Alternative Text field as shown in Figure 4-75.

    Figure 4-24 Entering Alternative Text for an Image in the Properties Pane

    Entering alternative text
  4. Optionally resize the image in one of these ways:

    • Drag the right bottom corner of the image. To preserve the aspect ratio when resizing an image, press and hold the Shift key before starting to drag the corner.

      Figure 4-25 Resizing an Image

      Resizing an image
    • Modify the width and height in the Properties pane. The Properties pane enables you to enter precise height and width values in pixels, centimeters, inches, or points.

      Figure 4-26 Setting Image Dimensions from the Properties pane

      Setting image dimensions on Properties pane

4.6 Inserting Frames

Use a frame to divide your app page into sections for the precise positioning of components. When you start from a Blank page, typically you insert a frame before you begin inserting components. When you choose a preformatted template you can edit a default frame by selecting the frame and using the Frame toolbar. You can insert a frame inside another frame.

To insert a frame:

  1. Select the area of the page where you want to insert the frame and click Frame on the Insert toolbar.

    Inserting Frame
  2. Enter the number of rows and columns for the frame and click OK.

Figure 4-27 shows the Insert Frame dialog.

Figure 4-27 Insert Frame Dialog

Setting rows and columns for a frame

Figure 4-28 shows the inserted frame.

Figure 4-28 Example of a Frame Inserted in the Design Area

2 X 2 frame inserted to design area

Features of frames include:

When you select a frame cell, the Frame Cell toolbar (Figure 4-29) displays to enable additional customization of fonts, alignment, borders, and background colors.

Figure 4-29 The Frame Cell Toolbar

Frame Cell toolbar

4.6.1 Adding a Border or Background Color

By default, the gridlines are displayed in the design area only and are not shown during run time.

To display the gridlines in your app:

  1. Select the frame cell and click the Set Border command button.

    Set Border command
  2. Choose the border style from the Border dialog. See Section 6.7, "Setting Borders" for more information about the Border dialog.

To add a background color to a frame cell:

  1. Click the Background Color command button to launch the Color Picker.

    Background color toolbar icon
  2. Select a color and click OK.

4.6.2 Inserting Additional Rows and Columns

To insert additional rows or columns to a frame:

  1. Select the frame cell that is the focal point.

  2. Click the appropriate command button under Insert:

    Insert commands
  • Add a Row above

  • Add a Column to the right

  • Add a Row below

  • Add a Column to the left

4.6.3 Joining and Unjoining Cells

To join frame cells horizontally or vertically:

  1. Select multiple adjacent cells by holding down the Ctrl key and clicking each frame cell.

  2. Click the Join command button.

To unjoin cells that have been joined:

  1. Select the joined cell and click the Unjoin button.

4.7 Adding Navigation Pages

The creation process for the navigation page is different for tablets and phones. See the appropriate section for your app:

4.7.1 Navigation Page for Tablet

The Navigation page defines a master-detail relationship between a navigable set of filters and the visualizations displayed on the page. The navigation area of the page contains a hierarchy of filters that you tap through to drive the display on the detail side of the page. As you tap, you can see successively more refined sets of data, or you can stop within a level to see data just for its members, or a particular member. You can navigate up and down the hierarchical filters to see just the subset of data that interests you.

Figure 4-30 Navigation List Selection Drives the Detail Display

Example navigation selection display

To insert a Navigation page:

  1. On the Insert toolbar, click New Page and then select Navigation.

    Selecting Navigation from New Page menu
  2. Select the data field from the list to define the top level of the navigation menu. In the example, the first level of the navigation list is grouped by Brand.

    Figure 4-31 Selecting the First Level of the Navigation List

    Selecting a column to form the first level of navigation
  3. Next choose a data field to aggregate for the group element and then choose an aggregation function. In this example, the Revenue for each Brand will be summed.

    Figure 4-32 Choosing the Aggregation Function and Element

    Choosing aggregation field and function

    When you click OK the members of the group by column you selected display as the navigation list along with the aggregated value for each member of the list.

    Navigation page display in design area
  4. To add a second level to the navigation list, drag the element from the Data Source pane to the Drop Here box on the page.

    Figure 4-33 Adding a Second Level to the Navigation Page

    Adding a second level to the navigation page
  5. Continue adding levels as needed by dragging the fields from the Data Source pane to the Drop Here box. To see the members of a specific level, click that level.

    Figure 4-34 Viewing the Members of the Product Level

    Third level added to navigation page
  6. To add stoplight formatting to your navigation list, see Stoplight Formatting for Navigation and Accordion Pages.

  7. Add the components to the detail region of the page. At run time, these components refresh as items on the navigation list are tapped. The example shows two charts and a pivot table.

    Navigation page with detail components

4.7.2 Navigation Page for Phone

The navigation page for phone enables you to create a hierarchical list of filters that you can navigate to see a detail display of the specific items that interest you.

Figure 4-35 Navigation List Series on Phone

Navigation list series shown on phone

To create a navigation page:

  1. On the Insert toolbar, click New Page and then select Navigation.

    Selecting Navigation from New Page menu
  2. Select the data field from the list to define the top level of the navigation menu. In the example, the first level of the navigation list is grouped by Brand.

    Figure 4-36 Selecting the First Level Hierarchy of the Navigation List

    Selecting the first level for the navigation
  3. Next choose the measure field to aggregate for the group element. In this example, Revenue is summed for each Brand (shown in Figure 4-37).

    Figure 4-37 Choosing the Measure Field and Aggregation Function

    Selecting the measure and aggregation fields

    When you click OK the data element you selected displays as a list with the aggregated measure as shown in Figure 4-38.

    Figure 4-38 First Level Navigation List

    First level of the navigation whown in the design area
  4. To add a second level to the navigation list, create a subpage under the first navigation list page as shown in Figure 4-39.

    Figure 4-39 Inserting Navigation List Subpage

    Inserting second level for navigation
  5. Select the data field to group for the second level of the navigation list. In this example (Figure 4-40), Product Type is the second level. Every child level uses the same aggregation selected for the first level. In the child levels the aggregation selection is for display only and cannot be updated.

    Figure 4-40 Creating the Second-Level Navigation List

    Selecting column to define second-level navigation

    When you click OK, your subpage displays the members of the group you selected as shown in Figure 4-41.

    Figure 4-41 Second Level of Navigation Page

    Second -level navigation page in design area
  6. To create another level, add a Navigation type subpage under the subpage you just created. Select the group element for this page as described in the previous step. Figure 4-42 shows the navigation page created for the Product field.

    Figure 4-42 Third level navigation page

    Third-level navigation inserted

    You can continue adding subpages to create as many levels as your app requires.

  7. To add a detail page with results driven by the selections on the previous pages, add a new subpage beneath the final navigation page.

    Figure 4-43 Adding a Detail Page to Navigation Series

    Adding the detail page
  8. Add components to the detail page. The following example shows a detail page with a chart and table.

    Figure 4-44 Final Detail Page in Navigation Series

    Completed detail page

4.7.3 Stoplight Formatting for Navigation and Accordion Pages

The Stoplight feature enables you to highlight values conditionally based on static threshold values, a comparison to a target value, or a comparison to another field.

4.7.3.1 Apply Formatting Based on Static Values

Use this option when the unacceptable, acceptable, and desired values are the same for the aggregated field at each level of the navigation. You can customize the colors for each range.

To apply conditional formatting based on static values:

  1. On the navigation or accordion page, select the measure field and click Stoplight. In this example the measure field is Revenue.

    Selecting Stoplight formatting from Navigation page
  2. In the Stoplight dialog select Values. The Base Measure and Formula that you chose when you defined the navigation or accordion page are displayed, but are not editable. Stoplight dialog with Values selected

  3. Enter the threshold values for the background colors. Values less than the left entry will display the Less Than background color. Values greater than the right entry will display the Greater Than background color. Values between display the Between color.

    Setting the threshhold values

    To change the default colors, see Customizing the Colors.

  4. Preview your app.

    Preview of stoplight formatting

4.7.3.2 Apply Formatting Based on Percent Achievement

This option enables you to conditionally highlight the aggregate value based on the percentage of a target value. For example, you want to highlight sales that are less than 50 percent of target to display as red, sales that are 50-75 percent of the target as amber and sales that are greater than 75 percent of the target to display as green.

To apply conditional formatting based on the percent achievement of a target:

  1. On the navigation or accordion page, select the aggregation field and click Stoplight. In this example the aggregation field is Revenue.

    Selecting stoplight formatting command
  2. In the Stoplight dialog select Achievement %. The Base Measure and Formula that you chose when you defined the navigation or accordion page are displayed, but are not editable.

    Stoplight dialog with Achievement % selected
  3. Choose Target Measure or Value.

    • Measure - select a field from the data to supply the target value for comparison.

    • Value - enter a static value to supply the target value for comparison.

    The app calculates what percentage the Base column value is of the Target value. In the example above, the Revenue column (Base) is compared to the Target Revenue column (Target). The calculation performed is:

    Revenue/Target Revenue X 100%

    Therefore if your Revenue is $8,000 and your Target Revenue is $10,000, the percent achievement is:

    8,000/10,000 X 100% = 80%

  4. Enter the Less Than and Greater Than values percentage values for the background colors.

    Entering the percentage values

    If the Base value percentage of the Target value is less than the percentage you enter on the left, the Less Than color displays. If the Base value percentage of the Target value is greater than the value you enter on the right, the Greater Than color displays.

  5. To change the default colors, see Customizing the Colors.

4.7.3.3 Apply Formatting Based on Percent Growth

This option enables you to conditionally highlight the aggregate value based on the percent difference that the base value is from the target value. The calculation applied is:

(Base - Target)/Target X 100%

For example, you want to compare sales from the current and previous quarters and you want to see when sales in the current quarter showed less than 10% growth from the previous quarter. When sales showed greater than 10% growth you want to display the value in green, when 0-10% growth in amber, and when less than 0% growth in red.

To apply conditional formatting based on percent growth:

  1. On the navigation or accordion page, select the measure field and click Stoplight. In this example the measure field is Revenue.

    Selecting Stoplight command
  2. In the Stoplight dialog select Growth %. The Base Measure and Formula that you chose when you defined the navigation or accordion page are displayed, but are not editable.

    Stoplight dialog with Growth % selected
  3. Choose Target Measure or Value.

    • Measure - select a field from the data to supply the target value for comparison.

    • Value - enter a static value to supply the target value for comparison.

    The app calculates the percent difference that the Base column value is from the Target value. In the example above, the Revenue column (Base) is compared to the Quarter Ago Revenue column (Target). The calculation performed is:

    ((Revenue - Quarter Ago Revenue)/Quarter Ago Revenue) X 100%

    Therefore if your Revenue is $11,000 and your Quarter Ago Revenue is $10,000, the percent growth is:

    ((11,000 - 10,000)/10,000) X 100% = 10%

  4. Enter the Less Than and Greater Than values percentage values for the background colors.

    Entering the threshold values

    If the Base value percentage difference from Target value is less than the percentage you enter on the left, the Less Than color displays. If the Base value percentage difference from the Target value is greater than the value you enter on the right, the Greater Than color displays.

  5. To change the default colors, see Customizing the Colors.

4.7.3.4 Customizing the Colors

When the default colors do not suit the needs of your app, you can customize them to any color you require. For example, in some apps, the Less Than values should display as green and the Greater Than values as red; or, you may choose to display a different color scheme altogether.

To customize a color:

  • Click the color bar to open the color picker and choose the color desired.

    Figure 4-45 Changing the Default Color

    Changing the default color

4.8 Adding Accordion Pages

The accordion page provides an expandable display of a specific data dimension and a key measure (such as Product and Revenue). Add visualizations to the expansion area that you can view and close easily from a mobile phone. The Accordion page is available for phone apps. The accordion component is also available for insertion to a tablet page.

Figure 4-46 Sample Accordion Page: Expanded and Collapsed

Sample accordion page

To create an accordion page:

  1. On the Insert toolbar, click New Page and then click Accordion.

    Selecting Accordion page type
  2. Select the data column to define each section of the accordion. In this example, the an accordion section is created for each Product Type.

    Selecting Product Type
  3. Next select the measure field to aggregate for each section and select the aggregation type: Summation, Count, or Count Distinct. In this example, Revenue is summed.

    Selecting group by column

    More formula types are supported for the measure field, see Section 6.6, "Features of Metric Fields."

  4. Click OK to insert the accordion.

    Inserted accordion
  5. Now you can insert the components you want to display when each section is expanded. Simply drag the component to the Drag Component Here area of the first expanded accordion section and follow the procedures for inserting the specific component. To design your accordion page you only insert components in the first accordion section. In this example a chart showing revenue by quarter is inserted.

    Components added to accordion
  6. To preview your accordion page, click Preview. The example displays in the Preview page as shown in the figure. Expand and collapse the accordion sections to see the data for each section.

    Figure 4-47 Accordion Preview

    Accordion preview

4.8.1 Adding Stoplight Formatting to the Accordion Page

See Stoplight Formatting for Navigation and Accordion Pages for steps on adding stoplight formatting to your accordion page.

4.9 Inserting Tables

A default table includes a header, data columns, and a total row. The table supports "group left" functionality (outlines) that merges fields with the same values as well as subtotals, grand totals, and custom calculations.

For detailed information about table options see Section 6.1, "Working with Tables."

To insert a table:

  1. From the Insert tab, drag the Data Table component to the page.

    Figure 4-48 shows an inserted, empty data table. Notice that the Table toolbar commands now display.

    Figure 4-48 Example of an Inserted, Empty Data Table

    Example of inserted table
  2. To add data columns to the table, select a field from the Data Source pane and drag it to the table.

    Figure 4-49 shows adding columns to the table. Notice that when you drop a field on the table the sample data immediately displays.

    Figure 4-49 Example of Columns Added to a Table

    Adding columns to a table
  3. Continue to drag the fields from the Data Source pane to form the columns of the table. If you must reposition a column that you have already added, select it and drag it to the correct position.

    To resize columns, position the cursor over the column border until the cursor switches to a handler, then drag the column border to the desired width. Notice that as you drag the column edge the width in pixels displays to enable precise sizing.

    Figure 4-50 Resizing Table Columns

    Resizing a table column

Some default formatting is applied to the table, specifically:

4.9.1 Customizing Tables

Edit the table properties using the table toolbar or the Properties pane. As you select different areas of the table, notice that the following dynamic toolbars are available to customize the display of your table. For details about these toolbars, see Section 6.1, "Working with Tables."

  • Table

    Table toolbar
  • Table Column Header

    Table Column Header toolbar
  • Column

    Table Column toolbar
  • Total Cell

    Table Total Cell toolbar

4.10 Inserting Pivot Tables

A pivot table provides views of multidimensional data in tabular form. It supports multiple measures and dimensions and subtotals at all levels. Figure 4-51 shows a pivot table.

Figure 4-51 A Pivot Table

Sample pivot table

4.10.1 Inserting a Pivot Table

To insert a pivot table:

  1. On the Insert tab, drag the Pivot component to the page. Figure 4-52 shows the empty pivot table structure.

    Figure 4-52 Inserted Pivot Table Structure

    Inserted pivot table structure
  2. Drag and drop data fields from the Data Source pane to the row, column, and data positions.

    To create multiple dimensions, precisely drop each level to its position in the pivot table structure as shown in Figure 4-53.

    Figure 4-53 Dragging Data Fields to the Pivot Table

    Draggng data fields to pivot table

    You can stack multiple dimensions in both rows and columns.

    Stacking multiple rows to pivot table
  3. Optionally resize the pivot table by clicking and dragging the handler in the lower right corner of the pivot table, as shown in Figure 4-54.

    Figure 4-54 Resizing Pivot Table

    resizing a pivot table

For more details about pivot table options, see Section 6.2, "Working with Pivot Tables."

4.11 Inserting Charts

The Mobile App Designer supports a variety of chart types and styles to present rich visualizations of your data.

After you insert a chart, you can edit the chart properties using the Chart toolbar or the Properties pane. The Properties pane extends the options available on the Chart toolbar and enables you to enter very specific custom settings for the following:

4.11.1 Inserting a Chart

To insert a chart:

  1. From the Insert menu, drag the Chart component to the page.

    By default a vertical bar chart is inserted and the Chart toolbar is displayed, as shown in Figure 4-55.

    Figure 4-55 Default Chart and Chart Toolbar

    Default chart and toolbar
  2. To change the chart type, click the Chart Type list to select the chart type required for your app. Figure 4-56 shows changing the chart type to Pie.

    Figure 4-56 Changing the Chart Type

    Changing the chart toolbar
  3. Drag the data fields from the Data Source to the appropriate areas in the chart. Where you drag a data element depends on the chart type and on the information you want to display.

    For example, a vertical bar chart includes the following options:

    • Label

    • Value

    • Series

    The chart immediately updates with the preview data, as shown in Figure 4-57.

    Figure 4-57 Dragging Data Fields to a Chart

    Dragging data fields to the chart
  4. To resize the chart, drag and drop the resize handler on the lower right corner of the chart, as shown in Figure 4-58.

    To preserve the aspect ratio when resizing a chart, press and hold the Shift key before dragging the handler.

    Figure 4-58 Chart Resize Handler

    Chart resize handler

4.11.1.1 About the Chart Toolbar

The Chart toolbar enables you to perform the following:

  • Select a different Chart Type

  • Apply a different Chart Style

  • Enable 3-D effects

  • Filter the data that is displayed in the chart

  • Manage multiple filters

  • Convert the chart to a pivot table or switch the series and dimensions values

4.11.2 Changing the Formula Applied to a Chart Measure Field

By default, the chart displays a sum of the values of the chart measure. You can change the formula applied to a chart measure field using the Chart Measure Field toolbar.

To change the chart measure field formula:

  1. Select the measure field in the chart. This displays the Chart Measure Field toolbar as shown in Figure 4-59.

    Figure 4-59 Changing the Chart Measure Field Formula

    Changing the chart measure field formula
  2. Select a formula from the Formula list.

4.12 Inserting Filters

The Filter component displays all values of a data field in a vertical or horizontal interactive list that behaves as a filter for the other components on the page. Tap a filter item to update the results in all other tables, charts, or other visualizations on the page. Figure 4-60 shows a page that displays two charts and a table. The filter component across the top of the page displays order status. Tapping an order status updates the other components to show only results for the item tapped.

Figure 4-60 Example of Horizontal Filter

Horizontal filter

4.12.1 Inserting a Filter

To insert a filter:

  1. On the Insert tab, select the Filter component.

    Selecting filter
  2. Drag the component to the design area.

    Figure 4-61 An Inserted Filter

    Inserted Filter
  3. To populate the filter list, select an element from the Data Source pane and drag it to the empty filter in the layout.

    Figure 4-62 shows a filter of Order Status values.

    Figure 4-62 A Filter Component Showing Order Status

    Filter component showing order status
  4. To change the size of the filter component in the page, click and drag the handler in the bottom right corner of the component

    Changing size of filter
  5. Customize the appearance of the filter. See Customizing Filters.

4.12.2 Customizing Filters

Use the Filter toolbar to:

Figure 4-63 shows the List toolbar

Figure 4-63 The Filter Toolbar

Filter toolbar

4.12.2.1 Change Filter Orientation

To change the orientation of the filter:

  1. Select the Filter component on the page to activate the Filter toolbar.

  2. On the Filter toolbar, select the Orientation: Horizontal or Vertical.

    Figure 4-64 shows the horizontal filter orientation.

    Figure 4-64 Changing Filter Orientation to Horizontal

    Changing the filter orientation

4.12.2.2 Customize Font and Background Styles

You can customize the filter font and background styles for selected and nonselected modes.

To customize the font and background style when no items are selected:

  1. Select the filter component in the design area to activate the Filter toolbar.

  2. Use the following commands in the Font region:

    • Font Style

    • Font Size

    • Border

    • Background Color

    • Font Color

      Figure 4-65 Customized Filter Background Color

      Customizing the filter background color

The Selected Font commands control the appearance of the item in a filter when it is selected. By default, the selected item displays as amber.

To customize the font and background style of the selected item:

  1. Select the filter component in the design area to activate the Filter toolbar.

    Filter font customization options
  2. Use the following commands in the Selected Font region:

    • Bold

    • Background Color

    • Font Color

      Figure 4-66 Customized Selected Font Background and Font Color

      Customized filter

4.12.2.3 Customize Filter Selection Behavior

By default, the selected item moves to the first position of the filter list and the nonselected items are shaded. You can change this behavior by setting the properties Hide Excluded and Keep Selection Position.

Figure 4-67 shows the difference in the display depending on the setting of the properties.

Figure 4-67 Filter Selection Behavior Based on Property Settings

Filter selection behavior

To customize the filter behavior properties:

  1. Select the filter component in the design area.

  2. Select the Properties pane on the left panel.

    Properties
  3. Under the Interactivity group of properties, set the following properties:

    Filter Interactivity properties

    Hide Excluded

    • True - hides the non-selected items

    • False - (default) non-selected items display, but are shaded

    Keep Selection Position

    • True - selected item maintains position in list

    • False - (default) selected item moves to the first position of the list

4.13 Inserting Data Fields

You can insert a data field to display in your app by simply dragging it from the Data Source pane to the app page where you want it to display. To position data fields more precisely, or to insert fields side-by side, insert a frame first.

4.13.1 Insert Data Fields

To insert a data field:

  1. Select the area in the page where you want to insert the field.

  2. Drag the field from the Data Source pane to the position in the app page.

4.13.2 Display Data Fields Side-by-Side

To display data fields side-by-side as shown in Figure 4-68, insert a Frame first to position the data fields.

Figure 4-68 Data Fields Displayed Side-by-Side

Data fields displayed side-by-side
  1. Select the area of the page to display the data fields. In this example, the area is a Tile.

  2. On the Insert menu, drag the Frame component to the page.

    Inserting a Frame
  3. In the Frame dialog, enter 1 Row and 2 Columns.

    Insert Frame dialog

    The Frame displays in the page.

    Inserted Frame
  4. Drag the data fields from the Data Source pane to the frame cells where you want the data to display.

    Inserting data fields to the Frame

4.14 Inserting Text

Use the text component to enter free-form text in the layout.

To insert text:

  1. Drag and drop the Text component from the Insert toolbar to the layout.

  2. Double-click the default inserted text to make the desired entries.

4.14.1 Displaying a Data Field in Line with a Text Item

By default, when you insert a text item to a grid cell, the text box spans the length of the grid cell.

Figure 4-69 Default Text Field Span

Default text span

To display a data field in line with the text item:

  1. Select the text box.

  2. On the Properties pane, set the Display property to Inline, as shown in Figure 4-70.

    Figure 4-70 Setting the Display Property of the Text Box to Inline

    Changing Text display to inline

You can now insert a data field inline with the text as shown in Figure 4-71.

Figure 4-71 Data Item Inline with Text Item

Data item inline with text item

4.14.2 Formatting Text

Use the Text toolbar to apply formatting to your text components. The Text toolbar is shown in Figure 4-72.

Figure 4-72 The Text toolbar

Text toolbar

The Text toolbar enables you to perform the following:

  • Set the font properties

  • Set alignment of the text in the grid cell

  • Insert predefined text items: page number, date, and time

  • Insert a hyperlink

4.14.2.1 Editing Font Properties

Use the Font group of commands to set the following:

  • Select a font style

  • Select a font size

  • Apply emphasis (bold, italic, or underline)

  • Insert a border around the text item

  • Apply a background color

  • Apply a font color

4.15 Customizing Background Images

You can add an image to an app page background or a Frame background and configure the display characteristics of the image. A background image enables you to add other app components on top of it.

To add a background image to a frame or page:

  1. Select the page or frame to enable the Page Layout toolbar or the Frame toolbar. The example in Figure 4-73 shows the Page Layout toolbar. To activate the toolbar for a Frame, click the outermost edge of the Frame in your app page.

    Figure 4-73 The Page Layout Toolbar

    Page Layout toolbar
  2. Click Select to choose an image.

    Clicking Select image command
  3. In the Insert an Image dialog, specify the source for the image:

    • 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.

    • Enter the URL for the image: Enter the URL where the image is stored.

    • Select the data field for the image URL and for the alternative text:

      Image URL: Select the field from the data that contains a URL to 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.

    Figure 4-74 Insert an Image Dialog

    Insert an Image Dialog
  4. Click Insert to insert the image to the app page. By default, the image is scaled to fit the page.

    Inserted image
  5. (Optional) Add alternative text for the image. Click the Properties pane and enter text in the Alternative Text field as shown in Figure 4-75.

    Figure 4-75 Entering Alternative Text for an Image in the Properties Pane

    Editing alternative text for an image

You can now add app components on top of the background.

4.15.1 Sizing the Background Image

To configure the size of the background image:

  1. Select the page to enable the Page Layout toolbar.

  2. Select a fit option from the menu.

    Choosing a scaling option
    • Actual Size - displays the image according to the actual pixel dimensions.

    • Fit - expands the image maintaining the scale until one dimension reaches the edge. If one dimension reaches the edge of the canvas and the other dimension has not, then that area of the canvas is not covered.

    • Fill - expands the image maintaining the scale to cover the entire canvas. If one dimension extends past the canvas for the other dimension to reach the edge, the image dimension that extends past the canvas is cropped.

    • Repeat - repeats the image at actual size to fill the canvas. Use this option to use a small image to create a pattern or texture in the background.

4.16 Setting the App Color Theme

By default apps display a black background. To display a white background for your app, edit the App theme.

To set the App theme:

  1. Select the App toolbar.

  2. From the Theme menu, select White.

    Changing App theme to white