In this article, we'll describe how to create a timeline experience using Scroll Collections and Excel spreadsheets. We will also explore how to reuse and modify this sample to accommodate your own needs.

This sample will run in Player on all supported platforms.

You can download the experience using this link here.

Feel free to interact with a web-hosted version of this experience below. 

About the "Timeline Example" experience

The "Timeline Example" experience enables a user to scroll through a timeline of events stored in an Excel spreadsheet. If the events occur in the same year, they are vertically stacked.

This experience uses two Scroll Collections:

• The first one is for the events timeline, the main part of the scene. 
• The second is for the years slider visible at the bottom of the scene

It also relies on two Excel spreadsheets: 

• "Settings" sheet, which sets various parameters to compute the X and Y coordinates of each event on the timeline
• "TimelineEvents" sheet, which contains the list of events to display on the timeline. 

We recommend reading the article before watching the video, but it's available if you'd like to see how you can use this sample.

How was this experience built?

The Excel data source

Settings worksheet

The Settings worksheet is used to set the timeline dates and calculate the correct space/duration between each year.

 

Columns:

• Years: By default, this column specifies six separate years to display in the Scroll Collection for the years slider at the bottom of the screen. You can choose to specify any number of years in that column (with a minimum of two), but you will also need to increase or reduce the formulas in the "Pixel" column accordingly. 
• Pixel: This field uses a formula to specify the X coordinate - in pixels - for the associated year to be displayed in the bottom Scroll Collection. The formula used is:
  (Current Year - Minimum Year) * Max Year Pixels / Total Years.
• Max Year: This field contains the highest value in the Years column. You only need a number in the first row, as all of the "Pixel" formulas refer to this row.
• Max Year Pixels: This field contains the X coordinate - in pixels - of where the last year of the Years column should be displayed within the bottom Scroll collection. You only need a number in the first row, as all of the "Pixel" formulas refer to this row. You should not need to change this value if you are keeping the same experience layout/resolution. 
• Total Years: This field computes the total year span used in other formulas. It contains a formula and does not need to be edited. You only need a value in the first row, as all of the "Pixel" formulas refer to this row.
• Width: This field contains the width in pixels of the graphic used to represent each event in the timeline. In this example, it is the width of the Circular shape. You only need a value in the first row, as all of the "X Coordinate" formulas refer to this row.
• Height: This field contains the height in pixels of the graphic used to represent each event in the timeline. In this example, it is the height of the Circular shape. You only need a value in the first row, as all of the "Y Coordinate" formulas refer to this row.
• Start Y position: This field specifies the starting Y position of the first item(s) within the Events scroll collection. You should not need to change this value if you are keeping the same experience layout/resolution. You only need a value in the first row, as all of the "Y Coordinate" formulas refer to this row.
• X Spacing: This field specifies the horizontal spacing in pixels between each event. You only need a value in the first row, as all of the "X Coordinate" formulas refer to this row.
• Y Spacing: This field specifies the vertical spacing in pixels between each event. You only need a value in the first row, as all of the "Y Coordinate" formulas refer to this row.
• X Coordinate: This column will compute the X position in pixels for each event based on all the previous parameters you have set in this sheet. Based on the number of events in the second sheet, extend this formula across as many rows as needed. 
• Y Coordinate: This column will compute the Y position in pixels for each event based on all the previous parameters you have set in this sheet. Based on the number of events in the second sheet, extend this formula to as many rows as needed. 

VERY IMPORTANT NOTE: Complete the "Settings" worksheet first, then copy the "X Coordinate" and "Y Coordinate" columns (columns K & L) in this sheet and paste them as Values (not as Formulas) into Columns E & F of the "TimelineEvents" sheet. This is further discussed below.

TimelineEvents worksheet

The "TimelineEvents" worksheet is used to store the events displayed in the main timeline Scroll Collection. 

 

Columns:

• Event Name: This field contains the event name to display in the timeline.
• Event Main Image: This field contains the file name of the image that will be displayed both in the scroll collection and within the Details view when selecting an event.
• Description: This field contains the event description to be displayed within the Details view.
• Year: This field contains the year of the event. This column should only contain values found in the Yeras column of the "Settings" worksheet. More than one event can have the same Year value.
• X Coordinate: This field contains the X coordinate copied as a value from the "Settings" worksheet. Every time you make changes in the "Settings" worksheet, you need to copy the computed values into this column.
• Y Coordinate: This field contains the Y coordinate copied as a value from the "Settings" worksheet. Every time you make changes in the "Settings" worksheet, you need to copy the computed values into this column.

The layout in Composer

Events Scroll Collection - aka the Timeline

The events timeline is created using a Scroll Collection fed by the Excel worksheet TimelineEvents. It uses a Data Template called "Circle Template" that contains the following assets:

• Toggle Button
• Ellipse
• Image
• Texts

The root of the template, a Group Collection, has its X, Y, Width, and Height properties bound to associated columns in the "Settings" and the "TimelineEvents" worksheets as shown below. This is how the position and size of each event is defined. 

 

When an Event in the timeline is selected, it opens the "Details Panel" that displays the following information. 

• Event name
• Description
• Year
• Circle overlay (Center image)

The event information and image are changed by using the "Set text" and "Change image" actions.

When on the "Details Panel", you can navigate back to the timeline by tapping the Home button in the upper-left corner. 

Creating empty years

In the screenshot below, you will see a "Blank" event in the "TimelineEvents" worksheet. This row is used as a placeholder for the year 1590. It is needed to create visual space between 1589 and 1591 in the timeline. Without this placeholder, events would be displayed directly next to each other regardless of how many years separate them. 

The "Visibility" property of "Circle Template" in Composer is bound to the value of "Event Name" in the "TimelineEvents" worksheet. This is achieved by adding a custom script converter to the binding: if the "Event Name" equals "Blank", the circle visibility for this event is set to false; otherwise, a circle is shown for this event.

Be sure to add a row with a "Blank" event name for every year that does not have an entry.

Scroll Collection “Slider Indicator”

The Slider Indicator bar is created using a second Scroll Collection, enabling the user to scroll through the years instead of using the events themselves. Dragging the Slider Indicator bar will also move the Scroll collection timeline in the appropriate direction thanks to a Property-to-Property Binding between their two "Canvas, Horizontal offset" properties.

The Slider Indicator bar contains the following assets. 

• A hidden Rectangle that defines the whole scrollable area.
• An Ellipse representing a scrollable handle. 

 

List of years behind the Slider Indicator bar

The “Year Group” uses the "Years" Group Collection as a data template. The data template uses the “Settings” sheet as its data source. This data template binds its X property to the rows of the “Pixel” column of the "Settings" worksheet (Column B). Within the “Pixel” column, we have a formula that performs the following calculation:

( (next event year) - (previous event year) ) * ( (X coordinate of the final event year) / (total number of years) )

• (next event year) - (previous event year)
  The number of years separating these two years.
• ( (X coordinate of the final event year) / (total number of years) )
  The number of pixels separating each year on the timeline.
• ( (next event year) - (previous event year) ) * ( (X coordinate of the final event year) / (total number of years) )
  The number of pixels separating the next event year from the previous event year in the timeline.

A Rectangle Asset is used to to create the slider line between the years.