Apple TV Docs

Tips

Rough set of tips that we've learned along the way.

General Tips

  1. Don't mistake TVML for HTML.
  2. Styling is very similar to CSS but much more basic.
  3. The autoHighlight property is a great way to set the initially selected object on a screen.
  4. There is no implementation of a WebView in TvOS. (why?)

Markup

Images

  1. SVG images are not supported.
  2. Image URLs can't have
  3. Try to avoid using huge images. This can cause slow load times. Remember that you can be a little bit more lenient with compression because usually someone sits much further back from a TV than a monitor. Having a CDN that allows you to compress images with a query string parameter in the URL is a great option, and might save you future headaches.

Text Overflow

In the Apple documentation, you can see the <description> tag has access to a handlesOverlow attribute. This is defaulted to true. This changes the behavior of the element. When the text becomes too long, this makes the element focusable and highlightable, with a "MORE" label attached to the end of it. We added some additional logic for this to be functional right out of the box, by pushing a modal on to the stack containing the overflow content.

We added some additional attributes for you to customize this even further.

Attribute KeyTypeDescription
overflowTitlestringThe title to pass into the overflow modal. Appears above the content.
overflowShowDismissButtonbool  Whether or not to show the dismiss button. The back button on the remote will always be functional. Defaults to true.  
overflowDismissButtonTextstring  Only valid if overflowShowDismissButton is true. Set this to change the text of the dismiss buton. Defaults to dismiss.  
 
{% capture longDescription %}Churchly ipsum dolor amet bind fellowship brought it slippery slope. Bless his heart lostness free, marvelous light worship leader dig in secular seeker friendly K-LOVE guard your heart. Orthoparodoxical theology good good good good Father volunteer hyper-spiritual sermon seeing the fruit slippery slope father, I just father. Orthoparodoxical apostolic worship leader, small group sermon skinny jeans oceans contemporary bless his heart. Guard your heart rich mahogany ESV potluck secular. Wrecked lostness God-thing Sunday anointed community group{% endcapture %}

<description overflowTitle="Overflow!"
    overflowDismissButtonText="Got it.">{{ longDescription }}
</description>

QR Code

If you need to display a QR code, use the built-in tool to generate one via URL:

{% capture qrUrl %}{{ 'Global' | Attribute:'PublicApplicationRoot' }}GetQRCode.ashx?data=UrlGoesHere&outputType=png{% endcapture %}
<img src="{{ qrUrl | Escape }}" />