Implementing Public Preview

This topic describes how to implement a public preview for the Smart Hub Preview feature. A public preview shows the same preview content to all users.

Public preview content is defined by a remotely-hosted JSON file. You can configure the JSON file to expire and refresh at a specific time. The public preview generation process is shown in the following figure.

Figure 1. Public preview generation process

Figure 1. Public preview generation process

  1. The URL to the remote JSON file is defined in the application's "config.xml" file.
  2. The preview is generated and shown based on the JSON data.
  3. The user clicks a preview tile.
  4. The tile's corresponding JSON "action_data" value is sent to the application.
  5. The application parses the "action_data" value and shows the detail page.


To enable your application to use the public preview functionality:

  1. Define the remote JSON file URL in the "config.xml" file:

    <tizen:metadata key='' value='endpoint_URL=http://yourServer/JSONfile.json'></tizen:metadata> 
  2. Disable reloading the application main page when it receives an application control request. This allows your application, if it is already running, to receive the "action_data" information without reloading.

      <tizen:src name='index.html' reload='disable'></tizen:src>
      <tizen:operation name=''></tizen:operation> 
  3. If you want the application to support 2015 TV models, in the "config.xml" file, set the required_version attribute to "2.3" and the development API version meta data to "2.4":

    <tizen:application ... required_version='2.3'></tizen:application>
    <tizen:metadata key='' value='2.4'></tizen:metadata> 

Configuring Public Preview Data

The preview content is defined in JSON format. The application can only use 1 preview content JSON file at a time.

The following table lists the structure and parameters for the preview content JSON data.

Table 1. Preview JSON parameters
Parameter Type Mandatory Description
"expires" UTC timestamp False For public preview only
If specified, the time at which the preview content is updated. The time is at most 1 week into the future. By default, the preview content is updated every 10 minutes, whenever the TV is switched on, or the JSON file changes.
"expires_only" Boolean For public preview only
If this value is "true", the preview content is updated only at the time specified by the "expires" parameter. The default value is "false".
"sections" Array True Preview sections
"title" String False Section title
"position" Integer Section position
If specified, sections are shown in ascending position order.
"tiles" Array True Tiles within the section
"title" String False Tile title
"subtitle" Tile subtitle
"image_url" True Thumbnail image URL
"image_ratio" Thumbnail image aspect ratio:
  • "16:9"
  • "4:3"
  • "1:1" (default)
  • "2:3"
The thumbnail height is fixed at 250 px on presentation.
"action_data" Data to send to the application when the tile is clicked
"is_playable" If "true", a "Play" icon is shown over the thumbnail image
"display_from" UTC timestamp False Time to begin showing the tile
"display_until" Time to stop showing the tile
"position" Integer Section position
If specified, sections are shown in ascending position order.

For an example of a preview content JSON file, see sampleJSON.

When the preview system requests JSON data from your server, TV information is sent in the HTTP header. You can serve different preview content depending on TV information, such as the country, language, or application version.

The following table lists the HTTP header fields that contain TV information.

Table 2. HTTP header fields
Field Description
ACCEPT-LANGUAGE TV language setting, such as 'en-US'
X-SAMSUNG-COUNTRY TV country code in ISO 3166-1 alpha2 format, such as 'US'
X-SAMSUNG-APP-VERSION Application version

When a tile is clicked, its associated "action_data" value is converted to an ApplicationControlData object with the "PAYLOAD" key:

  "key": "PAYLOAD", 
  "value": ["{\"values\": \"{\\\"videoIdx\\\": 1}\"}"] 

For more information on ApplicationControlData objects, see the Application API.

To implement deep-linking:

  1. To receive "action_data" information when the application is already running, add an event listener for the appcontrol event to the onload property:

    window.addEventListener('appcontrol', deepLink); 
  2. In the onload property, receive and parse the "PAYLOAD" key value, using the getCurrentApplication().getRequestedAppControl() method:

    function deepLink() { 
      var requestedAppControl = tizen.application.getCurrentApplication().getRequestedAppControl(); 
      var appControlData;
      var actionData; 
      var videoIdx; 
      var pictureIdx; 
      if (requestedAppControl) {
        appControlData =; 
        for (var i = 0; i < appControlData.length; i++) { 
          if (appControlData[i].key == 'PAYLOAD') { 
            actionData = JSON.parse(appControlData[i].value[0]).values; 
            if (JSON.parse(actionData).videoIdx) { 
              videoIdx = JSON.parse(actionData).videoIdx; 
            } else if (JSON.parse(actionData).pictureIdx) { 
              pictureIdx = JSON.parse(actionData).pictureIdx; 
      } else { 
        console.log("no req app control");