question

Mairon Corrales avatar image
Mairon Corrales asked

APL list image template scroll

I have a Skill that offers a list of videos and that list is scrollable. For that Im using a template from the authoring tool. Anyway the scroll feature of the template is not working correctly, when scrolling to the right options moves left, or the whole list bounce back. Does anybody knows why this is happening, or if this is a known issue?

alexa skills kitapl
10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Andy Whitworth avatar image
Andy Whitworth answered

Post up your APL document, or the relevant section, so we can comment.

10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.

Mairon Corrales avatar image
Mairon Corrales answered

Sure @Andy Whitworth

heres the apl template, and also a link to a video that shows the odd behaviour we are experiencing:

video: https://drive.google.com/file/d/1Ve56qa1z5mfITQbfYYQtCKi4Exdbtors/view?usp=sharing

video_list_data.json

{
    "imageListData": {
        "type": "object",
        "objectId": "imageListSample",
        "backgroundImage": {
            "sources": [
                {
                    "url": "{url}/config/visual_outputs/alexa/list/list-alexa-spot.png",
                    "size": "spot"
                },
                {
                    "url": "{url}/config/visual_outputs/alexa/list/long-text-alexa-small-blue-no-logo-v9.png",
                    "size": "small"
                },
                {
                    "url": "{url}/config/visual_outputs/alexa/list/long-text-alexa-medium-blue-logo-v8.png",
                    "size": "medium"
                },
                {
                    "url": "{url}/config/visual_outputs/alexa/list/long-text-alexa-large-blue-logo-v8.png",
                    "size": "large"
                },
                {
                    "url": "{url}/config/visual_outputs/alexa/list/long-text-alexa-extra-large-blue-logo-v8.png",
                    "size": "xlarge"
                }
            ]
        },
        "listItems": [],
        "hintText": "Try, \"Alexa, play video number two\"",
        "param":{
            "value":"{url}"
        }
    }
}

video_list.json:

