Visualizing a List in APL using HTTP-Endpoint for Alexa

Question

I am currently building an Alexa Skill using my own .NET-Backend, which should return an AlexaTextList with dynamic contents from my service. The request by Alexa looks the following:

{
"version": "1.0",
"session": {
    "new": false,
    "sessionId": "amzn1.echo-api.session.d5f8d9ee-bdd0-4c70-96g9-b468b6b76cd4",
    "application": {
        "applicationId": "amzn1.ask.skill.a07cbc1c-b942-47d6-8fa2-84ebb61f1b15"
    },
    "user": {
        "userId": "amzn1.ask.account.AE5FYATFIAFQF4UKWWBLICFMLP4ZV6KSNQFZJSECBBMKQFEL2UNUD46CDHO67QQPUQ4JZAG53CMBYUWVOWNVXMHRBBUT7ATRZDX6KRV4U2QU5FSHGL6JGOAHWRPS77PSB2N2MLFP2WKCCSC6SPZXVQKY45DLAXOD2OOFQLVGIZ6PCBRWZAEAKZKSMPWI4D36EUGPJDMVURI6BWY"
    }
},
"context": {
    "Viewports": [
        {
            "type": "APL",
            "id": "main",
            "shape": "RECTANGLE",
            "dpi": 160,
            "presentationType": "STANDARD",
            "canRotate": false,
            "configuration": {
                "current": {
                    "mode": "HUB",
                    "video": {
                        "codecs": [
                            "H_264_42",
                            "H_264_41"
                        ]
                    },
                    "size": {
                        "type": "DISCRETE",
                        "pixelWidth": 1024,
                        "pixelHeight": 600
                    }
                }
            }
        }
    ],
    "Viewport": {
        "experiences": [
            {
                "arcMinuteWidth": 246,
                "arcMinuteHeight": 144,
                "canRotate": false,
                "canResize": false
            }
        ],
        "mode": "HUB",
        "shape": "RECTANGLE",
        "pixelWidth": 1024,
        "pixelHeight": 600,
        "dpi": 160,
        "currentPixelWidth": 1024,
        "currentPixelHeight": 600,
        "touch": [
            "SINGLE"
        ],
        "video": {
            "codecs": [
                "H_264_42",
                "H_264_41"
            ]
        }
    },
    "Extensions": {
        "available": {
            "aplext:backstack:10": {}
        }
    },
    "System": {
        "application": {
            "applicationId": "amzn1.ask.skill.a07cbd1c-b982-47d6-8aa1-84eeb61f1b15"
        },
        "user": {
            "userId": "amzn1.ask.account.AE5FYATFIAFQF4UKWWBLICFMLP4ZV6KSNQFZJSECBBMKQFEL2UNUD46CDHO67QQPUQ4JZAG53CMBYUWVOWNVXMHRBBUT7ATRZDX6KRD4U2QU5FSHHL6JGOAHWRPS77QSB4N2MFFP2WKCCSC6SPZXVQKY45DLAXOD2OOFQLVGIZ6PCBRWZAEAKZKSMPWI4D36EUGPJDMVURI6BWY"
        },
        "device": {
            "deviceId": "amzn1.ask.device.AF7IR4TWRMUA5FWIUWMXJ7726QZIXXJJ4CF62N7S3N6Q5O3RTRGORGUCJ2IFWMKO2SYDWWCO4NH2AOGR35QTQSUVVJWJSU54YACLQJW2URDL6NIQMGTN7DGI7LX76B6Y4L45FMWMGBOCVC7JCFJOWQ4WTVYDYENBZUVMJQDZ4VU23MCWAC25Y",
            "supportedInterfaces": {}
        },
        "apiEndpoint": "https://api.eu.amazonalexa.com",
        "apiAccessToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImtpZCI6IjEifQ.eyJhdWQiOiJodHRwczovL2FwaS5hbWF6b25hbGV4YS5jb20iLCJpc3MiOiJBbGV4YVNraWxsS2l0Iiwic3ViIjoiYW16bjEuYXNrLnNraWxsLmEwN2NiYzFjLWI5ODItNDdkNi04ZmExLTg0ZWViNjFmMWIxNSIsImV4cCI5MTYxMjM1MTY5MywiaWF0IjoxNjEyMzUxMzkzLCJuYmYiOjE2MTIzNTEzOTMsInByaXZhdGVDbGFpbXMiOnsiY29udGV4dCI6IkFBQUGBQUFBQVFESjl5V3BUNVYwd05XZnNmQk43YzdiS2dFQUFBQUFBQUM4WXQ3ZWNBNU4vUllSdmE1UENyM1dEUlJRQUljOWhodasd3E2Y29qckk3L01zVmFCTjl1aDRhOWd4Zmw4bFF5WEc3QU9MZTlGdjhoWjNBMUhyclpYeDBkM3A1Q2w4U3pyQ0dXQU1rSWI3eVlHL1B0dDYvT05qYW1XTnBTbERMa3FZbG5WdFdzVkdQRC9LTWVqTko5TFZ4dGJ0WTZWLzVlOEhmSkp4UE9YeXB5Q3BaRWluYdRQZ2dlclN0NjlRczZoN1Y3cmtTOTE0MDE4S05HTGlaZGtXTHVPZzdSczluNUFNcTlTV1paK3lBVjhpTE1Va2puallxWi9BdEY2c25uTDBCcU5Xbnd4RUdnRytRL0x6YThJT1d5cWcxYVliRHMwMGtRRHdTd2thTXFpNlNRU0c2aTM4OGVpZG9IOXBTZDFpZ4RabTNRbndpRGpjb1ZHTDNYeVZDYUNTazlUUnZIRVZ6c2V3cHJqWHd3bUVVTWwxV0lxRGgwMGNsN3pPYTdDd3FTOWN0RytEeGxvVCtVIiwiY29uc2VudFRva2VuIjpudWxsLCJkZXZpY2VJZCI6ImFtem4xLmFzay5kZXZpY2UuQUY3SVI0VFdSTVVBNUZXSVVXTVhKNzcyNlFaSVhYSko0Q0Y2Mk43UzNONlE1TzNSVFJHT1JHVUNKMklGV01LTzJTWURXV0NPNE5IMkFPR1IzNVFUUVNVVlZKV0pTVTU0WUFDTFFKVzJVUkRMNk5JUU5OVE43REdJN0xYNzZCNlk0TDQ1Rk1XTUdCT0NWQzdKQ0ZKT1dRNFdUVllEWUVOQlpVVk1KUURaNFZVMjNNQ1dBQzI1WSIsInVzZXJJZCI6ImFtem4xLmFzay5hY2NvdW50LkFFNUZZQVRGSUFGUUY0VUtXV0JMSUNGTUxQNFpWNktTTlFGWkpTRUNCQk1LUUZFTDJVTlVENDZDREhPNjdRUVBVUTRKWkFHNTNDTUJZVVdWT1dOVlhNSFJCQlVUN0FUUlpEWDZLUlY0VTJRVTVGU0hHTDZKR09BSFdSUFM3N1FTQjROMk1GRlAyV0tDQ1NDNlNQWlhWUUtZNDVETEFYT0QyT09GUUxWR0laNlBDQlJXWkFFQUtaS1NNUFdJNEQzNkVVR1BKRE1WVVJJNkJXWSJ9fQ.Yvl9fFy22oe429RMpfUp7fJskz0sJDa_YKSKqprIKGsHK9lUrHe4vhNKEANKa-gVpyXdAR-uHZbfutuTW6qDy_1eVdIUdr-4ye-b2MTUbp8sJ9ag2zfR_sgQEkGEbqF5L9dGtpaWS06zivuV8gxWUkwOMihNrmv6WP8YC_Qkj_FfQ-OTcJ-2q0BpiDtURX8Ai8JW0c1qhSglJHXlqVqCLpyuDWR0QhJHzS0n5H0opoyNUAF3w4nibxPxV9jmo4jdM8Fqgz3I1rvKPa2nTsrGPJfLDFxPsxtNuUGwxbWglJu4nkzg--f2cTgZE5vmKsaJoUzt5IB3c9H07IPhwC82Iw"
    }
},
"request": {
    "type": "IntentRequest",
    "requestId": "amzn1.echo-api.request.ff4e8edd-f343-4842-82bb-79eb1c1f5c22",
    "locale": "en-GB",
    "timestamp": "2021-02-03T11:23:13Z",
    "intent": {
        "name": "RESOLVE_CONFLICT",
        "confirmationStatus": "NONE",
        "slots": {
            
        }
    },
    "dialogState": "COMPLETED"
}

}

