MOBILE APPLICATIONS Starter Guide & Techniques · MOBILE APPLICATIONS Starter Guide & Techniques True Mobile Apps from an Xcelsius Dashboard. Mobile Apps TABLE OF CONTENTS Inovista

InovistaComponents

MOBILE APPLICATIONSStarter Guide & Techniques

True Mobile Apps from an Xcelsius Dashboard

Mobile Apps

TABLE OF CONTENTS

2.Inovista Copyright 2011© All Rights Reserved InovistaComponents

Introduction Quick Start

The Mobile App Builder

The Key Components 47. Other Components 48. The Microchart and Grids Suite 49. The SVG Controller and SVG Suite 50. Text Shapes Suite 51. SVG Components 52. Techniques for Mobile Applications 52. Setting up a Mobile List 52. Show/Hide a List 55. Setting up Container Windows 58. Using Swipes to Show or Hide a Window 60. Chaining Applications 62. External Data Sources 63. XML Files from a URL 64. BIWS, QAAWS and Web Service Connection 65. The InfoBurst Cache Connector 66. Setting Up Push Notifications 66. Preparation 68. Defining Notifications in Dashboards/Xcelsius 69. Using the Dashboard Reader Application 69. Loading the Application into the Dashboard Reader 72. Opening the Application from a Web Page on the Tablet 72. Customizing Application Opening with HTTP Parameters 78. Passing Data with URL Parameters Appendix I Appendix II 86. Data Connectivity Appendix III

3.

7.8.

11.

79.81.

87.

4. More Information

11. The Touch Scroll Mobile List

13. The Mobile Tree List 14. The Mobile Options Component 16. Define Split View Dashboards

18. iOS and Security Options 19. The Matrix Data Collection 21. The Mobile Slider 22. The Mobile Spinner 24. The Mobile Data Grids 25. Touch Scrolling Text and HTML Text 26. Button, Tool and Task Bars 27. Checkbox, Toggle and Radio Buttons 28. Image Masking 29. iOS Specific Components 30. The iOS Carousel 31. iOS Images 32. iOS Text Items 33. iOS Text Input 34. The iOS Web Viewer 35. The iOS Tree List 36. iOS Segmented Button, Tool and Tab Bars 37. iOS Containers 39. The Mobile Splash Screen 40. The SVG Floating Background and Background Image Window

42. The Mobile Text Input 43. The Swipe Manager44. The Mobile Chart Package 44. The Vertical and Horizontal Combo Charts 46. The Mobile Pie Chart

Mobile Apps

INTRODUCTION


Inovista provides a range of tools and components which can be used to convert an SAPDashboards (Xcelsius) to an Android, Apple (iOS) or AIRmobile application.

The Inovista Dashboard Reader takes the Xcelsius/Dashboard model definition, the ‘.xlf’ file, and uses the information in that file to create a dashboard on the fly on a mobile device.

Designer Creates Xcelsius Dashboard

The Inovista DashboardReader Converts the .xlf

The Converted Appis Displayed on the Tablet(iPad, Android or RIM)

The Xcelsius Model (.xlf)

is Placed Online

Mobile Apps

INTRODUCTION

4.

More Information

Inovista Copyright 2011© All Rights Reserved InovistaComponents

The Inovista Mobile App Builder provides a means of converting the vanilla Dashboard Reader into a custom app. A wizard like tool walks the designer through the customization process setting the colors, icons, images, text and visibility of sections of the Dashboard Reader. As the main applications are XLF dashboards, complete customization is possible.

The tools and components offer a very wide range of options, including:

In conjunction with the Inovista Dashboard Reader, a designer can create native mobile applications from Xcelsius/SAP Dashboards XLF files. The XLF files can be updated at runtime without the need to go through the app store with every enhancement or update. Interfacing with native operating system applications is readily available. For example, on an iPad, a user can open the Email, Movie and Twitter clients while transferring information to the dashboard to those apps. Additionally, it is possible to set up the dashboard to receive push notifications.

• Touch Scroll Lists that are created in Xcelsius and can be placed in the application or opened by another component such as a button. They attempt to replicate the behavior of native mobile lists. The lists can be skinned with a background image and each list item can also contain a different image.

• Floating, Draggable, Animated Background Containers (the SVG Background). This component is a container that can be dragged, moved and bounced around the screen.

• Mobile Style Sliders and Progress Bars that replicate the style and functionality of slider that is expected on a mobile device. The sliders can also be defined as progress bars.

• External Data Access. Currently there are 3 options to load data from an external source. The importation of an XML file, QaaWS and InfoBurst by InfoSol.

• Data Manipulation Component. The Matrix Data Manager provides a means of quickly relocating data around the spreadsheet.

• Text Input Simulator. This add-on is deployed to simulate objects like a combo box. The standard Xcelsius combo box does not really work in a mobile environment, so by combining the Text Input Simulator with, for example, the Touch Scroll List provides a genuine mobile look and feel.

Mobile Apps

INTRODUCTION

5.

More Information


• The Swipe Manager simulates swipe gestures for both Android, RIM and iOS devices. Swipe gestures may be up, down, left or right. One option allows the designer to increment a value in the Xcelsius spreadsheet. This means, for example, as a user continues to swipe to the right a different window can be moved into place; the window corresponding to the value in the spreadsheet.

• Long Touch Tooltips. Inovista components offer powerful custom tooltip options. On mobile devices, it is difficult to present tooltips, so we decided to implement tooltips using a long touch event. Components such as the Microcharts, Data and Tree Grids and SVG Controller all offer the capability of popping up a tooltip after a user has held down a finger on a sensitive part of the visualization for a defined period of time (default is 1/2 a second).

• Delay Load Features. Where components may take longer to load, a delay load option is included. This helps to prevent the user from looking at an empty screen where no activity is occurring. For example, the SVG Background can delay the load of all the components contained within it until the main application load has completed. The Data Grid component can stall the load of its data until the background component has become visible to the user.

• Native iOS Components. A range of components including the Vertical and Horizontal Carousel can be defined in Xcelsius but act as pure iOS components when run on an iOS device like the iPad. Please note that obviously, these features are not available on non iOS devices like an Android tablet or a PC.

• Native iOS Interactions. In the Mobile Options Manager, it is possible to create interactions with the native iOS operating system. These interactions include opening the Email, Twitter and Movie Player apps on the mobile device and passing data to those apps.

• Scalable Components. All Inovista components are created to be scalable without losing any image quality. This is a particularly useful feature in mobile devices where screen real estate is limited

• The Ability to Sub-Divide and Chain Applications. Applications on a mobile device can take a significant amount of time to load, so to help minimize this, Xcelsius dashboards can be broken down into smaller sub-sets. By using a URI Scheme, which can be defined in the Mobile App Builder, applications can be open from each other or called from an on-line or local web page.

• Shared Data. When applications share a user id and use the same certificate, data can be shared between them. This means that in a suite of applications, data available in the spreadsheet of one Xcelsius dashboard can be transferred to another application and vice versa.

Mobile Apps

INTRODUCTION

6.

More Information


• Pinch/Zoom Gestures. Two finger gestures are available and can be used, for example, to update the scale cell in an Xcelsius dashboard, allowing a user to scale maps and charts with a pinch/zoom.

• Geo Location. The current location of the Android device with a GPS capability can be pumped into an Xcelsius spreadsheet at pre-defined intervals, for example, every 500 milliseconds or every 10 minutes.

• Splash Screen. A customized splash screen can be added and shown until the application completes start up.

• Home Pages. The concept of home pages lets a designer create a suite of dashboards that act as a master dashboard which opens other dashboards while permitting the sharing of data between those dashboards.

• Open from URL. All dashboards can be opened with a URL call from within a mobile browser.

The following sections will look at how to make use of the Inovista Component range to help in creating interesting and attractive mobile applications.

MORE INFORMATION

For more information about all Inovista products, please go to:

www.inovista.com

