question

Susanne Lechner avatar image
Susanne Lechner asked

How can i change the color of the text in the Gridlist from AlexaLayout. Would like to have it in black and not in white. Thanks for your support...

alexa skills kitalexaapl
10 |5000

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

1 Answer

Andy Whitworth avatar image
Andy Whitworth answered

Hi,

You need a custom layout for the GridList, the Amazon documenation gives an example:

https://developer.amazon.com/en-US/docs/alexa/alexa-presentation-language/apl-alexa-grid-list-layout.html#custom-layout

You can then set the "color" property of the Text component to whatever colour you want.

i.e.

{
  "type": "APL",
  "version": "1.8",
  "theme": "dark",
  "import": [
    {
      "name": "alexa-layouts",
      "version": "1.4.0"
    }
  ],
  "mainTemplate": {
    "parameters": [
      "gridListData"
    ],
    "items": [
      {
        "type": "AlexaGridList",
        "headerTitle": "Header Title",
        "headerAttributionImage": "https://s3.amazonaws.com/ask-skills-assets/apl-layout-assets/attribution_dark_hub_prime.png",
        "backgroundImageSource": "https://d2o906d8ln7ui1.cloudfront.net/images/BT6_Background.png",
        "listItems": "${gridListData.listItemsToShow}",
        "customLayoutName": "MyListItem"
      }
    ]
  },
  "layouts": {
    "MyListItem": {
      "items": [
        {
          "type": "Container",
          "height": "100vh",
          "width": "100vw",
          "direction": "column",
          "items": [
            {
              "type": "Image",
              "width": "100%",
              "height": "50%",
              "source": "${data.imageUrl}",
              "scale": "best-fill",
              "align": "center"
            },
            {
              "type": "Text",
              "height": "100dp",
              "style": "textStyleBody",
              "text": "${data.listItemText}",
              "color": "#000000"
            }
          ]
        }
      ]
    }
  }
}

With a datasource of

{
  "gridListData": {
    "listItemsToShow": [
      {
        "listItemText": "First list item",
        "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gruyere.png"
      },
      {
        "listItemText": "Second list item",
        "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/md_gorgonzola.png"
      },
      {
        "listItemText": "Third list item",
        "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/tl_brie.png"
      },
      {
        "listItemText": "Fourth list item",
        "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/MollyforBT7.png"
      },
      {
        "listItemText": "Fifth list item (long text that wraps)",
        "imageUrl": "https://d2o906d8ln7ui1.cloudfront.net/images/sm_blue.png"
      },
      {
        "listItemText": "Sixth item, with no image"
      }
    ]
  }
}
10 |5000

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