question

newuser-4fbb27a8-4838-427b-9baa-970465ad771c avatar image

Alexa APL List of Lists

Hi, I was wondering if it were possible for APL to create some sort of list of lists.


I'm imagining a Sequence that scrolls vertically. Each component in the vertical sequence will be a horizontal Sequence that scrolls horizontally. (Think: 2d array)


I'm essentially trying to create a screen like the Netflix screen: https://www.lifewire.com/thmb/XnkbRZd21UCegx-GpqJUAMTTEag=/2880x1578/filters:no_upscale():max_bytes(150000):strip_icc()/ScreenShot2020-01-03at2.43.39PM-c823fee2c15a4caa9e3bd679c7023e0c.jpg


Is this feasible? I haven't been able to find many resources on 2d lists like this. I've worked with the basic Alexa Layout ImageList and tried going from there, but I'm not able to get the vertical scroll to work.


Thanks!

alexa skills kitskillalexaaplalexa presentation language
10 |5000
Toggle Comment visibility. Current Visibility: Viewable by all users

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

1 Answer

Alexander Martin avatar image
Alexander Martin answered

Hi,

the answer is very clear: it is possible! and it is as simple as it looks on the picture.

here is an example:

{
  "document": {
    "type": "APL",
    "version": "1.3",
    "settings": {},
    "theme": "dark",
    "import": [],
    "resources": [],
    "styles": {},
    "onMount": [],
    "graphics": {},
    "commands": {},
    "layouts": {},
    "mainTemplate": {
      "parameters": [
        "payload"
      ],
      "items": [
        {
          "type": "Container",
          "width": "100vw",
          "height": "100vh",
          "items": [
            {
              "type": "Sequence",
              "width": "100%",
              "height": "100%",
              "data": "${payload.currentView.properties.movies}",
              "items": [
                {
                  "type": "Container",
                  "height": "40vh",
                  "width": "100%",
                  "items": [
                    {
                      "type": "Container",
                      "paddingTop": "30dp",
                      "items": [
                        {
                          "type": "Text",
                          "fontWeight": 700,
                          "text": "${data.headline}",
                          "paddingLeft": "50dp"
                        },
                        {
                          "type": "Sequence",
                          "scrollDirection": "horizontal",
                          "width": "100%",
                          "height": "100%",
                          "data": "${data.items}",
                          "items": [
                            {
                              "type": "Container",
                              "width": "30vw",
                              "height": "30vh",
                              "alignItems": "center",
                              "justifyContent": "center",
                              "items": [
                                {
                                  "type": "Text",
                                  "text": "${data.text}"
                                }
                              ]
                            }
                          ]
                        }
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  },
  "datasources": {
    "currentView": {
      "type": "object",
      "properties": {
        "movies": [
          {
            "headline": "Popular",
            "items": [
              {
                "text": "Movie 1"
              },
              {
                "text": "Movie 2"
              },
              {
                "text": "Movie 3"
              },
              {
                "text": "Movie 4"
              },
              {
                "text": "Movie 5"
              }
            ]
          },
          {
            "headline": "Trending now",
            "items": [
              {
                "text": "Movie 6"
              },
              {
                "text": "Movie 7"
              },
              {
                "text": "Movie 8"
              },
              {
                "text": "Movie 9"
              },
              {
                "text": "Movie 10"
              }
            ]
          },
          {
            "headline": "Top 10",
            "items": [
              {
                "text": "Movie 11"
              },
              {
                "text": "Movie 12"
              },
              {
                "text": "Movie 13"
              },
              {
                "text": "Movie 14"
              },
              {
                "text": "Movie 15"
              }
            ]
          },
          {
            "headline": "Action",
            "items": [
              {
                "text": "Movie 16"
              },
              {
                "text": "Movie 17"
              },
              {
                "text": "Movie 18"
              },
              {
                "text": "Movie 19"
              },
              {
                "text": "Movie 20"
              }
            ]
          }
        ]
      }
    }
  },
  "sources": {}
}

Regards,

Alex

10 |5000
Toggle Comment visibility. Current Visibility: Viewable by all users

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