My service is then responding:

{
"version": "1.0",
"response": {
    "outputSpeech": {
        "type": "PlainText",
        "text": "Please select a cat."
    },
    "directives": [
        {
            "type": "Alexa.Presentation.APL.RenderDocument",
            "token": "resolve_action",
            "document": {
                "type": "APL",
                "version": "1.4",
                "theme": "dark",
                "import": [
                    {
                        "name": "alexa-layouts",
                        "version": "1.2.0"
                    }
                ],
                "resources": [],
                "onMount": [],
                "mainTemplate": {
                    "parameters": [
                        "payload"
                    ],
                    "items": [
                        {
                            "type": "AlexaTextList",
                            "id": "peopleList",
                            "headerTitle": "${payload.textListData.title}",
                            "headerBackButton": false,
                            "headerAttributionImage": "${payload.textListData.logoUrl}",
                            "backgroundBlur": false,
                            "backgroundColorOverlay": true,
                            "listItems": "${payload.textListData.listItems}"
                        }
                    ]
                }
            },
            "datasources": {
                "textListData": {
                    "type": "object",
                    "objectId": "textList",
                    "title": "Meeting Assistant | Resolve Conflict",
                    "listItems": [
                        {
                            "primaryText": "Mr. Cat",
                            "imageAlignment": "center",
                            "imageBlurredBackground": true,
                            "imageScale": "best-fit",
                            "imageThumbnailSource": "https://ichef.bbci.co.uk/news/976/cpsprodpb/12A9B/production/_111434467_gettyimages-1143489763.jpg",
                            "primaryAction": [
                                {
                                    "type": "SetValue",
                                    "componentId": "peopleList",
                                    "property": "headerTitle",
                                    "value": "Click"
                                }
                            ]
                        }
                    ],
                    "logoUrl": "https://w3-mediapool.hm.edu/mediapool/media/fk10/fk10_lokal/02_aktuelles/02_news/wintersemester_2020/langmann_3/FirstSpirit_1606121272258Akoa-logo-gradient-AKOA_Sunrise_35cm.png"
                }
            }
        }
    ],
    "shouldEndSession": false
}

}

