Displays information about a single media item and its components.
Overview
Use the compilation
element to display information about one product that is made up of several distinct pieces; for example, an album and all of the songs that it contains. The header area on the left side of the screen contains general product information. Directly underneath the header area are several section areas that group like types of information; for example, one section can contain all of the songs on the album. The related content on the right side of the screen contains any images associated with the product and buttons that the user can use to interact with the product, such as Play and Buy buttons. The following figure shows the basic layout for a compilation
page. The theme for the compilation template defaults to the system preference.

Main Elements
The following listing shows the main elements of the compilation
element in TVML format:
<compilationTemplate>
<background>
…
</background>
<list>
<relatedContent>
<itemBanner>
…
</itemBanner>
</relatedContent>
<header>
…
</header>
<section>
<header>
<title>Title</title>
</header>
<listItemLockup>
…
</listItemLockup>
</section>
</list>
</compilationTemplate>
Element Descriptions
- background
Background elements, such as audio.
- header
Information describing what a section of the list contains.
- itemBanner
Product information and row elements, such as button information, that are displayed along the right side of the screen.
- list
Element containing all the content in the template (except background).
- listItemLockup
Elements containing elements used to create one item in a list.
- relatedContent
Element containing all elements displayed along the right side of the screen.
- section
An area of the page that groups related elements for layout purposes.
Example
The following listing shows the TVML for a compilation
example. The example displays a list on the left side that contains information about the album and a list of available songs. The right side of the display contains an image of the album and buttons prompting the user to buy, rate, or shuffle the music.
<document>
<compilationTemplate theme="light">
<list>
<relatedContent>
<itemBanner>
<heroImg src="path to images on your server/Car_Movie_720x1080" />
<row>
<buttonLockup>
<badge src="resource://button-add"/>
<title>Add</title>
</buttonLockup>
<buttonLockup>
<badge src="resource://button-rate"/>
<title>Rate</title>
</buttonLockup>
<buttonLockup>
<badge src="resource://button-shuffle"/>
<title>Shuffle</title>
</buttonLockup>
</row>
</itemBanner>
</relatedContent>
<header>
<title>WWDC Roadtrip Soundtrack</title>
<subtitle>Various Artists</subtitle>
<row>
<text>Instrumental</text>
<text>5 Songs</text>
<text>2015</text>
</row>
</header>
<section>
<description>Songs from your favorite movie</description>
</section>
<section>
<listItemLockup>
<ordinal minLength="2">1</ordinal>
<title>Opening sequence</title>
<decorationLabel>11:14</decorationLabel>
</listItemLockup>
<listItemLockup>
<ordinal minLength="2">2</ordinal>
<title>Fight song</title>
<decorationLabel>3:47</decorationLabel>
</listItemLockup>
<listItemLockup>
<ordinal minLength="2">3</ordinal>
<title>Love theme</title>
<decorationLabel>6:48</decorationLabel>
</listItemLockup>
<listItemLockup>
<ordinal minLength="2">4</ordinal>
<title>Car chase</title>
<decorationLabel>5:21</decorationLabel>
</listItemLockup>
<listItemLockup>
<ordinal minLength="2">5</ordinal>
<title>End credit theme</title>
<decorationLabel>8:03</decorationLabel>
</listItemLockup>
</section>
</list>
</compilationTemplate>
</document>
The following figure shows the output for the above example:
