Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

Compound Information Elements

Compound information elements provide the user with specific pieces of information. Each element groups and displays information in the form best suited for the information.

activityIndicator

The activityIndicator element provides a spinning indicator circle and a title. Use the activity indicator to show your users that some sort of activity is taking place. The activity indicator is mostly used to show users that content is currently loading. activityIndicator can contain the following elements:

activityIndicator can be a subelement of:

Listing 22-1 shows an example of an activityIndicator element.

Listing 22-1activityIndicator example TVML
  1. <activityIndicator>
  2. <title>Title</title>
  3. </activityIndicator>

info

The info element displays displays grouped sets of data in either table or list form, depending on its parent element. For example, in an infoList element, the info element is often used to display a list of directors and actors for a product. info can contain the following elements:

info can be a subelement of:

Listing 22-2 shows an example of an info element.

Listing 22-2info example TVML
  1. <info>
  2. <header>
  3. <title>Header Title</title>
  4. </header>
  5. <text>Text</text>
  6. </info>

menuItem

The menuItem element is used to label an item. One or more menuItem elements are used inside of a menuBar element to indicate the available elements. menuItem can contain the following elements:

menuItem can be a subelement of:

Listing 22-3 shows an example of a menuItem element.

Listing 22-3menuItem example TVML
  1. <menuItem>
  2. <title>Item title</title>
  3. </menuItem>

nowPlayingMenuItem

The nowPlayingMenuItem element is used to display information about audio playing in a menuBarTemplate. The nowPlayingMenuItem element automatically appears and disappears from the menu bar as the audio session starts and stops. nowPlayingMenuItem can contain the following elements:

nowPlayingMenuItem can be a subelement of:

Listing 22-4shows an example of a nowPlayingMenuItem element along with two tabs in the menu bar.

Listing 22-4nowPlayingMenuItem example TVML
  1. <menuBar>
  2. <nowPlayingMenuItem>
  3. <title>Optional Text</title>
  4. </nowPlayingMenuItem>
  5. <menuItem>
  6. <title>Item 1</title>
  7. <menuItem>
  8. <menuItem>
  9. <title>Item 2</title>
  10. <menuItem>
  11. </menuBar>

placeholder

The placeholder element contains elements that are not evaluated by the template app. The placeholder element and all of the elements that it contains are ignored. placeholder can contain the following elements:

placeholder can be a subelement of:

Listing 22-5 shows an example of a placeholder element.

Listing 22-5placeholder example TVML
  1. <placeholder>
  2. <relatedContentURL>Enter URL for the related content</relatedContentURL>
  3. </placeholder>

productInfo

The productInfo element contains general information about the displayed product. productInfo can contain the following elements:

productInfo can be a subelement of:

Listing 22-6 shows an example of a productInfo element.

Listing 22-6productInfo example TVML
  1. <productInfo>
  2. <header>
  3. <title>Title</title>
  4. </header>
  5. <row>
  6. <button>
  7. <text>Text</text>
  8. </button>
  9. </row>
  10. <infoTable>
  11. <info>
  12. <text>Text</text>
  13. </info>
  14. <footer>
  15. <text>Footer Text</text>
  16. </footer>
  17. </infoTable>
  18. >/productInfo>

prototypes

The prototypes element is used to bind data item types, simplifying the template layout. A single binding definition provides the ability to display any number of data items. prototypes can contain any element that can be contained by a section element. The child elements must implement the prototype attribute to bind the correct data items. prototypes can be a subelement of any element. Listing 22-7 shows an example of a prototypes element.

Listing 22-7prototypes example TVML
  1. <prototypes>
  2. <lockup prototype="type">
  3. <img binding="@src:{url};" />
  4. </lockup>
  5. </prototypes>

ratingCard

The ratingCard element contains rating information about a product. This can be information about a movie’s viewing rating or information from a rating service, such as Rotten Tomatoes. ratingCard can contain the following elements:

ratingCard can be a subelement of:

Listing 22-8 shows an example of a ratingCard element.

Listing 22-8ratingCard example TVML
  1. <ratingCard>
  2. <title><badge src="" /> 12+</title>
  3. <text>Text</text>
  4. <description>Description</description>
  5. </ratingCard>

relatedContent

The relatedContent element is used to denote that other elements are related to a particular element. This element is often used to display the related content when another element is brought into focus. relatedContent can contain the following elements:

relatedContent can be a subelement of:

Listing 22-9 shows an example of a relatedContent element.

Listing 22-9relatedContent example TVML
  1. <relatedContent>
  2. <lockup>
  3. <img src="" />
  4. <title>Title 1</title>
  5. </lockup>
  6. </relatedContent

reviewCard

The reviewCard element is used to display abbreviated review information. reviewCard can contain the following elements:

reviewCard can be a subelement of:

Listing 22-10 shows an example of a reviewCard element.

Listing 22-10reviewCard example TVML
  1. <reviewCard>
  2. <badge src="" />
  3. <title>Title</title>
  4. <description>Description</description>
  5. <text>Text</text>
  6. </reviewCard>

rules

The rules element is used with data binding. This element contains a set of specialize elements that are used to modify existing elements. The specialize elements use data queries to determine how the existing element is modified. rules can contain the following elements:

rules can be a subelement of any element. Listing 22-11 shows an example of a rules element.

Listing 22-11rules example TVML
  1. <rules>
  2. <specialize state="data binding query goes here">
  3. <…>
  4. </specialize>
  5. <specialize state="data binding query goes here">
  6. <…>
  7. </specialize>
  8. </rules>

segmentBarItem

The segmentBarItem element is used to create groups inside of a segmentBarHeader. Users can move between segmentBarItem elements to display related information. segmentBarItem can contain the following elements:

segmentBarItem can be a subelement of:

Listing 22-12 shows an example of a segmentBarItem element.

Listing 22-12segmentBarItem example TVML
  1. <segmentBarItem>
  2. <title>Title</title>
  3. </segmentBarItem>

specialize

The specialize element is used to modify an existing element based on a data query. Combine the query with parameters contained in your JSON data to determine how to modify an existing element. specialize can contain any element.

specialize can be a subelement of:

Listing 22-13 shows an example of a specialize element.

Listing 22-13specialize example TVML
  1. <specialize state="({progress}-greater-than:0) and ({progress}-less-than:1)">
  2. <button tag="button">
  3. <text>Resume</text>
  4. </button>
  5. </specialize>
  6. <specialize state="({progress}:0), ({progress}:1)">
  7. <button tag="button">
  8. <text>Play</text>
  9. </button>
  10. </specialize>

tumblerItem

The tumblerItem displays title information for a tumblerHeader. As the user swipes left and right on the remote, the previous and next tumblerItem elements are displayed. tumblerItem can contain the elements:

tumblerItem can be a subelement of:

Listing 22-14 shows an example of a tumblerItem element.

Listing 22-14tumblerItem example TVML
  1. <tumblerItem>
  2. <title>Title</title>
  3. <subtitle>SubTitle</subtitle>
  4. </tumblerItem>