Check in the Samples and Tutorial tabs for examples and videos that can be downloaded.

To ask a question about this document or any Inovista product, please contact Inovista with either of the following email addresses:

[email protected]@inovista.com

http://www.inovista.com/

Mobile Apps

QUICK START


Quick Start To create Xcelsius dashboards for the Inovista Dashboard Reader, take into account the following points.

IMPORTANT: Sometimes Xcelsius makes changes to the spreadsheet. If when opened in the Dashboard Reader, you see a spreadsheet format error, the spreadsheet must be opened in Excel saved as an Excel 2002 document and then re-imported to the XLF. see Appendix I for more details.

Components that are not supported by the Dashboard Reader will not be created. Only components created by Inovista and its partners will be presented. See Appendix II for a list of which components provide a best fit.

Only use the supported Excel functions. The current list is shown in the Appendix III. The supported function list will continually grow.

Functions are not very efficient and extended use will rapidly decrease performance. Where possible, minimize the use of functions. To relocate data in the spreadsheet, either manipulate data on an external server or use the Matrix Collection component which is many times more efficient than using functions like ‘VLookup’. Store larger amounts of data as embedded XML in the Matrix Collection. The data are held in RAM and this provides excellent performance.

Keep the size of the dashboards as small as possible. Use the Mobile Options component to share data between dashboards and to open those dashboards with a tap.

Mobile Apps

THE MOBILE APP BUILDER


THE MOBILE APP BUILDERThe Inovista Mobile Application Builder provides a wizard like tool that helps walk through the process of converting S.A.P Dashboards (Xcelsius)created with the Inovista Mobile Add-Ons into an Android or Apple (IOS) mobile application that will function natively on mobile devices like the iPad, iPhone or equivalent Android devices.

The App Builder allows a designer to customize the look and feel of the Inovista Dashboard Reader and embed Xcelsius Dashboards into the app. Once created, the apps can be submitted to the relevant app store or distributed internally within an organization.

There are also options to create stand-alone AIR applications that can run on an PC or Mac.

Mobile Apps



The App Builder also allows the definition of other features, for example, the creation of Push Notifications.

Examples of Custom Apps Created with the Mobile App Builder

Mobile Apps



The main features of the App Builder include:

• Quick download links and setup help for all the software tools that are needed to generate apps.

• The ability to embed one or many XLF dashboards into the app.

• The ability to customize the initial text values of the Dashboard Reader.

• The ability to customize the home/options page of the Dashboard Reader.

• The ability to install the app directly onto an iOS (iPad or Android) device from the App Builder.

• The ability to add ‘Push Notifications’ for iOS.• An options page with instructions that helps

simplify the process of creating single and multiple apps.

• Definition of URI Schemes so that apps can be called from a web page or any application that makes an HTTP call.

• Definition of properties like the application orientation (e.g. landscape, auto etc.)

• Definition of Splash Screens.• Selection and placement of application icons.• Help on adding Android and Apple certificates.• Application Generation including options to create

batch files of the generation process and define debug versions.

For more information on the Mobile App Builder, see the User Guide:http://mobile.inovista.com/downloads/MobileAppBuilder.pdf

To get hold of a trial copy of the App Builder, please contact Inovista at [email protected].

http://mobile.inovista.com/downloads/MobileAppBuilder.pdf

Mobile Apps

THE KEY COMPONENTS

11.

The Touch Scroll Mobile List


The Key ComponentsIn this section, we will take a look at some of the new components that Inovista has released to help in the creation of mobile applications and overcoming some of the limitations we have when designing touch type dashboards with Xcelsius.

We will also look at how some existing components have been upgraded to offer mobile type features.

THE TOUCH SCROLL MOBILE LISTThe Mobile List provides a list option for mobile devices with touch scroll and animation on movement. As you can see in the image below, mobile lists are highly customizable. They can contain embedded images, HTML formatting and embedded background images to create a custom skin.

Mobile Apps

THE KEY COMPONENTS

12.

The Touch Scroll Mobile List


The main options include:•ListandIDvalueswhichcanbeupdatedatruntime.•Multiplevalueselection.•BothVerticalandHorizontalorientations•Fullycustomizablelisttilesthatcanincludestandardorhtmltext,background and foreground images.•Theabilitytoembedtherequiredimagesforthelistdirectlyintothe Xcelsius dashboard SWF.•Hyperlinkcapabilityfromaclickonthelistmeaningthatalistcanbe used to open another dashboard or website.•Customizablelisttilesizesthatcanbeupdatedatruntime.•Theabilitytocustomizethelistanimation.•Thecapabilitytoseteffectsonthelist.

On touch, the lists output a value and/or an ID to the spreadsheet as defined by the designer. The list consists of customizable tiles. Each tile can contain multiple lines of standard or html text, a background image for styling and a distinct foreground image for each tile. If using foreground images, the image files can be embedded into the Xcelsius SWF file.

Mobile Apps

THE KEY COMPONENTS

13.

The Mobile Tree List


THE MOBILE TREE LIST

The Mobile Tree List is very similar to the Mobile List but adds a drill down capability. The designer defines a tree like structure in the Xcelsius spreadsheet and a user drills through the options by tapping on the required tile.

• List and ID values which can be updated at runtime.• Multiple value selection.• Fully customizable list tiles that can include

standard or html text, background and foreground images.

• The ability to embed the required images for the list directly into the Xcelsius dashboard SWF.

• Hyperlink capability from a click on the list meaning that a list can be used to open another dashboard or website.

• Customizable list tile sizes that can be updated at runtime.

• The ability to customize the list animation.• The capability to set effects on the list.

The main options include:

Mobile Apps

THE KEY COMPONENTS

14.

The Mobile Options Component


THE MOBILE OPTIONS COMPONENTThe Mobile Options component is designed solely for mobile devices and works in conjunction with the Inovista Dashboard Reader mobile application. Its primary purpose is communicate with the Tablet Operating System and provide capabilities that are not generally available in an Xcelsius dashboard.

The component is represented at design time by an icon but is not visible at runtime. In a standard Xcelsius SWF, this component has no functionality.

Create Dashboard Titles Add granulatedPinch/Zoom gestures

Share Data with Other Dashboards andOpen them with a tap

Access and ShareTablet Geo Location

Create Home Pages

Mobile Apps

THE KEY COMPONENTS

15.

The Mobile Options Component


The main options include:

• The creation of a ‘Home Page’ type Xcelsius dashboard which acts as an introductory/index dashboard in the Inovista Dashboard Reader.

• The definition of Split View Dashboards.• Manage interactions with the iOS Operating System• The definition of the title of the dashboard which will

be shown at the top of the tablet.• The ability to open other dashboards in the Inovista

Dashboard Reader.• Sends Pinch/Zoom messages to Inovista components

in the dashboard.• Access to tablet Geo Location data. This includes,

Latitude, Longitude, Altitude, Accuracy of location, Horizontal and Vertical Accuracy.

• The creation of data ranges that can be exported to other dashboards and imported from other dashboards.

Mobile Apps

THE KEY COMPONENTS


DEFINE SPLIT VIEW DASHBOARDSOne of the powerful aspects of the Mobile Options Manager is the ability to define Split View Dashboards.

A Split View Dashboard is an Xcelsius dashboard that is used as a controlling dashboard which opens other dashboards and shares core data with those dashboards.

Split View parents can be anchored to the top, bottom, left or right of the screen. When an item such as a button is selected in the Split View, the opening direction of secondary dashboard can be defined as up, down, left or right.

SecondaryDashboard

Split View Dashboard

A Split View Dashboard as a Toolbar

Mobile Apps

THE KEY COMPONENTS


Changing the Secondary Dashboard in a Split View

Secondary Dashboard sweeps down

User SelectsDashboard

Mobile Apps

THE KEY COMPONENTS

18.

iOS and Security Options


iOS AND SECURITY OPTIONS

