Using Drill Across to display data across various sources

Problem:

I want to display data coming from multiple data sources. The data is also not consistent among the various sources. How can I display this in a Klip?

Solution:

The drill across feature allows you to display Tiles (which can be thought of as individual Klips) to drill into heterogeneous data.

To illustrate how to use this feature, we will use a simple example. Let's say we are creating a catalog of fruits and vegetables. We retrieve the names of various fruits from one source, and images of various vegetables from a different source. Using the Tile object, we can unify the data from the corresponding content source into one Klip. We will create a Tile object for both fruits and vegetables. Once the Tiles are created and pointing to their respective content source, we will be able to drill across the Tiles to view their data.

Because each Tile has its own type of data (text for fruits, and images for vegetables), we will need to specify a stylesheet for each Tile. Notice below that we will make use of the <content> XML parameter to store multiple stylesheets. This parameter is placed as a child to the <Klip> XML parameter, which is also the root. We will also create a default Tile that will be rendered when the Klip initially loads:

    <content>
        <default_style>
            food { 
                type: item;
                definition: all;
            } 
            category {
                itemcol: 1;
                collabel: "Default Tile Items";
            } 
        </default_style>    
        <fruits_style>
            fruit { 
                type: item;
                definition: all;
            }
            name {
                itemcol: 1;
                label: "Name";
            }
            common_color {
                itemcol: 2;
                label: "Common color for fruit";
            }
        </fruits_style>    
        <vegetables_style>
            vegetable {
                type: item;
                definition: all;
                layout: frame;
            }
            name {
                noterow: 2;
                notelabel: false;
            }
            image {
                type: image;
                itemcol: 1;
                fit: shrink;
                noterow: 1;
                notelabel: false;    
                label: "Sample photo";
            }
            home {
                type: link;
            }
        </vegetables_style>
    </content>

We now have a style for each Tile. You probably notice that under the Vegetables style, we have a column for the image, since we know that the incoming data from the vegetables content source will contain an image.

We create a new Tile by calling the Items.newTile(...) function:

var defaultTile = Items;
var fruitsTile = Items.newTile("Fruits");
var vegetablesTile = Items.newTile("Vegetables");

The default Tile is set to the Items object, while we create new Tiles for fruits and vegetables. The default Tile will act as the current Tile upon starting the Klip, and will be swapped between the other Tiles.

Within the onRefresh() function, we need to assign the content source URL to the Klipfolio Dashboard's built-in XML parsing engine:

Engines.Data.stylesheet = Prefs.getContent( "fruits_style" );
Engines.Data.processTile( fruitsDataURL, "Fruits" )

Notice that we are accessing a different stylesheet depending on the current Tile by calling Prefs.getContent(...). We then process the content source and place the results into the specified Tile object by calling Engines.Data.processTile(...).

The same block of code will be applied to the vegetables Tile, but with a different URL. We then load the selected Tile by using the Items object, which provides an interface for us to the items in the Klip.

Items.loadTile( fruitsTile );

Let's take a look at what the Klip looks like when we run it. The default Tile will be rendered, showing us the two Tiles:

... clicking on Fruits, we access the content specifically for fruits:

... click the Back button to return to the default Tile. Now let's try clicking on the Vegetables Tile:

... we see that the content is different from that of the Fruits Tile.

Using the Drill Across feature is a great way to display data in a well-organized, easy-to-use manner that have Tiles originating from different content sources. To see the complete source code for this example, check out the sample drill across Klip.