Displaying Data in a Grid Layout Using a Tile List

A Tile List widget is a container used to display a set of data records from a datasheet in rows and columns. It differs from a Data Table mainly in that records are displayed in a grid format in containers called tiles, whereas a Data Table displays records in rows.

The Tile List widget is ideal for creating simulation output similar to what you might find in product search results from an online storefront. It is an extremely powerful tool for organizing data records.

Watch a Video

Watch this video for a brief demonstration of the topics covered in this tutorial.

Anatomy of a Tile List

There are two structural components in a Tile List: the Tile List itself, and the tile it contains. The tile is similar to a data row in a Data Table in the following ways:

In the image below, the Tile List widget is selected in Studio. The thin gray lines indicate the tile boundary, and are only visible when you hover your mouse cursor over them.

Structure of a Tile List

Various formatting options can be applied to a Tile List and the tile contained within it, including borders and background colors. If formatting is applied to both the tile and the Tile List widget, the tile formatting will supersede the Tile List widget formatting when the page is simulated in the Reader.

Also, when formatting Tile Lists, some attributes will cascade down to the widgets within them (e.g., text attributes).

In all cases, any formatting applied to a single tile applies to all tiles within a Tile List widget and will be displayed in the Reader.

Simulating an online book catalog

Tile Lists are especially suited to the display of data records that contain images. In this example, you will build an online book catalog that contains information about each book, as well as a thumbnail image of the book cover.

Online book catalog

Before you start

This tutorial makes use of concepts covered in other tutorials, including basic formatting, datasheet creation, and adding images to datasheets. If you are not familiar with these concepts, you might want to complete those tutorials before attempting this one.

Add the Tile List to a page

Tile List icon on Widget Toolbar

Tile List propertiesStart out by creating a new page titled Home Page, and dragging a Tile List widget onto the page. Name the Tile List “Classic Books – Tile List.”

In the Properties panel, edit Max columns and Max rows as required. By default, Max columns is set to 3 and Max rows is blank. These defaults are fine for our exercise; however, if you want more columns in your Tile List, or you want to limit the number of records that will display on the page, you can edit these settings.

Now create a datasheet called PRODUCTS that contains the fields and records shown below (you might already have created this datasheet for an earlier tutorial). You can search Flickr for thumbnail images of book covers.

PRODUCTS datasheet

Assemble and populate your tile with data

To display data from your datasheet in the Tile List, you need to add content to the tile that will serve as placeholders for the data flowing into it.

  1. Place a Text widget in the upper left corner of the tile and name it [book_title].
  2. Just below the Text widget, place an Image widget inside the tile. Choose Cancel when it asks you to select an image. Name the Image widget [book_image].
  3. Leave about an inch or two of space (depending on the image size), then add two additional Text widgets as placeholders for data: [author] and [price].
  4. Populate the Tile List by mapping the fields in the PRODUCTS datasheet to the placeholders you’ve added to the tile.

Populated tile

Test your simulation. When you view the page in your browser, each record you added to the PRODUCTS datasheet will populate a single tile in your Tile List.

Format the tile

To increase the visual fidelity of your page, you can add formatting to your Tile List. To continue our example, we will add a gray section around the contents of each tile. Since our goal is to have the appearance of some padding between each tile, we’ll wrap the tile contents in a Section widget, and then apply the background color to the Section rather than the tile itself.

First, select all four widgets in the tile by selecting the tile and pressing Ctrl-A on your keyboard. You can then enclose them in a Section widget by right-clicking one of the selected widgets and choosing Wrap in > Section.

Wrap in Section

When the section is created, set its background color to light gray. When you view the page again in the browser, each tile should now appear as a discrete element with a small area of padding between the shaded sections (see the image near the top of this page).