The Mobile Options Manager also provides options to interface directly with the iOS Operating System when running on a device like the iPad. Text, Screen and Chart images can be sent to the Email and Twitter apps. A URL can be sent to Movie Player which will open over the app. Additionally, debug details can be sent to the logger on the mobile device.

Single Sign on security with a time out can be defined. The credentials are reused throughout the app whenever a data connection is required.

Mobile Apps

THE KEY COMPONENTS

19.

The Matrix Data Collection


THE MATRIX DATA COLLECTIONThe Matrix Data Manager is designed primarily for mobile devices but can equally be employed in a standard Xcelsius environment. Its primary purpose is to reduce a designer’s dependence on the extended use of Excel functions to relocate data from one part of the spreadsheet to another.

The Matrix Data Manager has options to keep the data in memory and, as such, provide a major increase in the performance of data manipulation at runtime.

The component can also be used to load external XML data. The XML data can be loaded from a web server at runtime or embedded into the application if the data is of the type that is unlikely to change.

Lookup the matchingRow or Columns andtransfer to the requiredlocation

Use the spreadsheetto select one or moreitems.

Mobile Apps

THE KEY COMPONENTS

20.

The Matrix Data Collection


The main options include:• Selection and transfer of a range of data by matching one or

more row numbers.• Selection and transfer of a range of data by matching one or

more text values in a row.• Selection and transfer of a range of data by matching one or

more column numbers.• Selection and transfer of a range of data by matching one or

more text values in a column.• Embed XML data into the Xcelsius dashboard which can then

be manipulated at runtime.• Load data from online XML files at a time defined by the

designer i.e. at startup, periodically or when an action happens in the dashboard.

• Imported XML data can be stored in memory rather than in the spreadsheet to increase performance significantly.

Mobile Apps

THE KEY COMPONENTS

21.

The Mobile Slider


THE MOBILE SLIDERThe Mobile slider provides a value selection option for mobile devices with the look and feel expected within a mobile application.

The slider has a range of customization capabilities that readily allow the component to be redefined as a progress bar if so required.

There are two versions of the mobile slider, vertical and horizontal. In a mobile device, the bullet type object is dragged by the user. When released, the sliders output the current slider value to a spreadsheet cell as defined by the designer. The main options include:

• Outputting of the selected value to a spreadsheet cell.• The ability to set the selected value using a value in a spreadsheet cell.• An increment value that can be reset at runtime using a value in a spreadsheet

cell.• The ability to set minimum and maximum values that can be reset at runtime

using values in spreadsheet cells.• Fully customizable look and feel with options to change colors, gradients,

transparencies and the fonts of any visible text.

Mobile Apps

THE KEY COMPONENTS

22.

The Mobile Spinner


THE MOBILE SPINNERThe Mobile Spinner provides a spinner type option for mobile devices with touch spin and animation on movement. As you can see in the image below, mobile spinners are highly customizable. They can contain embedded images and HTML formatting.

Mobile Apps

THE KEY COMPONENTS

23.

The Mobile Spinner


On touch, the spinner outputs a value and/or an ID to the spreadsheet as defined by the designer. The spinner consists of customizable tiles. Each tile can contain multiple lines of standard or html text and a distinct foreground image for each tile. If using foreground images, those image files can be embedded into the Xcelsius XLF file which can be picked up by the Inovista Dashboard Reader.

The main options include:• List and ID values which can be updated at runtime.• Fully customizable tiles that can include standard or html text and foreground

images.• The ability to embed the required images for the spinner directly into the Xcelsius

dashboard XLF.• This is an ideal component for a mobile dashboard home page.

Mobile Apps

THE KEY COMPONENTS

24.

The Mobile Data Grids


THE MOBILE DATA GRIDSThe Mobile Data Grids, Vertical and Horizontal, have been developed to display tabular data in a mobile device as efficiently as possible. The main goal of these components is to be able to present large amounts of data and allow the user to touch scroll through that data in exactly the same way as a mobile list without experiencing any time lags.

The main options include:• Very, very fast performance for mobile device scrolling.• Fully customizable rows and headers that can be

formatted as text, numbers or dates.• Highlight of selected row.• Output of selected column and/or cell value on user tap.• 3D effects for open/close/show/hide.

Mobile Apps

THE KEY COMPONENTS

25.

Touch Scrolling Text and HTML Text


TOUCH SCROLLING TEXT AND HTML TEXTThe Scrolling Text and Scrolling HTML Text components allow a user to touch scroll through a textbox which can be opened as a popup or used as standalone text.

The main options include:• Very, very fast performance for mobile device scrolling.• Usage of background images to decorate the component.• Ability to use HTML to format the text.• Definable borders and background filters.• 3D effects for open/close/show/hide.

Mobile Apps

THE KEY COMPONENTS

26.

Button, Tool and Task Bars


BUTTON, TOOL AND TASK BARSMobile devices make extensive use of Button Bars, Toolbars and Tab Bars. The Inovista Button Bar, Toolbar and Tab Bar offer developers a means of adding these features to their dashboards. These components will equally function in a standard PC environment.

These components provide a means of offering a user a selection from a range of options while only allowing one selection at any given time. The Button Bar is used to select from related options and can contain images or text but not both at the same time. The Toolbar can be used to open a subtask, for example, calling a Mail Client popup. The Toolbar can only contain images. The Tab Bar is typically used to switch between views. In the case of the Inovista Dashboard Reader, this would mean switching between different split views (each view containing a different Dashboards/Xcelsius) dashboard. The Tab Bar contains both images and text.

Mobile Apps

THE KEY COMPONENTS

27.

Checkbox, Toggle & Radio Buttons


CHECKBOX, TOGGLE AND RADIO BUTTONSThe Mobile Checkbox, Toggle Button and Radio Buttons provide selection components for a mobile device with both the functionality and the look and feel expected when using these components on a mobile device. They come with familiar Xcelsius style functionality.

Mobile Apps

THE KEY COMPONENTS

28.

Image Masking


IMAGE MASKINGThe Advanced Image component in the Advanced Text Shapes Suite includes an Image Mask tab in its Property Sheet. By masking 2 images a designer can use spreadsheet data values to create charts based on those images. To do this, the amount of masking on the covering images is adjusted as the value in the spreadsheet is updated. Effects can be played as the data value changes by adjusting the duration of the masking process.

Mobile Apps

THE KEY COMPONENTS

29.

iOS Specific Components


iOS SPECIFIC COMPONENTS Using the various iOS component options in the Inovista Mobile Applications Suite, it is possible to create components that run as native components on an iOS device. This allows a designer to take advantage of certain aspects of the operating system, for example, the use of effects such as page curl up or curl down. These components include:

• The Horizontal Carousel• The Vertical Carousel• The iOS Switch and Slider• A Basic iOS Image• A iOS Multi Image that changes its image based on defined logic

and can also be used as a button.• An online iOS Image• Labels and Text Areas• Text Input and Text Area Input• Webview for adding internal web pages into the app.• The Segmented Control, Tab Bar and Tool Bar• Background Containers including View Controllers and Popovers

Mobile Apps

THE KEY COMPONENTS

30.

Carousel - iOS Specific Components


THE IOS CAROUSELThe iOS Carousel provides the designer with the capability of presenting lists of text and images in a wide range of carousel formats. The lists have spinner like functionality in that they continuously circulate through the available items. Carousels can be both vertical and horizontal. Each item in the Carousel can be presented as text, an image or both.

Carousels can also be defined to behave as standard list type components. For a list, a selected and un-selected background image can be specified.

Mobile Apps

THE KEY COMPONENTS

31.

iOS Images - iOS Specific Components


iOS IMAGESThe iOS Image components offer native iOS image capabilities to designers. The images can be pinch zoomed and panned, they can be loaded over the web, embedded into the Xcelsius XLF or into the mobile app itself. A single image component can be updated at runtime to present a range of different images. Animation effects such as curl and flip that occur when an image changes or is hidden or shown can be defined.

