The arrival of the iPad has had a huge impact on sales forces, we know for a fact that some Fortune 2000 companies have switched the hardware they would provide to sales reps from laptops to iPads. One typical activity for sales representatives on the go is to showcase product catalogs to potential customers, ideally in a snappy way, regardless of what the network connectivity is like. The iPad has proven to be ideal for this type of scenario, it's very visual, intuitive to use, and easy to carry around.

ReportPlus allows to design dashboards for iPad and iPhone in such a way that it makes it very easy to walk through a collection of items, such as products. It can be used to display different bits of information in the different widgets of the dashboard, making for a very good, one glimpse kind of view of the most relevant aspects of a product. 

In this article I’m going to show step by step how to create a product catalog dashboard on the iPad with ReportPlus.

Getting started

In order to get this dashboard going we’ll need specific information about each product, including:

• Product Picture or Video.
• Product specification. The most relevant attributes you’d like to display associated to each product, which may include price, model, description, etc.
• Product performance metrics you may want to chart.

This information may be stored in one or several data sets, which may come from the same or different data sources.  In this case we will be using the Excel spreadsheet named Cameras.xlsx as data source, which ships with ReportPlus, and you should be able to find within Local Files>Samples. It includes three sheets: Specification, Pictures and Ratings.

The important thing to have in mind is that if different data sets are going to be used, you need to define a key field, shared among the different data sets, to be able to bind the information with the current page selection.

We’ll start by creating a blank dashboard, with the 3x3 layout.

In this case the data source we are going to be using is stored in Local Files. If that were not the case we’d create a new data source connection by tapping the + button in the Data Sources left pane, and following the new data source wizard.

Configuring the pages filter with products

By tapping on the bottom right button we expand the pages pane. We must tap and hold the Specifications sheet and then drag it all the way to the pages pane to the right, and drop it there. This applies to any data set we might use as product catalog, the one containing all the product keys, and labels.

While in this case is not really needed, usually we might have to modify the pages configuration to make sure the column displayed is the one carrying the label. We do so by tapping the page setting button, which is displayed on top of the pages pane when the dashboard is on edit mode.

Adding the product picture

We start adding content by drag and dropping the Pictures sheet, being the data set with the information needed to get the product pictures from the web. Since we don’t have a field with the full url, we’ll have to add a calculated field to create one. By tapping the + button in the fields pane we add a new calculated field, which we'll label CompleteURL.

The complete url can be achieved by adding an expression that appends a fixed known base url with each camera ending url. Such expression has the following form:

"http://base-url/"&[URL]

Now that we have a field with the full url we can switch the visualization mode to the web viewer visualization, and set the new calculated field in the Url Field configuration attribute of the Web Viewer settings. This should trigger the display of a camera picture retrieved from the CompleteURL field.

By default the image displayed is going to be the one belonging to the first row. In order to make sure we are displaying the picture of the currently selected product we must configure page binding.

Page Binding

In order to bind the data in the picture with the page selection, we need to add binding rules in the widget configuration. In the binding tab, by tapping in the + button we add a new binding expression where we specify that the Field Name Equals the Title field in the Specifications page.

Adding product specs

Now we’ll drop the Specifications sheet. In this case we want to show the most important attributes of a product in such a way that the user is able to see them without scrolling, and in some cases, we’d like for some very important attributes to appear highlighted, so they are perceived at first glimpse. For instance we’ll start with the price, let´s say it´s the most important attribute of our product, so we are going to use just one widget to display it and nothing else.

To do this we hide all fields with the button at the bottom bar of the fields pane, and then we make the Price field visible. Since we know we are displaying a currency, we’ll change the formatting to be currency like. For this we tap on the Price field, and go to Formatting, and set Type as Currency, Fraction Digits as zero, and turn on the Show 1000 Separator option.

Then we select the Gauge View in the visualisations menu, and we switch to the Text Gauge in the Gauge Type setting. This will render the price in a large font size occupying most of the widget’s display. Being a gauge we have the option to display upper and lower bounds, which would allow us to signal with a red dot when the value is out of the expected limits. We would configure this with the Bounds settings.

[Image]

Then we disable the display of the title bar from the General Settings tab, by switching off the Show Title option.

And we have a price widget.

Then we duplicate the widget, switch to grid view and make all fields visible. After that we change the visualization method to Text View and reorder fields as we see fit. For instance we'll place Manufacturer right below Release Date. To do this we tap and hold the field re order, and we drag it to the position we want in the fields list.

Text View offers a number of style options. We’ll pick the labels to the left and small content text to the right with a separator line. Also we’ll turn on the Highlight First Row option.

Charting metrics

Last but not least we are going to add the Ratings sheet to the dashboard. After we drop the Ratings data set, and we configure page binding we should see something like:

Since the metrics we want to display are columns of the data set we have a couple of options to display them. The first one is use the Text View display which gets along naturally with this type of structure, but since we are looking to chart numerical values, if we do it with the current matrix structure all metrics will be displayed as different data series, in a chart, and using a linear gauge is out of the question, So what can we do? Well, we can use the transpose operation on the matrix, and convert columns into rows. We do this by pressing the button with the axis and the arrows on the fields pane to the left. Once we tap it the matrix should change to:

Then we switch to Gauge View, and we select Gauge type as Linear Gauge. Being a gauge we have the ability to configure bounds, and bands within it.  So we establish lower bound as 0 and upper bound as 10, and thresholds in 30% and 70%.

After configuring all the widgets another chapters starts which is styling the dashboard, but we are not covering that in this post. That deserves a post on it’s own. After styling background images, margins, and paddings you can create something like:

Or like: 

Running in offline mode

Going back to the sales rep scenario, if you’ve managed to put together a product catalog dashboard and you plan on showing it in a meeting you will want to make sure about two things.

First one, that everything is cached. This will ensure you get the best browsing experience. You can achieve this by manually walking through all the pages in the collection, or alternatively to turn on the AutoPlay, and leave the dashboard running until it has looped through the collection. You can do this by tapping the play button on the pages pane to the right, which is displayed if the dashboard is in view mode.

Second, once you’ve cached everything you may want to enable the offline mode before the meeting begins. Specially if you go around with the same dashboard for several days, just to make sure the application won’t try to connect to a server to refresh the information while the meeting is taking place, and spare you of the spinning wheels of data retrieval.

Wrap up

In this article we’ve gone through the creation process of a dashboard to be used as a digital product catalog in the iPad. We’ve shown how to add the different widgets and bind them to the product collection page. This of course was only an example with limited information to showcase how ReportPlus may be used.  It’s important to bear in mind is that this same concept could also be applied to other types of entities, such as clients, providers, employees, etc.