Data binding for the Welcome screen

For now, choose the following Data JSON structure.

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

To reference the values of Data JSON into the APL document, you must write your data binding expression based on the following general rule:

"document_item_attribute": "${data_object.attribute}"

So, for example, the backgroundImage source property in the the APL document references the following expression:

"backgroundImageSource": "${information.backgroundImage.url}"

And then, in the data-sources.json, you can use the actual URL, like this:

{
    "information": {
        "backgroundImage": {
            "url": "https://d3j5530a0cofat.cloudfront.net/adlc/background.png",

(Data JSON continues…)

The path in data-sources.json aligns to the following expression (used in APL) document:

"${information.backgroundImage.url}"

A key to working with APL is writing data-binding expressions. Writing these expressions requires a unique syntax that you'll learn more about later.

Exercise 2

The following two JSON structures are incomplete, because the data binding process isn't over yet. Update the APL and Data JSON files so that you bind all data for the Welcome screen.

Use the following assets:

Background image: https://d3j5530a0cofat.cloudfront.net/adlc/background.png
Logo image: https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png
Header text: Welcome to Tic-Tac-Toe!
Footer text: Try, "Alexa, top row, left column"

APL document

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "information"
        ],
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "${information.backgroundImage.url}",
                "backgroundColorOverlay": true,
                "headerAttributionImage": "https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png",
                "primaryText": "Welcome to Tic-Tac-Toe!",
                "footerHintText": "Try, \"Alexa, top row, left column\""
            }
        ]
    }
}

data-source.json

{
    "information": {
        "backgroundImage": {
            "url": "https://d3j5530a0cofat.cloudfront.net/adlc/background.png",
            "colorOverlay": true
        },
        "logoUrl":
        "textContent": {
            "primaryText":
            "hintText":
        }
    }
}

Solution

Data JSON:

{
    "information": {
        "backgroundImage": {
            "url": "https://d3j5530a0cofat.cloudfront.net/adlc/background.png",
            "colorOverlay": true
        },
        "logoUrl": "https://d3j5530a0cofat.cloudfront.net/adlc/somelogo.png",
        "textContent": {
            "primaryText": "Welcome to Tic-Tac-Toe!",
            "hintText": "Try, \"Alexa, top row, left column\""
        }
    }
}

APL Document:

{
    "type": "APL",
    "version": "1.7",
    "theme": "dark",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "information"
        ],
        "items": [
            {
                "type": "AlexaHeadline",
                "id": "informationScreen",
                "backgroundImageSource": "${information.backgroundImage.url}",
                "backgroundColorOverlay": "${information.backgroundImage.colorOverlay}",
                "headerAttributionImage": "${information.logoUrl}",
                "primaryText": "${information.textContent.primaryText}",
                "footerHintText": "${information.textContent.hintText}"
            }
        ]
    }
}

Was this page helpful?

Provide feedback