Documentation Archive

Developer

Apple TV Markup Language Reference

On This Page

searchTemplate

Use the search template (searchTemplate) to display a text field that takes user input in order to search for a specific item; for example, looking for a specific movie to download. Developers can also display preselected results in a shelf, list, or collectionList element under the search field. Figure 17-1 shows the basic layout for a searchTemplate page. The theme for the search template defaults to the system preference.

Figure 17-1Search template image: ../Art/ATV_temps_search_2x.png

Main Elements of the Search Template

Listing 17-1shows the main elements in TVML format, and Table 17-1 describes the main elements.

Listing 17-1searchTemplate TVML format
  1. <searchTemplate>
  2. <searchField />
  3. <shelf>
  4. <header>
  5. </header>
  6. <section>
  7. <lockup>
  8. <img />
  9. <title>…</title>
  10. </lockup>
  11. </section>
  12. </shelf>
  13. </searchTemplate>

Table 17-1searchTemplate element descriptions

Element name

Description

img

A figure representing a search result.

lockup

A group of elements describing a search result or prepopulated results.

searchField

A text field where the user is able to enter search terms. JavaScript is used to read the information entered.

section

Elements that are grouped together so that they can be treated as one element for layout purposes.

shelf

Element containing a row of options (such as most popular movies) or search results.

title

The title for a search result.

Search Template Example

Listing 17-2 shows the TVML for a searchTemplate example. The example displays a search field and keyboard along the top of the screen. A shelf is prepopulated with popular movies. Figure 17-2 shows the output for the code example.

Listing 17-2searchTemplate example TVML
  1. <document>
  2. <searchTemplate>
  3. <searchField/>
  4. <shelf>
  5. <header>
  6. <title>Popular</title>
  7. </header>
  8. <section>
  9. <lockup>
  10. <img src="path to images on your server/Car_Movie_250x375_A.png" width="182" height="274" />
  11. <title>Movie 1</title>
  12. </lockup>
  13. <lockup>
  14. <img src="path to images on your server/Car_Movie_250x375_B.png" width="182" height="274" />
  15. <title>Movie 2</title>
  16. </lockup>
  17. <lockup>
  18. <img src="path to images on your server/Car_Movie_250x375_C.png" width="182" height="274" />
  19. <title>Movie 3</title>
  20. </lockup>
  21. </section>
  22. </shelf>
  23. </searchTemplate>
  24. </document>
Figure 17-2searchTemplate example output image: ../Art/searchTemplateSS_2x.png