Data JSON structure

APL allows you to design the Data JSON structure and name the attributes of the “information” object. The easiest way to get started is to first identify all the common elements in the information screens. Every “information” screen comprises the following three basic elements:

  • Background image
  • Logo Image
  • Text

Given the following APL document:

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "information"
        ],
        "items": [
            {
            }
        ]
    }
}

See a very basic structure of data-source.json.

{
    "information": {
        "backgroundImage":"",
        "logoImage": "",
        "textContent": ""
    }
}

Although the above structure is a good start, look closely. For now, assume that you only want to design the Welcome screen.

img

  • The backgroundImage must have two attributes: one for the image's URL, and one for the value of backgroundColorOverlay.
  • The logo image, headerAttributionImage, only has a URL.
  • The textContent must have two attributes: one storing the string value of primary text, and the second storing the footnote / hint string value that displays at the bottom of the screen.

Now study the updated version of the data source that includes these three elements, as shown in the following example.

{
    "information": {
        "backgroundImage": {
            "url":
            "colorOverlay":
        },
        "logoUrl":
        "textContent": {
            "primaryText":
            "hintText":
        }
    }
}

This way, you can have one-to-one parity with the initial APL document. Of course, this isn't the only way to design the Data JSON structure for the Welcome screen.


Was this page helpful?