Creating Dynamic Text List with Speak

  • For a recipe kind of skill, I needed a dynamic text list.
  • Did some part of the APL but got stuck.
  • I got lots of help from the Amazon Support team
  • Here is the finished APL.document, which display dynamic list data in columns and speaks out sequentially,
  • Thought it will be useful to post here, should someone need such kind of layout

Forum reference is below:

https://forums.developer.amazon.com/questions/228903/creating-a-variable-dynamic-text-list.html?childToView=231716#answer-231716

The finished APL document is below (test it on ADC and Device).

{
    "document": {
        "type": "APL",
        "version": "1.3",
        "settings": {},
        "theme": "dark",
        "import": [
            {
                "name": "alexa-layouts",
                "version": "1.1.0"
            }
        ],
        "resources": [],
        "styles": {
            "flip": {
                "values": [
                    {
                        "color": "white",
                        "fontWeight": 1600
                    },
                    {
                        "when": "${state.karaoke}",
                        "color": "yellow",
                        "fontWeight": 1300
                    },
                    {
                        "when": "${state.karaokeTarget}",
                        "color": "blue"
                    }
                ]
            }
        },
        "graphics": {},
        "commands": {
            "RecursiveSpeakList": {
                "parameters": [
                    "recipe",
                    {
                        "name": "index",
                        "type": "number",
                        "default": 0
                    }
                ],
                "commands": [
                    {
                        "when": "${recipe[index]}",
                        "type": "SpeakList",
                        "componentId": "recipeRow${index}",
                        "start": 0,
                        "count": "4",
                        "minimumDwellTime": 700,
                        "align": "center"
                    },
                    {
                        "when": "${index < recipe.length - 1}",
                        "type": "RecursiveSpeakList",
                        "index": "${index + 1}",
                        "recipe": "${recipe}"
                    }
                ]
            }
        },
        "layouts": {},
        "mainTemplate": {
            "parameters": [
                "payload"
            ],
            "items": [
                {
                    "type": "Container",
                    "width": "100vw",
                    "height": "100vh",
                    "onMount": [
                        {
                            "type": "RecursiveSpeakList",
                            "recipe": "${payload.currentView.properties.recipe}"
                        }
                    ],
                    "items": [
                        {
                            "type": "ScrollView",
                            "width": "100%",
                            "height": "100%",
                            "item": [
                                {
                                    "type": "Container",
                                    "data": "${payload.currentView.properties.recipe}",
                                    "items": [
                                        {
                                            "type": "Container",
                                            "style": "flip",
                                            "bind": [
                                                {
                                                    "name": "i",
                                                    "value": "${index}"
                                                }
                                            ],
                                            "direction": "row",
                                            "id": "recipeRow${i}",
                                            "item": [
                                                {
                                                    "type": "AlexaOrdinal"
                                                },
                                                {
                                                    "type": "Text",
                                                    "speech": "${data.speech_ingred}",
                                                    "style": "flip",
                                                    "width": "300",
                                                    "text": "${data.ingred}"
                                                },
                                                {
                                                    "type": "Text",
                                                    "speech": "${data.speech_qty}",
                                                    "style": "flip",
                                                    "text": "${data.qty}"
                                                },
                                                {
                                                    "type": "Text",
                                                    "speech": "${data.speech_cal}",
                                                    "style": "flip",
                                                    "paddingLeft": "40",
                                                    "text": "${data.cal}"
                                                }
                                            ]
                                        }
                                    ],
                                    "numbered": true
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    },
    "datasources": {
        "currentView": {
            "type": "object",
            "properties": {
                "recipe": [
                    {
                        "ingred": "Ingredient 1",
                        "qty": "quantity 1",
                        "cal": "Calories 1"
                    },
                    {
                        "ingred": "Ingredient 2",
                        "qty": "quantity 2",
                        "cal": "Calories 2"
                    },
                    {
                        "ingred": "Ingredient 3",
                        "qty": "quantity 3",
                        "cal": "Calories 3"
                    },
                    {
                        "ingred": "Ingredient 4",
                        "qty": "quantity 4",
                        "cal": "Calories 4"
                    },
                    {
                        "ingred": "Ingredient 5",
                        "qty": "quantity 5",
                        "cal": "Calories 5"
                    }
                ]
            },
            "transformers": [
                {
                    "inputPath": "recipe[*].ingred",
                    "outputName": "speech_ingred",
                    "transformer": "textToSpeech"
                },
                {
                    "inputPath": "recipe[*].qty",
                    "outputName": "speech_qty",
                    "transformer": "textToSpeech"
                },
                {
                    "inputPath": "recipe[*].cal",
                    "outputName": "speech_cal",
                    "transformer": "textToSpeech"
                }
            ]
        }
    },
    "sources": {}

}