expected output:
row 0/3 column 0/12 | column 1/12 | column 2/12 | ... row 1/3 column 0/12 | column 1/12 | column 2/12 | ... row 2/3 column 0/12 | column 1/12 | column 2/12 | ...
(works in the authoring tool)
observed output: (real device)
row 0/2 column 0/1 row 1/2 column 0/1 row 2/2 column 0/2
authoring tool export:
{ "document": { "type": "APL", "version": "1.0", "theme": "dark", "import": [], "resources": [], "styles": {}, "layouts": {}, "mainTemplate": { "parameters": [ "payload" ], "item": { "type": "Container", "width": "100vw", "height": "100vh", "items": [ { "type": "Sequence", "height": "100%", "data": "${payload.dummy.properties.rows}", "scrollDirection": "vertical", "item": { "type": "Container", "items": [ { "type": "Text", "text": "row ${index} / ${length}" }, { "type": "Sequence", "scrollDirection": "horizontal", "width": "100%", "data": "${data.cols}", "item": { "type": "Container", "width": "400px", "items": [ { "type": "Text", "text": "column ${index} / ${length}" } ] } } ] } } ] } } }, "dataSources": { "dummy": { "type": "object", "properties": { "rows": [ { "cols": [ "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar" ] }, { "cols": [ "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar" ] }, { "cols": [ "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar", "foo", "bar" ] } ] } } } }
the following markup works fine, except I can't use the desired variables ${index} and ${length} (always gives 0 and 1)
{ "type": "APL", "version": "1.0", "theme": "dark", "import": [], "resources": [], "styles": {}, "layouts": {}, "mainTemplate": { "parameters": [ "payload" ], "item": { "type": "Container", "width": "100vw", "height": "100vh", "items": [ { "type": "Sequence", "height": "100%", "data": "${payload.dummy.properties.rows}", "scrollDirection": "vertical", "item": { "type": "Container", "items": [ { "type": "Text", "text": "row ${index} / ${length}" }, { "type": "Sequence", "scrollDirection": "horizontal", "width": "100%", "item": { "type": "Container", "data": "${data.cols}", "direction": "row", "items": [ { "type": "Container", "width": "400px", "items": [ { "type": "Text", "text": "column ${index} / ${length}" } ] } ] } } ] } } ] } } }