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:

• The Oracle BI Mobile App Designer Workspace

• Adding and Editing Pages

• Editing the Cover Page

• Adding Tile Pages

• Inserting Images

• Inserting Frames

• Adding Navigation Pages

• Adding Accordion Pages

• Inserting Tables

• Inserting Pivot Tables

• Inserting Charts

• Inserting Filters

• Inserting Data Fields

• Inserting Text

• Customizing Background Images

• Setting the App Color Theme

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

Note the following features of the app designer:

• The workspace displays the canvas area as a phone or a tablet-sized screen depending on the target device type you chose. The tablet area is 1024 x 768 pixels. The phone area is 480 x 320 pixels. This design area size does not constrain the run time display. Mobile App Designer's responsive display engine detects the device screen size and adjusts the viewing area appropriately for the device an app is being viewed on.

• Use the Insert toolbar to add the components to your app.

• Contextual, component-specific toolbars provide the most commonly used commands and properties for the component that is selected in the app page. For example, when you select a chart, the Chart toolbar displays; when you select a table, the Table toolbar displays.

• The left hand pane toggles between Data Source and Properties:

  • Use the Data Source pane to select and drag data fields to the visualizations you insert to your app.

  • Use the Properties pane to modify settings for components selected in the design area.

• Preview your app at anytime during the design phase in the mobile device simulator.

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

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

  
  

• 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

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

  
  

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

4.2.4 Moving Pages

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

Figure 4-7 Moving a Page

4.2.5 Deleting Pages

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

Figure 4-8 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

   
   

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

     
     

   • 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

     
     

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

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

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

Features of tile pages include:

• Each tile is a touch point. When you associate a subpage with a tile page, tapping a tile opens the detail subpage.

• Tiles load dynamically as you scroll down.

• Tile width is based on the number of columns specified and your device type display area. You can define the number of columns up to four across.

• You can customize the tiles to include any component.

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.

   
   

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

   
   

   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

   
   

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

   
   

4. Preview your tile page to view the contents so far. Click 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

   
   

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.

   
   

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

   
   

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

   
   

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:

• Specify Columns

• Apply Filters

• Sort

• Add Stoplight Formatting

• Resize Tile Margins

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

Figure 4-20 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

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.

   
   

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.

• Apply Formatting Based on Static Values

• Apply Formatting Based on Percent Achievement

• Apply Formatting Based on Percent Growth

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.

   
   

2. In the Stoplight dialog select Values.

   
   

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.

   
   

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.

   
   

   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.

   
   

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.

   
   

2. In the Stoplight dialog select Achievement %.

   
   

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.

   
   

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.

   
   

   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.

   
   

2. In the Stoplight dialog select Growth %.

   
   

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.

   
   

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.

   
   

   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.

   
   

3. Click the value column next to Margin.

   Figure 4-22 Customizing 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:

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

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

• 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 runtime enabling dynamic insertion of an image.

To insert an image:

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

   
   

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

   
   

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

   
   

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

     
     

   • 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

     
     

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.

   
   

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

Figure 4-28 shows the inserted frame.

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

Features of frames include:

• By default, frame columns are sized equally across the insertion area and frame row height defaults to the height of one row of text.

  When you insert a component to a frame, the frame automatically resizes to accommodate the component.

• You can adjust the column width and height by either positioning the mouse pointer over the border and dragging the blue resize bar, or by changing the frame column properties in the Properties pane.

• You can insert a frame inside a frame.

• You can insert a background image to the entire frame area. See Customizing Background Images.

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

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.

   
   

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.

   
   

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:

   
   

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

• Navigation Page for Tablet

• Navigation Page for Phone

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

To insert a Navigation page:

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

   
   

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

   
   

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

   
   

   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.

   
   

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

   
   

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

   
   

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.

   
   

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

To create a navigation page:

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

   
   

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

   
   

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

   
   

   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

   
   

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

   
   

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

   
   

   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

   
   

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

   
   

   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

   
   

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

   
   

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.

• Apply Formatting Based on Static Values

• Apply Formatting Based on Percent Achievement

• Apply Formatting Based on Percent Growth

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.

   
   

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.
   

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.

   
   

   To change the default colors, see Customizing the Colors.

4. Preview your app.

   
   

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.

   
   

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.

   
   

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.

   
   

   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.

   
   

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.

   
   

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.

   
   

   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

  
  

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

To create an accordion page:

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

   
   

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.

   
   

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.

   
   

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

4. Click OK to insert the 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.

   
   

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

   
   

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

   
   

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

   
   

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

   
   

Some default formatting is applied to the table, specifically:

• By default the table includes a total row that displays the sum of the items in numeric columns. You can remove this row or edit the display and calculation applied. See Section 6.1.5, "Customizing Table Totals."

• Numbers and dates display default formatting and alignment. To change the default formatting, see Section 6.1.4.1, "Setting Table Data Formatting Options."

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 Column Header

  
  

• Column

  
  

• Total Cell

  
  

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

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

   
   

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

   
   

   You can stack multiple dimensions in both rows and columns.

   
   

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

   
   

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:

• Chart Effect

• Chart Legend

• Chart Plot Area

• Chart Title

• Chart Label

• Chart Values

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

   
   

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

   
   

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

   
   

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

   
   

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

   
   

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

4.12.1 Inserting a Filter

To insert a filter:

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

   
   

2. Drag the component to the design area.

   Figure 4-61 An 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

   
   

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

   
   

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

4.12.2 Customizing Filters

Use the Filter toolbar to:

• Change Filter Orientation

• Customize Font and Background Styles

• Customize Filter Selection Behavior

• Specify the sort order

Figure 4-63 shows the List toolbar

Figure 4-63 The 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

   
   

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

     
     

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.

   
   

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

     
     

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

To customize the filter behavior properties:

1. Select the filter component in the design area.

2. Select the Properties pane on the left panel.

   
   

3. Under the Interactivity group of properties, set the following 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

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.

   
   

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

   
   

   The Frame displays in the page.

   
   

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

   
   

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

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

   
   

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

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

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

   
   

2. Click Select to choose an image.

   
   

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

   
   

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

   
   

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

   
   

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.

   
   

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