Images can also listen for swipes and taps and therefore, act as buttons. Button options include multi toggle and increment.

Image Updated on Tap with Flip AnimationImage Sets Spreadsheet Value when Changed

Image Downloaded with Curl Animation

Mobile Apps

THE KEY COMPONENTS

32.

iOS Text Items - iOS Specific Components


iOS TEXT ITEMSThe iOS Text components offer native iOS text capabilities to designers. Native features such as ‘Copy’ and ‘Select All’ are automatically available.

Text fonts, sizes, shadows, backgrounds and borders can all be defined and can equally be updated at runtime.

Text can also listen for user taps and therefore, act as buttons. Button options include multi toggle and increment.

iOS Label Defined as a ButtonTapping the Button Outputs Values to the Spreadsheet

iOS Text Area Accessing Native iOS Capability

Mobile Apps

THE KEY COMPONENTS

33.

iOS Text Input - iOS Specific Components


iOS TEXT INPUTThe iOS Text Input components offer native iOS text input capabilities to designers. Native features such as ‘Copy’ and ‘Select All’ are automatically available. Advanced features such as text entry by voice are also available if it is supported on the iOS device.

Text fonts, sizes, backgrounds and borders can all be defined and can equally be updated at runtime.

Text can also listen for user taps and therefore, act as buttons. Button options include multi toggle and increment.

iOS Text InputStandard and Password Input

Mobile Apps

THE KEY COMPONENTS

34.

The iOS Web Viewer - iOS Specific Components


THE IOS WEB VIEWERThe iOS Web View component allows a designer to include web pages internally within an SAP Xcelsius/Dashboard application when it is running in the Inovista Dashboard Reader. The designer sends a URL to the application (including any http parameters if required) from the Xcelsius document and the Web View will open that URL without needing to open the mobile device Brower application. The Xcelsius application and web content can then interact freely at runtime.

The web pages can be of any type including HTML 5 based applications. This means, for example, a designer can take advantage of external charts, open them within the mobile application and exchange data with them.

The iOS Web View is a native iOS component that uses the native browser capabilities of the iPad and iPhone, hence, it will be apply to provide any functionality that the native browser provides.

N.B. This component only functions when run in the Inovista Dashboard Reader.

An iOS Web View in a View Controller (created in an iOS Background Container)

Mobile Apps

THE KEY COMPONENTS

35.

The iOS Tree List - iOS Specific Components


THE IOS TREE LISTThe iOS Tree List provides a drill-down list option for mobile devices with touch scroll and animation on movement.

The component is based on the standard iOS Tree View that is commonly used in iPhone and iPad applications. The lists can be either hierarchical or simple lists. Both provide vertical scrolling and options for multiple selections. Each tile can include custom icons that can be placed on the left or right hand side of the cell.

Mobile Apps

THE KEY COMPONENTS

36.

iOS Segmented Button, Tool & Tab Bars - iOS Specific Components


iOS SEGMENTED BUTTON, TOOL AND TAB BARSMobile devices make extensive use of Button Bars, Toolbars and Tab Bars. The Inovista iOS Segmented Button Bar, Toolbar and Tab Bar offer developers a means of adding these features to their dashboards. These components will only function correctly on an iOS device in an app created by the Inovista Mobile App Builder.

These components provide a means of offering a user a selection from a range of options while only allowing one selection at any given time.

The Segmented Button Bar is used to select from related options and can contain images or text but not both at the same time.

The Toolbar can be used to open a subtask, for example, calling a Mail Client popup. The Toolbar can only contain images.

The Tab Bar is typically used to switch between views. In the case of the Inovista Dashboard Reader, this would mean switching between different split views (each view containing a different Dashboards/Xcelsius) dashboard. The Tab Bar contains both images and text.

Mobile Apps

THE KEY COMPONENTS

37.

iOS Containers - iOS Specific Components


iOS CONTAINERSThe Inovista iOS Background component allows designers to create native iOS containers that can add other iOS components. Once added, the child components are controlled by the container. For example, if the container is moved, shown or hidden, all the child components will also be moved shown or hidden.

The Image Background and Standard Background have the same functionality a but the Image Background uses a ‘PNG’ image as its base.

On an iOS device, the backgrounds can be presented as View Controller or Popover types. If View Controller is defined, the background opens as a full iOS screen with a close button and title. If Popover is defined, the background is wrapped in the iOS Popover container with an arrow pointing to the last location of a user touch.

A Standard Container with iOS Components Becoming Visible with Flip Animation

The main features include:• The background acts as a container for other Inovista iOS components. • Backgrounds can be standard, View Controller or Popover types.• A full range of effects that are customizable within the Xcelsius property

editor, for example flip and curl transitions on hide or show.• Up/Down/Left/Right swipe gestures can be detected and values sent to the

spreadsheet based on direction of the swipe.• When the background is hidden/closed, a value can be sent to the spreadsheet.

Mobile Apps

THE KEY COMPONENTS

38.

iOS Containers - iOS Specific Components


An iOS Container as a View Controller Containing an iOS Web View

An iOS Container as a Popup Containing an iOSCarousel List (iPad only)

Mobile Apps

THE KEY COMPONENTS

39.

The Mobile Splash Screen


THE MOBILE SPLASH SCREENThe Mobile Options component is designed solely for mobile devices and works in conjunction with the Inovista Dashboard Reader mobile application. It presents to the user of a mobile device an image that displays the moment the dashboard has initialized. As soon as the dashboard is ready to display its first components, the splash image disappears.

Mobile Apps

THE KEY COMPONENTS

40.

The SVG Floating Background & Background Image Window


THE SVG FLOATING BACKGROUND AND BACKGROUND IMAGE WINDOWThe SVG Background is an existing Inovista product that has been updated for use in mobile devices. This component is critical in providing the look and feel of a true mobile environment.

The SVG Background component allows designers to import artwork to create a background image which can contain other components. The container (and all the components it contains) can be rescaled, relocated on the dashboard by dragging or made visible or invisible. This allows a dashboard designer to create and deliver completely new functionality, for example, control panels, toolbars, and popup windows or help screens. Edit existing or create new SVG images and then convert them to an Xcelsius component using the Inovista SVG parser.

The main features include:• The background acts as a container for other components. This may include

maps or images from the SVG Controller, buttons, shapes, text and titles, Micro Charts and Grids and other SVG products.

• Completely customizable look and feel via an SVG editor such as Adobe Illustrator or Inkscape

• The ability to drag a background around the dashboard using finger drag.• Runtime scalability which also scales the components that it contains (Scaling

for Inovista components only).• A full range of effects that are customizable within the Xcelsius property editor,

for example wipe, bounce, move and zoom transitions on hide or show.

Mobile Apps

THE KEY COMPONENTS

41.

The SVG Floating Background & Background Image Window


The Background Images Window functions in exactly the same way as the SVG Floating Background but uses PNG images instead of SVG.

One of the main uses for this component is to create visualizations like the iPad popover tool.

Mobile Apps

THE KEY COMPONENTS

42.

The Mobile Text Input


THE MOBILE TEXT INPUTThe Mobile Text Input component has been created specifically to address the problem that Xcelsius text input components do not really provide their expected functionality. Combo Boxes do not work at all, lists only scroll with a scroll bar and text input fields do present the soft keyboard, but it is difficult to remove once showing.

The Text Input is delivered with a very powerful range of property editors allowing:

• An optional customizable image located adjacently, used to replicate the look of a combo box.

• Extensive Look & Feel Editing including Color Gradients• Behavioral Effects • Filter Effects such as Beveling and Drop Shadows• The Ability to Perform Activities on a Mouse Click• A Full Background Editing Capability• Colors, Rotation Angles, Heights, Widths etc all Definable

from Spreadsheet Values• Advanced Alert Effects

This component is a direct extension of the Text Input add-on in the Inovista Text Shape Suite. The component only populates text from a spreadsheet value, data cannot be entered directly. Touching the Text Input fires a text event which can be used to open an Inovista Mobile List or text box. Its main use is to replicate the look and feel of objects like a combo box while avoiding the pitfalls of the standard Xcelsius components.