Instead of a beautiful visualisation in my testing environment in the Alexa Console, I retrieve the following:

"error": {
    "type": "INVALID_RESPONSE",
    "message": "An exception occurred while dispatching the request to the skill."
}

As this scenario is very difficult to debug (if you have any suggestions for this problem as well, please let me know), it took me an eternity to this point, but I am just not able to resolve the issue. The error message is quite generic, it just cannot parse it properly. But according to the documentation, it is supposed to be fine (https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-interface.html#renderdocument-directive).

Interestingly, this only happens, if I am making use of the directive field in the response model. Basic card-responses are working fine, so I assume that the problem must be somewhere in the directive... Do you have any ideas how to proceed on this? Or did I miss something?

Thank you very much in advance!

the [tag:apl] tag represents the programming language APL, not the Alexa Presentation Language. You may want to remove that tag. — Razetime, Feb 04 '21 at 04:17
You APL document and datasources look perfectly fine. Although I not sure if the device you are using supports APL or if you have enabled APL for your skill. According to this [doc](https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-interface.html#renderdocument-directive) `When the user's device has a screen that supports APL, the context.System.device.supportedInterfaces object includes [Alexa.Presentation.APL]`. Checkout this [doc](https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-support-for-your-skill.html) for enabling APL — AB9KT, Feb 06 '21 at 03:33
Thank you for your validation and your remark regarding device capabilities. I am using the Web-Console for testing, which provides a user interface. Beside activating the interface in the console, do I have to activate any other setting? I assumed that this is already enough. — Kitzng, Feb 07 '21 at 09:32
It is hard to comment any further without looking at all the skill settings. It looks like you are using a dialogModel and also gathering data using GUI. You can try turning off dialogModel. Just a suggestion. — AB9KT, Feb 08 '21 at 07:52

score 1 · Accepted Answer · answered Feb 08 '21 at 09:20

I figured out what is the problem. I was using different HTTP 2xx-Status Codes, while Alexa only accepts 200 (https://developer.amazon.com/en-US/docs/alexa/custom-skills/request-and-response-json-reference.html#http-header-1).

My problem therefore was not related to my request data or any settings in the developer console, but my HTTP-Header. It is a little confusing for me, because I was actually returning success status codes that could have been accepted, but apparently Alexa has strict requirements for that. I was not aware of this. Thanks to everyone, who was trying to help me out here and was validating my JSON-response.

Visualizing a List in APL using HTTP-Endpoint for Alexa

1 Answers1