Developing Dashboards for Mobile Devices

Skip to end of metadata
Go to start of metadata
Search in CenterView 4.0 Documentation

Because mobile devices have a limited viewing area, you must design your dashboards to accommodate the limitations of the device, mainly available screen space. Also, certain capabilities are limited on a mobile device, such as popping up KPIs, saving to PDF, saving data, downloading data, etc. This is because most mobile devices cannot use JavaScript, which is what CenterView dashboards use for their dynamic interactions.

CenterView helps you with this design effort by providing a specific method for mobile dashboard design, while still allowing you to reuse as many dashboard objects as possible from an existing dashboard intended for Web browser access. CenterView intelligently optimizes KPIs that you mark for mobile access.

This topic discusses the following information to help you develop your dashboards for mobile devices:

Mobile Dashboard Design Methods

You can design dashboards for mobile devices using either of these methods: 1) designing a dashboard for both mobile access and Web browser access or 2) designing a dashboard for only mobile access.

Designing a Dashboard for Both Mobile Access and Web Browser Access

This method lets you use dashboard objects (such as KPIs, datafunnels, Corda images, etc.) for both Web browser and mobile access. However, you must carefully design your dashboard to work in the Web browsers and on mobile devices you want to support. (See Design Best Practices.)

  1. In CenterView Builder, open the dashboard you want.
  2. In the Project Browser, click dashboard.
    If you have the File Browser open instead, click main.dashxml.
  3. In the Object Palette, click mobile-kpis and then kpi-group.
  4. In Object Properties, type the name you want for the group in the Title attribute text field.
  5. (Optional) If you want to further group your KPIs logically, add additional kpi-group tags and name them.
  6. Add KPIs to the KPI groups you want by selecting a kpi-group in the Object Browser, clicking kpi-Reference existing or kpi-Copy existing in the Object Palette, then selecting a KPI that is already in the dashboard.
  7. To test your KPIs, see Testing Your Mobile KPIs.
Note: If you select kpi-Reference existing, any changes you make to the source KPI are reflected in your mobile-KPI. If you select kpi-Copy existing, changing the source KPI does not affect the mobile-KPI. Be sure to take this difference into account when designing dashboards for both mobile access and Web browser access.

Designing a Dashboard for Only Mobile Access

This method lets you design a dashboard for only mobile access. Since dashboards for mobile devices are collections of KPIs arranged into KPI groups, you can remove other elements that are not used in a dashboard for mobile devices (e.g., banners, footers, navigation, etc.). This method works best in any of the following situations:

  • Your Web browser-accessible dashboards must be open access.
    In this case, you may want to design a dashboard that does not expose data that you do not want unauthorized users to see. (For more information, see Administering Dashboards on Mobile Devices.)
  • You want to build mobile device-specific navigation into the KPIs.
To create a dashboard specifically for mobile access,
  1. Open or create a dashboard in CenterView Builder.
  2. (Optional) If you want to clean out tags not used in a mobile-specific dashboard, delete these:
    • banner-layouts
    • footer-layouts
    • page-defaults
    • kpi-defaults
    • page-group
  3. In the Project Browser, click dashboard.
    If you have the File Browser open instead, click main.dashxml.
  4. In the Object Palette, click mobile-kpis and then kpi-group.
  5. In Object Properties, type the name you want for the group in the Title attribute text field.
  6. (Optional) If you want to further group your KPIs logically, add additional kpi-group tags and name them.
  7. Create new KPIs by clicking kpi-New, then create the KPI.
  8. To test your KPIs, see Testing Your Mobile KPIs.

Design Best Practices