Mobile Apps

THE KEY COMPONENTS

43.

The Swipe Manager


THE SWIPE MANAGERThe Swipe Manager provides swipe gesture functionality to all Xcelsius dashboards whether on a mobile Android or iOs device or any other hardware that supports Xcelsius. It does this by reacting to rapid movements on the screen and then reporting that value to a spreadsheet cell in the Xcelsius dashboard.

Up, down, left and right swipes are all recognized and options in the property sheet allow the designer to react in different ways to each type of swipe gesture.

Swipe values can be incremented, so for example, the first time a user swipes to the right, a ‘1’ is placed in the spreadsheet, the second time a ‘2’ and so on. This can then be used in a variety of ways - a different window can be pushed into place depending on the value in the cell, a value in the dashboard could be updated based on the cell value etc.

An additional feature of the Swipe Manager is that it provides options for suppressing the parent scroll bars on the main dashboard. Mobile devices do not generally show application scroll bars.

The main options include:• The ability to recognize up, down, left and right swipes.• Output a fixed or incremented value to the Xcelsius spreadsheet depending on the type

of swipe.• Definition of the maximum time a motion could be considered a swipe.• Definition of the minimum percentage across the screen a motion must move before it

is considered to be a swipe.

Mobile Apps

THE MOBILE CHART PACKAGE

44.

Vertical and Horizontal Combo Charts


THE MOBILE CHART PACKAGEThe mobile chart package has been designed specifically for mobile performance and provides very dynamic components that can be modified in many ways at runtime.

THE VERTICAL AND HORIZONTAL COMBO CHARTSThe Mobile Combination Chart has been designed primarily to add charting facilities for mobile devices. It will, however, also work with mostly the same functionality in a standard Xcelsius dashboard.

The charts are available in both horizontal and vertical forms and offer a very dynamic means of presenting charts allowing a user to change many aspects of the chart at runtime including plot axis, chart type and the ability to drag a series on or off a chart. In fact, most chart properties can be controlled by a user.

N.B. From Dashboard Designer FP3, complete functionality should be available.

The vertical chart offers the ability to present individual or any combination of the following charts:• Line• Column• Stacked Column• Area• Stacked Area• Plot

Mobile Apps


45.

Vertical and Horizontal Combo Charts


The horizontal chart offers the ability to present individual or any combination of the following charts:• Line• Bar• Stacked Bar• Plot

The chart type for each series can be updated at runtime by offering the user a selection list.

The component is available as an Xcelcius© add-on and comes with a very powerful range of property editors allowing:• The Ability to Drag Series on and off the Chart• The Ability to Drag Series to an Opposing Axis• Extensive Look & Feel Editing• Behavioral Effects including Series Effects• Alerting• Axes• Legends• User Click Management which will allow for Simulation of Drilling

Mobile Apps


46.

The Mobile Pie Chart


THE MOBILE PIE CHARTThe Mobile Pie Chart has been designed primarily to add charting facilities for mobile devices. It will, however, also work with mostly the same functionality in a standard Xcelsius dashboard.

The chart offers a very dynamic means of presenting proportional information allowing a user to change many aspects of the chart at runtime including inner radius to create a doughnut, exploding all or individual slices and data update effects. In fact, most chart properties can be controlled by a user.

The component is available as an Xcelcius© add-on and comes with a very powerful range of property editors allowing:

• The Ability to Explode an Individual Slice• The Ability to Explode all Slices• The Ability to Create Doughnut Charts• Extensive Look & Feel Editing• Behavioral Effects including Series Effects• Legends

Mobile Apps

OTHER COMPONENTS


OTHER COMPONENTSMany of the existing Inovista components are particularly suited to mobile devices and most have been upgraded to include features that are useful on these devices.All Inovista components are scalable, the visualization width and height controlled by a single Xcelsius property. This enables them to respond to a pinch/zoom gesture.

A popular feature of Inovista components is the ability to create custom tooltips, however, a touch screen does not really lend itself to a mouse rollover. This inhibits how tooltips can be presented. To get around this problem, we have added an option to present tooltips on a long touch. So when a user holds down their finger on a chart or chart item for a certain period of time (the default is half a second), the tooltip will show. A tap on the tooltip will make it disappear.

Mobile Apps

OTHER COMPONENTS

48.

The Microchart & Grids Suite


THE MICROCHART AND GRIDS SUITEThe Microchart and Grids suite provides an ideal means of maximizing the usage of the limited screen size of a mobile device.

For mobile, a number of enhancements have been added. • Scroll Bars can be hidden• Grids and Tree can be scrolled by touch• Touch Tooltips have been implemented• Zoom in/out can be managed by pinch/zoom gestures or by adding expand/

shrink buttons

An Inovista Data Grid on an Android Tablet

Mobile Apps

OTHER COMPONENTS

49.

The SVG Controller & SVG Suite


THE SVG CONTROLLER AND SVG SUITEThe SVG Controller and Components have also been updated to work more effectively on mobile. SVG is designed primarily to scale and this works very well when deployed to a mobile device.

The enhancements for SVG products include:• Scroll Bars can be hidden in the SVG Controller• The SVG Background can be touch dragged about the dashboard• Touch Tooltips have been implemented for the SVG Controller• Zoom in/out can be managed by pinch/zoom gestures or by adding

expand/shrink buttons

SVG Components on an iPad

Mobile Apps

OTHER COMPONENTS

50.

Text Shapes Suite


TEXT SHAPES SUITEThe Text Shape Suite also offers a range of features that help in defining the mobile experience.

All components may be defined to accept mouse clicks and change spreadsheet values, they can also be used as selectors such as standard, toggle, increment or repeater buttons. They can be dynamically relocated at runtime.

The Image component allows a designer to embed multiple images. This can then be used as an image toggle button - or even a multi-select button where each time the user taps the button, it changes the view image and sends a different value to the spreadsheet.

Another interesting feature is the ability to update values on an external value change. This helps to get around a problem that consistently arises in Xcelsius - properties not toggling correctly.

Mobile Apps

OTHER COMPONENTS

51.

SVG Components


SVG COMPONENTSThe SVG Components Suite contains a range of highly customizable add-ons that can act as indicators or control objects in a mobile device.

Each component is based on SVG artwork, so the look and feel can be completely changed in vector editor software like Illustrator or Inkscape.

Mobile Apps

TECHNIQUES FOR MOBILE APPLICATIONS

52.

Setting up a Mobile List


TECHNIQUES FOR MOBILE APPLICATIONSThis section is not intended to be a complete guide, rather an introduction on how to go about building applications for mobile devices. Hopefully, the idea is to give you enough information to get started.

SETTING UP A MOBILE LISTSetting up the list as a standard list, a list that shows on a click on a button or simulated combo box is important in maximizing the use of the small screen. Unless the list is the focus of the dashboard, there is rarely a need to have a list always visible.

SHOW/HIDE A LISTIn this example, we will use an Enhanced Text component from the Text Shapes Suite to create a button that will popup open a Mobile List when created. Drag the text component onto the Xcelsius canvas, set its text value (remember that the fonts need to be much larger than for a PC application) and define a background (Appearance/Background tab). Then add a Drop Shadow filter.

The resultant button should be as follows:

Mobile Apps


53.



In the ‘Behavior/Advanced Options’ tab, set up the toggle values so that when the text/button is clicked the values change. These values will be used to show/hide the Mobile List.

If you would like the button to show some kind of effect e.g. a glow or fade, that can be setup in the ‘Behavior/Effects’ tab.

Once the button is completed, drag a Mobile List onto the canvas and setup the values, IDs and images as required.

To show the list based on the button click, we need to define the visibility of the list to be based on the output values defined above.

Mobile Apps


54.



