- 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": {}
}