Adhering to the following best practices increases the effectiveness of your dashboards for mobile devices.

  • Identify the access methods (mobile access, Web browser access, or Corda Mobile) you must support for viewing mobile-ready dashboards.
    Develop mobile-ready dashboards according to the "common denominator" of functionality available in the various access methods.
  • Focus on KPIs.
    On a mobile device screen, viewing a full CenterView dashboard in a Web browser is typically difficult because the dashboard and pages make the KPI data small and hard to read. Since mobile-ready dashboards consist of KPIs only, you can design for the mobile device screen.
  • Make KPIs small enough to fit on a mobile device screen. (For example, 480x320 for the iPhone or 916x768 for the iPad.)
    You may want to create a template for mobile KPIs.
  • If you plan to incorporate drilldowns into graphs in your KPIs, use graph types with large areas (e.g, bar, pie, and heat map graphs) for users to click.
  • Add a navigation button in KPIs to go to the KPI list (except when using Corda Mobile).
    Since the KPI toolbar actions use JavaScript and JavaScript is not available for most mobile devices, add a a button in KPIs so users can easily go to the KPI List.
  • Do not include options for logging in or out on the KPIs.
    These options are not necessary.
  • Include clear instructions on the controls and drilldown actions specific to a KPI.
    For instance, if tapping on a state on a U.S. map allows you to drill down to see more information, include a box that says something like "Tap on a state to see GDP information about that state."
  • Include clear instructions about the controls and drilldown actions specific to each KPI. For example, if tapping a state on a U.S. map lets you drill down, include text that indicates something similiar to "Tap on a state to see its GDP information." Likewise, if the KPI lets you zoom in and out, indicate this to users.
  • Controls and actions are limited to update, popup, and goto actions for a KPI or a URL; you cannot do page or dashboard actions. When you mark KPIs for mobile access, the restricted page and dashboard actions do nothing, while popup actions are automatically changed to goto actions. For information about the Drilldown Action wizard, see Drilldown Action Wizard.
    • For most mobile devices, these actions are restricted to button controls only, since JavaScript is not available for most mobile devices. This means that if you want to use controls such as drop-downs, radio buttons, etc., you must design your dashboard so that the action to set those controls is executed on a button control.
    • For Corda Mobile, these actions work on all other types of controls, such as drop-downs, radio buttons, etc. (For more information, see Accessing Dashboards on Mobile Devices.)
  • The theme for mobile KPIs uses the dashboard theme, but you can override that theme using the Server/doc_root/common/mobile/mobile.css file.
  • Mobile KPIs can be accessed from CenterView-delivered Web pages that list mobile-enabled KPIs and their dashboards and that provide a way to log in to dashboards. You can control the look-and-feel of these pages through the mobile.css file.

Design Considerations for Safari on iPad

CenterView 4.0.10 or later supports rendering dashboards, pages, and KPIs in the Safari Web browser on iPad. Corda Mobile 1.0 is not supported on iPad.

  • Develop mobile-ready dashboards for the Safari Web browser on iPad using CenterView 4.0.10 or later.
  • Follow criteria for designing mobile-ready dashboards. See Design Criteria.
  • Inform users about how to interact with mobile-ready dashboards:
    • To see a hover, tap a graph or image once.
    • To drilldown, tap a graph or image twice or tap the label of a a graph or image once.
    • Zoom in to view details or to tap line graphs, city points, etc.

Testing Your Mobile KPIs

As you are developing KPIs for mobile access, you can test them through any of the following:

  • A Web browser
  • A simulator of your target mobile devices (if available)
  • Your target mobile devices themselves

CenterView provides a way to test your mobile KPIs through a Web browser.

Make sure your KPIs display and function properly by testing them on the actual devices you plan to support or in a simulator. To test on a simulator or the mobile device, check with your device manufacturer for options. To access your mobile KPIs, see Accessing Dashboards on Mobile Devices.

Testing Mobile KPIs through a Web browser

Choose between these two options:

To test mobile KPIs from Builder
  1. In CenterView Administrator, make sure the dashboard you are testing is set to Open Access or Logged In access.
    For more information, see Register Dashboard.
  2. In CenterView Builder, open the dashboard that you have set up for mobile access.
  3. In the Project Browser, click dashboard.
    If you have the File Browser open instead, click main.dashxml.
  4. In the Object Browser, expand mobile-kpis.
  5. Select the nested mobile-kpis, kpi-group, or kpi that you want to view in a Web browser.
  6. Click the Preview button or click File > Preview.
    CenterView displays an HTML page listing the KPI groups you have set up and links to the KPIs in those KPI groups.
  7. Click the links to view and test the KPIs.
To test mobile KPIs directly from a Web browser
  1. In CenterView Administrator, make sure the dashboard you are testing is set to Open Access or Logged In access.
    For more information, see Register Dashboard.
  2. Open a Web browser.
  3. Type one of the following in the Address field, depending on what you want to test:
    Use This Address To Test This
    http://ip_address:port/corda/mobile Mobile Home page access
    http://ip_address:port/corda/mobile/html/dashlist List of dashboards available on the CenterView Server that have KPIs in mobile-kpis and kpi-group tags
    http://ip_address:port/corda/mobile/html/kpilist/dashboard List of KPIs available for a particular dashboard that has KPIs in mobile-kpis and kpi-group tags
    http://ip_address:port/corda/mobile/html/login Login access for secured dashboards available on the CenterView Server that have KPIs in mobile-kpis and kpi-group tags
    http://ip_address:port/corda/CTIPHONEAPP=true Functionality for your Corda Mobile dashboards without being on an iPhone or iPhone touch.

Other Information

  • In Corda Mobile, target="_blank" does not open a new Web browser.
  • When viewing mobile-ready KPIs using CenterView Builder, either in the Workspace or when previewing in a Web browser, KPIs display the same way they display on a mobile device.
  • In Corda Mobile, empty dashboards and groups do not appear in the KPI list view so make sure your dashboards and groups contain KPIs.

Labels

released released Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.
permalink: http://wiki.corda.com/confluence/x/ZSCs