{
    "type": "APL",
    "version": "1.7",
    "license": "Copyright 2021 Amazon.com, Inc. or its affiliates. All Rights Reserved.\nSPDX-License-Identifier: LicenseRef-.amazon.com.-AmznSL-1.0\nLicensed under the Amazon Software License  http://aws.amazon.com/asl/",
    "import": [
        {
            "name": "alexa-layouts",
            "version": "1.4.0"
        }
    ],
    "mainTemplate": {
        "parameters": [
            "payload"
        ],
        "items": [
            {
                "when": "${@viewportProfile == @hubRoundSmall}",
                "type": "Container",
                "width": "480dp",
                "height": "480dp",
                "items": [
                    {
                        "source": "",
                        "scale": "best-fit",
                        "align": "center",
                        "type": "Image",
                        "width": "150dp",
                        "height": "150dp",
                        "paddingTop": "20dp",
                        "position": "absolute",
                        "alignSelf": "center"
                    },
                    {
                        "type": "AlexaImageList",
                        "id": "image_list",
                        "theme": "light",
                        "headerTitle": "${payload.imageListData.title}",
                        "headerDivider": false,
                        "headerAttributionImage": "${payload.imageListData.param.value}/config/visual_outputs/alexa/welcome_stop/icon.png",
                        "backgroundImageSource": "${payload.imageListData.backgroundImage.sources[0].url}",
                        "backgroundBlur": false,
                        "backgroundColorOverlay": false,
                        "imageAspectRatio": "widescreen",
                        "imageMetadataPrimacy": true,
                        "imageScale": "best-fill",
                        "listItems": "${payload.imageListData.listItems}",
                        "hintText": "${payload.imageListData.hintText}"
                    },
                    {
                        "type": "Text",
                        "text": "some text",
                        "height": "50dp",
                        "width": "760dp",
                        "position": "absolute",
                        "color": "black",
                        "top": "130dp",
                        "left": "45dp",
                        "fontSize": "25dp"
                    }
                ]
            },
            {
                "when": "${@viewportProfile == @hubLandscapeSmall}",
                "type": "Container",
                "width": "960dp",
                "height": "480dp",
                "items": [
                    {
                        "type": "Image",
                        "width": "960dp",
                        "height": "480dp",
                        "source": "${payload.imageListData.param.value}/config/visual_outputs/alexa/list/long-text-alexa-small-blue-logo-v8.png"
                    },
                    {
                        "type": "AlexaImageList",
                        "theme": "light",
                        "headerTitle": "${payload.imageListData.title}",
                        "headerAttributionImage": "${payload.imageListData.logoUrl}",
                        "backgroundImageSource": "${payload.imageListData.backgroundImage.sources[1].url}",
                        "imageAspectRatio": "widescreen",
                        "imageMetadataPrimacy": true,
                        "imageScale": "best-fill",
                        "listItems": "${payload.imageListData.listItems}",
                        "backgroundColor": "white",
                        "backgroundAlign": "top",
                        "id": "image_list",
                        "position": "absolute",
                        "top": "90dp",
                        "hintText": "${payload.imageListData.hintText}"
                    },
                    {
                        "type": "Text",
                        "text": "some text",
                        "height": "60dp",
                        "width": "760dp",
                        "position": "absolute",
                        "color": "black",
                        "top": "90dp",
                        "left": "45dp",
                        "fontSize": "35dp"
                    }
                ]
            },
            {
                "when": "${@viewportProfile == @hubLandscapeMedium}",
                "type": "Container",
                "width": "1024dp",
                "height": "600dp",
                "items": [
                    {
                        "type": "Image",
                        "width": "1024dp",
                        "height": "600dp"
                    },
                    {
                        "type": "AlexaImageList",
                        "theme": "light",
                        "headerTitle": "${payload.imageListData.title}",
                        "headerAttributionImage": "${payload.imageListData.logoUrl}",
                        "backgroundImageSource": "${payload.imageListData.backgroundImage.sources[2].url}",
                        "imageAspectRatio": "widescreen",
                        "imageMetadataPrimacy": true,
                        "imageScale": "best-fill",
                        "listItems": "${payload.imageListData.listItems}",
                        "backgroundColor": "white",
                        "backgroundAlign": "top",
                        "id": "image_list",
                        "position": "absolute",
                        "top": "0dp",
                        "hintText": "${payload.imageListData.hintText}"
                    },
                    {
                        "type": "Text",
                        "text": "some text",
                        "height": "60dp",
                        "width": "760dp",
                        "position": "absolute",
                        "color": "black",
                        "top": "110dp",
                        "left": "45dp",
                        "fontSize": "35dp"
                    }
                ]
            },
            {
                "when": "${@viewportProfile == @hubLandscapeLarge}",
                "type": "Container",
                "width": "1280dp",
                "height": "800dp",
                "items": [
                    {
                        "type": "Image",
                        "width": "1280dp",
                        "height": "800dp"
                    },
                    {
                        "type": "AlexaImageList",
                        "theme": "light",
                        "headerTitle": "${payload.imageListData.title}",
                        "headerAttributionImage": "${payload.imageListData.logoUrl}",
                        "backgroundImageSource": "${payload.imageListData.backgroundImage.sources[3].url}",
                        "imageAspectRatio": "widescreen",
                        "imageMetadataPrimacy": true,
                        "imageScale": "best-fill",
                        "listItems": "${payload.imageListData.listItems}",
                        "backgroundColor": "white",
                        "backgroundAlign": "top",
                        "id": "image_list",
                        "position": "absolute",
                        "top": "0dp",
                        "hintText": "${payload.imageListData.hintText}"
                    },
                    {
                        "type": "Text",
                        "text": "some text",
                        "height": "60dp",
                        "width": "760dp",
                        "position": "absolute",
                        "color": "black",
                        "top": "130dp",
                        "left": "45dp",
                        "fontSize": "40dp"
                    }
                ]
            },
            {
                "when": "${@viewportProfile == @tvLandscapeXLarge}",
                "type": "Container",
                "width": "1024dp",
                "height": "600dp",
                "items": [
                    {
                        "type": "Image",
                        "width": "1024dp",
                        "height": "600dp"
                    },
                    {
                        "type": "AlexaImageList",
                        "theme": "light",
                        "headerTitle": "${payload.imageListData.title}",
                        "headerAttributionImage": "${payload.imageListData.logoUrl}",
                        "backgroundImageSource": "${payload.imageListData.backgroundImage.sources[4].url}",
                        "imageAspectRatio": "widescreen",
                        "imageMetadataPrimacy": true,
                        "imageScale": "best-fill",
                        "listItems": "${payload.imageListData.listItems}",
                        "backgroundColor": "white",
                        "backgroundAlign": "top",
                        "id": "image_list",
                        "position": "absolute",
                        "top": "0dp",
                        "hintText": "${payload.imageListData.hintText}"
                    },
                    {
                        "type": "Text",
                        "text": "some text",
                        "height": "60dp",
                        "width": "760dp",
                        "position": "absolute",
                        "color": "black",
                        "top": "110dp",
                        "left": "45dp",
                        "fontSize": "35dp"
                    }
                ]
            }
        ]
    }
}

Also we are rendering everything with the following code:

let rawData = fs.readFileSync('./visual_output/video/video_list_data.json');
let json_obj = JSON.parse(rawData);
let count = 0;
for (let item of this.$session.$data.mediaItems) {
    let list_item = {
        primaryText: `${item.title}`,
        imageSource: item.image_url,
        primaryAction: [
            {
                type: "SendEvent",
                arguments: `${count}`
            }
        ]
    }
    json_obj.imageListData.listItems.push(list_item);
    count++
}
json_obj.imageListData.param.value = process.env.BUCKET_URL;
for (let source of json_obj.imageListData.backgroundImage.sources) {
    source.url = source.url.replace('{url}', process.env.BUCKET_URL);
}
let json_raw_data = fs.readFileSync('./visual_output/video/video_list.json');
let json_obj_doc = JSON.parse(json_raw_data);
for (let item of json_obj_doc.mainTemplate.items) {
    item.items[2].text = this.$session.$data.video_title;
}
this.$alexaSkill.addDirective({
    type: 'Alexa.Presentation.APL.RenderDocument',
    version: '1.0',
    document: json_obj_doc,
    datasources: json_obj
});
10 |5000 characters needed characters left characters exceeded

Up to 2 attachments (including images) can be used with a maximum of 512.0 KiB each and 1.0 MiB total.