In the list ‘Behavior/ Click Visibility’ tab, select the ‘Test Visibility’ option so that visibility can be changed. Then link the visibility status to the output option of the button and key to the relevant input cell.

If you want the list to disappear on selection, check the ‘Hide on Select’ option.

If you want the list to play an effect on open or close, define it in the ‘Behavior/Effects’ tab.

Mobile Apps


55.

Setting Up Container Windows


SETTING UP CONTAINER WINDOWSAs mentioned in a prior section, the SVG Floating Background acts as the container, it can be moved, bounced and dragged into a predefined location. So, if you want to replicate the behavior of an iPhone/iPad app where a window moves into place from the right on a button click or swipe, this is the component to use.

(See the product documentation of how to change the background image and how to add contained components.)

In this section, we will look at adding various effects that mimic the behavior viewed in mobile devices.

Bounce a Window into Place with a Swipe

Mobile Apps


56.



The images below show the effects that are played for the help screen in the ‘Harrys’ demo application. The SVG Background contains an icon and the help text. The show and hide options work in conjunction with the settings in the ‘Visibility’ tab. When the background is set to visible, the ‘Show’ effect is played. When set to invisible, the ‘Hide’ effect is played.

Bounce a Window into Location Bounce a Window out of Location

We can see in the show that the start point for the effect ‘xFrom’ is -960. This means the top left of the component is placed 960 pixels to the left of the dashboard. As the background is less than 960 pixels wide, it is completely invisible. Once a set visible message is sent to the background, the ‘Move’ effect will send it for the time period defined in ‘Duration’ to the ‘xTo’ location i.e. 25 pixels from the left of the dashboard. The ‘Duration’ property is defined in milliseconds, so 500 milliseconds is half a second. Secondary effects are created in the ‘Easing’ function at the bottom. In this case, a ‘Bounce’ effect is added to make it look like the window bounces when it becomes visible.

When hiding the window, just reverse the process.

Mobile Apps


57.



Next setup the visibility options in the ‘Visibility’ tab.

In the next section, we will look at using a swipe gesture to show and hide the window.

Mobile Apps


58.

Using Swipes to Show or Hide a Window


USING SWIPES TO SHOW OR HIDE A WINDOWAs we want the help window set up in the previous section to show on a swipe right and hide on a swipe left, we only need to define those 2 options in the Swipe Manager.

Drag a Swipe Manager onto the canvas and open the property sheet.

Select the ‘Use Right Swipe’ and ‘Use Left Swipe’ options. What we now want to happen is that the cell that controls the visibility of the SVG Background Help screen is changed when we swipe the screen either to the left or right.

Mobile Apps


59.

Using Swipes to Show or Hide a Window


What the Swipe Manager considers a valid swipe can be refined in the ‘Behavior’ tab. Set the upper limit for the duration of a motion considered a swipe using the ‘Max Time Allowed for Swipe’ editor. This value is in milliseconds, so 500 (the default) is half a second.

So, if on a right swipe, we want the window to show, we can define the show value as the source ‘Output Value’ we are going to output - this is in cell ‘E2’. When a right swipe is recognized, we then place that value into the cell ‘D2’. This will mean the Background will become visible and play the move effect defined in the last section.

To make the Background disappear, we just reverse the above process using a left swipe.

We can then refine how the swipe will work in the ‘Behavior’ tab.

Still in the ‘Behavior’ tab, set the minimum percentage of the screen the gesture motion must cover to be considered a swipe - the default is 50%.

Mobile Apps


60.

Changing Applications


CHAINING APPLICATIONSBy chaining applications, we mean that we can break an Xcelsius dashboard down into smaller sub-sections (or use completely different dashboards if required). We can then open those dashboards from a controller application or from each other.

The Mobile Options Component allows us to open other applications from an application in addition to sharing data between them.

When a URL is placed in the ‘Application URL’ editor, an attempt is made to load that URL and open the dashboard it represents.

Mobile Apps


61.

Changing Applications


Sharing data between applications is defined in ‘Shared Data’ tab.

To export data values from the spreadsheet of this dashboard, enter a unique key name in the ‘Key Name for the Data’ editor and select the range of data to export in the ‘Range to Export’ editor.

To import data, enter the unique key name that was defined in another dashboard in the ‘Key Name for the Data’ editor and send this data to the range defined in the ‘Import to Range’ editor.

Mobile Apps

EXTERNAL DATA SOURCES



There are 4 methods of supplying external data to the Inovista Dashboard Reader:

1. XML files from a URL2. Business Intelligence Web Services (BIWS)3. Query as a Web Service (QAAWS)4. Standard Web Services5. InfoSol’s InfoBurst

Mobile Apps


63.

XML Files froma URL


XML FILES FROM A URLThe Matrix Data Manager Component includes an option to import XML data from a URL. The data must be in the format as shown in the list below, a main ‘data’ tag which contains ‘row’ tags which in turn contain ‘column’ tags.

<data><row><column>66</column><column>88</column><column>12</column><column>69</column></row>

<row><column>55</column><column>98</column><column>33</column><column>44</column></row><row></data>

In the Matrix Data Manager, select ‘XML Data URL’ as the source data and point to a URL. The URL can be manually entered or dynamically loaded from a spreadsheet cell. The incoming data can then be directed to a spreadsheet range.

Mobile Apps


64.

BIWS, QAAWS and Web Service Connection


BIWS, QAAWS AND WEB SERVICE CONNECTIONThe Inovista Dashboard Reader will accept data input from BIWS, QAAWS and Web Service Connections defined in Xcelsius. There is no additional effort on the part of the designer, simply define the connection in the ‘Data Manager’ in Xcelsius and the Dashboard Reader will replicate its functionality on a mobile device.

PLEASE NOTE: If you are using a non QAAWS Web Service Connection, the XML data sent to the Dashboard Reader must be in the Row/Column format as follows:

<row><column>66</column><column>69</column></row>

<row><column>55</column><column>44</column></row><row>

Mobile Apps


65.

The InfoBurst Cache Connector


THE INFOBURST CACHE CONNECTORThe InfoSol connector libraries have been incorporated into the Inovista Dashboard Reader. As for QAAWS and Web Service Connections, define the connection in Xcelsius and the Reader will replicate its functionality.

Mobile Apps

SETTING UP PUSH NOTIFICATIONS

66.

Preparation


SETTING UP PUSH NOTIFICATIONSThe Apple Push Notification service (APNs) enables third-party application servers to send notifications to Apple iOS devices. You can take advantage of this capability when creating apps using the Dashboard Reader when built with the Mobile App Generator.

There are options to create notifications as alerts and/or badges. Additionally, custom notification sounds can be included.

PREPARATIONBefore defining notifications for the app, you must enable push notifications in the provisioning profile. You will also need a certificate for the third-party server that will send the notification data.

For more details, see the Apple website. The Urban Spaceship website also has good documentation on this process. See: http://docs.urbanairship.com/build/ios.html#set-up-your-application-with-apple

In order to enable the app on the Dashboard Reader to accept notifications, the Dashboard Reader must be generated with the Mobile App Builder. Don’t forget to use the provisioning profile that has notifications enabled.

In the ‘Options’ tab of the Mobile App Builder, find the ‘Push Notification’ section and select either ‘development’ or ‘production’ depending on the type of notification to be created.

Most services will require a user id and password to enable notifications for a device. These are defined in the ‘Dashboard Reader’ tab of the Mobile App Builder.

Find the ‘Push Notification User’ and ‘Push Notification Password’ options in that tab and enter the correct values.

Note that these values will encrypted.

http://docs.urbanairship.com/build/ios.html#set-up-your-application-with-apple

Mobile Apps



Push Notifications in the Options Tab

Notification User and Password in the ‘Dashboard Reader’ Tab

Select a Provisioning Profile Enabled for Notifications in the ‘Create App’ Tab

Mobile Apps


68.

Defining Notifications in Dashboards/Xcelsius


