Article

compilationTemplate

Displays information about a single media item and its components.

Overview

Use the compilationTemplate 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 compilationTemplate page. The theme for the compilation template defaults to the system preference.

Layout diagram showing header and section areas on the left side and related content on the right.

Main Elements

The following listing shows the main elements of the compilationTemplate 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 compilationTemplate 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: