Change color of individual list items in AlexaTextList? - alexa

Question

Is there a way to specify a color for the text in specific items in an AlexaTextList? In my example, I'd like to, based on a dynamic value in my lambda_handler, specific whether each text list item is red, yellow, or green. This is the template for the display:
{
"type": "APL",
"version": "1.8",
"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/",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.5.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "AlexaTextList",
"headerTitle": "${payload.textListData.title}",
"listItems": "${payload.textListData.listItems}",
"secondaryText": "${payload.headlineTemplateData.properties.textContent.secondaryText.text}",
"backgroundColor": "teal",
"id": "covidList"
}
]
}
}

Answer 1

You can't with AlexaTextList.
On APL, all component have the same base properties
One of the property is called style, and you can apply a style with a color but AlexaTextLists doesn't acknowledge it.
{
"redColor": {
"values": [
{
"color": "red"
}
]
},
}
// in your components:
{ ... "style": "redColor", ... }
AlexaTextLists contains a list of AlexaTextListItem and doesn't acknowledge it as well.
As of today, I recommend you to rely on Container and Text when you need more flexibility.
{
"type": "APL",
"version": "1.8",
"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/",
"theme": "dark",
"import": [
{
"name": "alexa-layouts",
"version": "1.5.0"
}
],
"mainTemplate": {
"parameters": [
"payload"
],
"items": [
{
"type": "Container",
"height": "100vh",
"width": "100vw",
"direction": "column",
"alignItems": "center",
"items": [
{
"type": "Text",
"color": "red",
"text": "Text in red"
},
{
"type": "Text",
"color": "blue",
"text": "Text in blue"
}
]
}
]
},
"styles": {}
}