DEFINING NOTIFICATIONS IN DASHBOARDS/XCELSIUSDrag a ‘Mobile Options’ component onto the Xcelsius canvas. Then open the ‘iOS Options/Push Notification’ tab.

Note, that the notifications only need to be setup in one Mobile Options component even if many are used in the application.

To allow notifications, select the ‘Use Notifications’ checkbox.

Select the type of alert with the ‘Use Alert’, ‘Use Badge’ and ‘Use Sound’ options. One or more of these options can be selected.

To receive notifications, a notification server must be contacted. Enter the name of the server in the ‘Server Name’ editor. A typical name would be ‘go.urbanairship.com’.

A URL for the tokens from the notification server is added in the second ‘Server Name’ editor. A typical value would be ‘https://go.urbanairship.com/api/device_tokens/’. The app will add the token to the end of this URL.

Mobile Apps

USING THE DASHBOARD APPLICATION READER

69.

Loading the Application into the Dashboard Reader


USING THE DASHBOARD READER APPLICATION

LOADING THE APPLICATION INTO THE DASHBOARD READERThe vanilla Dashboard Reader is freely available from one of the App Stores. Once the dashboards have been created, the dashboards can be loaded from the Options Panel.Enter the URL of the XML file with the home page definition in the ‘Home Pages URL’ text field. Typically, the home page is used to open other dashboards but equally, it could be a stand-alone app.

If no home page file has previously been selected, you will see the following message when opening the app and you will be transferred directly to the ‘Options’ tab. Tap ‘OK’ to remove the message.

Mobile Apps


70.



The home pages are defined in an XML file which is opened by the reader with a URL link. Enter the URL into the ‘Home Pages URL’ field in the reader and tap the ‘Load’ button.

Once loaded, each home page defined in the XML file should be visible in the ‘Select Home Page’ list.

To open one of the home pages, tap on the item in the list. If the dashboard has not already been downloaded, you will be prompted with a dialog requesting permission to download that dashboard.

If ‘Yes’ is selected, the reader will attempt to download the dashboard and open it in the main tab.

The XML file that defines the home pages is basic in its structure. The outer tag is ‘Home Pages’ with an inner ‘Home Page’ for each page that will appear in the list.

Each ‘Home Page’ tag has three sub tags:1. Application Name: The name of the application that is shown in the list2. ApplicationXlfURL: The URL of the dashboard home page - the ‘.xlf’ file created in Xcelsius that defines the home page.3. ApplicationImage: This is not yet in use, but will be used in future versions to add an image to the list.

Mobile Apps


71.



<?xml version=”1.0” encoding=”utf-8”?><HomePages> <HomePage> <ApplicationName>Dashboard Page</ApplicationName> <ApplicationXlfUrl>http://www.inovista.com/data/mobile/compHomePage.xlf</ApplicationXlfUrl> <ApplicationImage>http://www.inovista.com/data/app1.png</ApplicationImage> </HomePage> <HomePage> <ApplicationName>Data Sources</ApplicationName> <ApplicationXlfUrl>http://www.inovista.com/data/mobile/dataSource.xlf</ApplicationXlfUrl> <ApplicationImage>http://www.inovista.com/data/app2.png</ApplicationImage> </HomePage> </HomePages>

To Reset the Home Page and force a new download for the current home page, tap the ‘Reset Home Page’ button.

To delete the current home page and all subsidiary files, tap the ‘Delete Current Home Page’ button.

Mobile Apps


72.

Opening the Application from a Web Page on the Tablet


OPENING THE APPLICATION FROM A WEB PAGE ON THE TABLETThe application can be accessed directly from a web page on the tablet using a technique called URI Schemes. Each Inovista Dashboard Reader application type has its own scheme that will open the app when call from the browser:

Http Parameter Usageloadurl The URL of an Xcelsius dashboard. If the dashboard

has already been downloaded by the user, it will open the dashboard in the home tab.Professional version only.

homepagexml The URL of the XML page that defines a group of home pages for the professional dashboard reader. The home page URL will be called on opening the app and the list populated if available. Professional version only.

Dashboard Reader Professional: inovista-dashboard

Dashboard Reader Standard: inovista-std

Dashboard Reader Debug: inovista-debug

Therefore, to open the application at the latest home page, you could add a link as follows to your html page:

<p>Link 2 <a href=”inovista-dashboard://”>Open the Dashboard Application</a></p>

Note that most tablet browsers accept a URI Scheme as a link in the html but not in the main browser address bar. Equally, calling the URI Scheme from a PC browser will generate an error.

CUSTOMIZING APPLICATION OPENING WITH HTTP PARAMETERSBy adding parameters to the URL, the Dashboard Reader will initialize in different ways. Note that certain options are only supported by the professional version.

Mobile Apps


73.



Http Parameter Usagehomepagexlf The URL of the Xcelsius dashboard to load. Combine

this with the ‘ homepagexml’ parameter to select from the list in that parameter. Professional version only.

optionsmsg The message that will be shown to the user on startup if there are no home pages in the case of professional or dashboards in the case of standard.

The default is :“ There is no data to create a home page! Please add a link to home page details.”

showhelp Whether or not to show the help button in the Options tab. Use ‘Y’ or ‘N’

optionshelp The message that will be shown in the help popup in the Options tab.

The default is :

“Enter the URL containing the required Home Page and click ‘Load’. Then select a home page from the list. Click one of the example buttons below for a sample.\nYou can download the Xcelsius Component Add-ons and documentation at ‘www.inovista.com’”

helptext1 The text that will be shown in the first button in the help popup in the Option tab. If blank, the button will not be shown.

Default is: ‘Example 1’helptext2 The text that will be shown in the second button in the

help popup in the Option tab. If blank, the button will not be shown.

Default is: ‘Example 2’

Mobile Apps


74.



Http Parameter Usagehelptext3 The text that will be shown in the third button in the


Default is: ‘’helptext4 The text that will be shown in the fourth button in the


Default is: ‘’helptext5 The text that will be shown in the fifth button in the


Default is: ‘’helpurl1 The URL that is called by the first button in the help

popup in the Option tab.

Default is:

“http://www.inovista.com/data/mobile/homePage.xml”

helpurl2 The URL that is called by the second button in the help popup in the Option tab.

Default is:

“http://www.inovista.com/data/mobile/CLHomePage.xml”

Helpurl3 The URL that is called by the third button in the help popup in the Option tab.

Default is:


Mobile Apps


75.



Http Parameter UsageHelpurl4 The URL that is called by the fourth button in the help

popup in the Option tab.

Default is:


Helpurl5 The URL that is called by the fifth button in the help popup in the Option tab.

Default is:


A sample URL call would be as follows:

inovista-dashboard://?loadurl=http://www.inovista.com/data/CLWinnerComparison1.xlf

A more detailed call would be:

inovista-dashboard://?loadurl=http://www.inovista.com/data/CLWinnerComparison1.xlf &homepagexml=http://www.inovista.com/data/CLHomePage.xml&homepagexlf=http://www.inovista.com/data/TreeHomePage.xlf&optionshelp=Click on either of the examples below to populate the home page with an example URL&showhelp=y&helptext1=Try Example 1&helptext2=Try Example2&helpurl1=http://www.inovista.com/data/CLHomePage.xml&helpurl2=http://www.inovista.com/data/homePage.xml

Mobile Apps


76.



Populate the HomePages input using ‘homepagexml ‘

The initial loadmessage using ‘optionsmsg’

Show or Hide HelpButton using

Select a dashboardusing ‘ homepagexlf ‘

Mobile Apps


77.



The help message using ‘optionshelp’ The first help message

and load URL using ‘helptext1’ and ‘ helpurl1’

The second help message and load URL using ‘ helptext2’ and ‘helpurl2’

Mobile Apps


78.



PASSING DATA WITH URL PARAMETERSIt is also possible to pass data values to the application which can then be picked up by any of the mobile options components in any of the dashboards.

Using key value pair type parameters, values are stored on the mobile device and can be picked up using in the key name part of the parameter.

The format is ‘keyname’ + variable text for the key that will be read by the Mobile Options components and ‘keyvalue’ + variable text will be the actual data value that is passed in.

An example would be:

&keyname1=keyname1&keyvalue1=TestValue&keynameQAAWS=newdata&keyvalueQAAWS=http://www.inovista.com/data/ace.xml

N.B if the keyvalue parameter values are separated by a comma, the values will be placed in different columns in the spreadsheet provided they are defined in the range. For example, the parameter: ‘keyvalue1=one,two’ will place the value ‘one’ in the first column and ‘two’ in the column next to it.

Define the use of the data in the ‘Shared Data’ tab of the Mobile Options component.

Mobile Apps

APPENDIX I


APPENDIX IOccasionally, the Dashboard Reader cannot read the standard Excel file contained in the Xcelsius model (the ‘.xlf’ file). When loading the file in the Dashboard Reader, you may get an error message saying the app is not in the correct format. To handle this, the Excel file should be exported, opened in Excel, saved as an ‘Excel 97-2003’ file and then imported back into Xcelsius.

In general, you should only need to do this one time, but occasionally Xcelsius regenerates the Excel file and therefore, this process will need to be repeated.

1. Export Excel Data

2. Open in Excel and save as ‘97‐2003’

Mobile Apps

APPENDIX I


3. Re‐import the Excel data into Xcelsius

Mobile Apps

APPENDIX II


APPENDIX IIThe following tables present a mapping of Inovista components to the current range of Xcelsius components.

Note that these will be continually updated, please check our website.

Xcelsius Component Inovista Equivalent CommentsChartsLine Chart Mobile Combo or

Combination Chart or Micro Line

Pie Chart Mobile Pie or Micro PieOHLC N/A Should be available in the

new releaseCandleStick N/A Should be available in the

new releaseColumn Chart Mobile Combo or

Combination Chart or Micro Column

Stacked Column Mobile Combo or Combination Chart

Bar Chart Mobile Combo or Micro Bar Chart

Stacked Bar Mobile ComboCombination Mobile Combo or

Combination ChartBubble XY ChartXY Chart XY ChartArea Chart Mobile Combo or

Combination ChartMobile Combo or Mobile ComboRadar N/AFilled Radar N/AFilled Radar N/AHorizontal Bullet Micro Bullet ChartVertical Bullet Micro Bullet ChartSpark Line Micro Line ChartMicro Line Chart N/A


Mobile Apps

APPENDIX II


Xcelsius Component Inovista Equivalent CommentsContainersCanvas SVG/PNG BackgroundPanel SVG/PNG BackgroundTab Set SVG/PNG Background In conjunction with buttons,

icons or other selectors, tabs can be simulated on mobile.It is also possible to use the Split View option in the Mobile Options component.

Xcelsius Component Inovista Equivalent CommentsSelectorsAccordion The iOS CarouselThe iOS Carousel SVG Button or Image Toggle

Button with checkbox image

Combo Box For mobile use a Text Shape button or image and a Mobile List

Filter For mobile use Text Shape buttons or images and a Mobile List

Fisheye Picture Use the Horizontal Mobile List with Images or the iOS Carousel

Sliding Picture Use the Horizontal Mobile List with Images or the iOS Carousel

Icon Advanced Image, SVG Controller or Background

Label Based Menu Mobile List or Mobile Tree List- the lists can also include images

List Box Mobile List

Mobile Apps

APPENDIX II


Xcelsius Component Inovista Equivalent CommentsSelectorsList View Mobile Data Grid or Data

Grid or Tree GridList Builder Use the Mobile List with a

multi select optionThe output from the multi select can be sent to any component - for example, a Data Grid

Radio Button SVG Button - import any type of button image

Scorecard Data Grid or Tree GridTicker Can be created with motion

effects in the Text Shapes Suite or with an SVG Controller

A full ticker may be considered in a future release

Toggle Button Any of the Text Shapes or Images

Greatly enhanced functionality is available including multiple toggle, increments and automation

Push Button Any of the Text Shapes or Images

Spreadsheet Table Mobile Data Grid or Data Grid

Play Selector N/A

Mobile Apps

APPENDIX II


Xcelsius Component Inovista Equivalent CommentsSingle ValueDual Slider IMT SliderDial SVG Gauge or Speedometer Both the SVG Gauge and

Speedometer are based on SVG images created externally and, as such, can present just about any appearance

Gauge SVG Gauge or Speedometer “”Horizontal Progress Bar Mobile Slider The slider can be

customized to represent a progress bar

Vertical Progress Bar “” “”Horizontal Slider Mobile Slider HorizontalMobile Slider Horizontal Mobile SliderSpinner Mobile SpinnerValue Any of the Text Shapes or

Images

Xcelsius Component Inovista Equivalent CommentsMapsMaps SVG Controller Using an SVG Editor such

as Illustrator or Inkscape just about any map or image can be created will a wide range of dynamic capabilities

Mobile Apps

APPENDIX II


Xcelsius Component Inovista Equivalent CommentsOtherCalendar N/A A Spinner Calendar will be

released shortlyScenario Button Mobile Options Any values can be saved

locally using the Data options in the Mobile Options component

Trend Icon Shape Indicator Standard and imported images are used to indicate status based on data values

History N/APanel Set SVG Controller or

BackgroundTrend Analyzer N/ASource Data Matrix CollectionPrint Button Not yet applicable for

mobileReset Button Can be created with any

of the Text Shapes and the Mobile Options data stores.

This is also available as a standard option in the Mobile Options component.

Grid Data Grid

Xcelsius Component Inovista Equivalent CommentsArts & BackgroundsBackground SVG Background Just about any SVG Image

can be imported and used as a background

Image Component Advanced Image, SVG Background and SVG Controller

Rectangle Most of the Text Shape components

Ellipse Advanced Ellipse or Elliptical Arc

Horizontal Line Advanced LineVertical Line Advanced Line

Mobile Apps

APPENDIX II

86.

Data Connectivity


DATA CONNECTIVITY

The following external data access options are currently available:

• XML Data - use the Matrix Collection component. XML must be in the format‘<row><column>...</column></row>’ etc•BIWS-usethestandardXcelsiusapplication•QaaWS-usethestandardXcelsiusapplication•WebServiceConnection•InfoBurst-theInfoSolInfoBurstlibrarieshavebeenincluded.Useoftheselibrarieswill also allow write back from a dashboard to an online database.

Xcelsius Component Inovista Equivalent Comments

Web ConnectivityURL Button All the Text Shape Suite and

many other components have URL call facilities

Reporting Services Not applicable for a mobile application

Slide Show ""SWF Loader ""Connection Refresh Button All of the Text Shape Suite

components can be used in conjunction with the data sources to force a reload/refresh of data

Mobile Apps

APPENDIX III


Supported Operators and Functions+ - %* / ^& > <= >= <=<>

ABS INDEX PVACOS INT RANDAND ISERROR REPLACEASIN ISNA REPTATAN LEFT RIGHT ATAN2 LEN ROUNDAVERAGE LN ROWCHOOSE LOG ROWSCHAR LOG10 SEARCHCOLUMN LOWER SIGNCOLUMNS MATCH SQRTCONCATENATE MAX SUMCOS MID TANCOUNT MIN TEXTDATE MOD TRIMDAY MONTH TRUEDOLLAR NA UPPEREXACT NOT VLOOKUPEXP NOW WEEKDAYFALSE OR YEARFIND PIHLOOKUPIF

APPENDIX IIIThe list below shows the currently supported Excel functions that will be calculated by theDashboard Reader.

Note that these will be continually updated, please check our website.


Documents

MOBILE APPLICATIONS Starter Guide & Techniques · MOBILE APPLICATIONS Starter Guide & Techniques True Mobile Apps from an Xcelsius Dashboard. Mobile Apps TABLE OF CONTENTS Inovista