11-27-2018 05:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

11-27-2018 05:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
Is there any way to add a header in the Virtual Tile List?
Answered! Go to the Best Answer.
Accepted Solutions
12-14-2018 13:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-14-2018 13:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Here's an example. Please note that each Pool ID and the Pool Item IDs must match.
<svg id="ui" display="inline"> <defs> <symbol id="header-item" href="#tile-list-item" focusable="false" class="header" height="45%" display="none"> <textarea id="header-text" y="5%" fill="white">Locate your pain in body part.</textarea> <textarea y="80%" font-size="24" fill="#a0a0a0">Select</textarea> </symbol> <symbol id="tile-item" href="#tile-list-item" focusable="false" pointer-events="none" system-events="all" display="none"> <use id="item-text" href="#checkbox-tile" pointer-events="all" value="0"> <set href="header/text" attributeName="text-buffer" to="Can not afford medication" /> </use> <rect id="tile-divider-bottom" class="tile-divider-bottom" /> </symbol> </defs> <use id="tile-list" href="#tile-list" height="100%"> <var id="virtual" value="1" /> <var id="reorder-enabled" value="0" /> <var id="separator-height-bottom" value="2" /> <use id="header-pool" href="#tile-list-pool"> <use id="header-pool[0]" href="#header-item" class="tile-list-item" /> <use id="header-pool[1]" href="#header-item" class="tile-list-item" /> <use id="header-pool[2]" href="#header-item" class="tile-list-item" /> <use id="header-pool[3]" href="#header-item" class="tile-list-item" /> <use id="header-pool[4]" href="#header-item" class="tile-list-item" /> <use id="header-pool[5]" href="#header-item" class="tile-list-item" /> <use id="header-pool[6]" href="#header-item" class="tile-list-item" /> <use id="header-pool[7]" href="#header-item" class="tile-list-item" /> <use id="header-pool[8]" href="#header-item" class="tile-list-item" /> <use id="header-pool[9]" href="#header-item" class="tile-list-item" /> </use> <use id="item-pool" href="#tile-list-pool"> <use id="item-pool[0]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[1]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[2]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[3]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[4]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[5]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[6]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[7]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[8]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[9]" href="#tile-item" class="tile-list-item" /> </use> </use> </svg>
import document from "document"; let dataSet = [{ type: "header", text: "Section 1" }, { type: "item", text: "item 1-1" }, { type: "item", text: "item 1-2" }, { type: "item", text: "item 1-3" }, { type: "item", text: "item 1-4" }, { type: "header", text: "Section 2" }, { type: "item", text: "item 2-1" }, { type: "item", text: "item 2-2" }, { type: "item", text: "item 2-3" }, { type: "item", text: "item 2-4" }, { type: "header", text: "Section 3" }, { type: "item", text: "item 3-1" }, { type: "item", text: "item 3-2" }, { type: "item", text: "item 3-3" }, { type: "item", text: "item 3-4" }] const tileList = document.getElementById("tile-list"); function updateTileList(data) { tileList.delegate = { getTileInfo: (index) => { const poolType = (data[index].type === "header") ? "header-pool" : "item-pool"; return { type: poolType, data: data[index], }; }, configureTile: (tile, info) => { if (info.data.type === "header") { tile.getElementById("header-text").text = info.data.text; } else { tile.getElementById("item-text").text = info.data.text; } } }; if (tileList.length != data.length) { tileList.length = data.length; } } updateTileList(dataSet);

11-28-2018 12:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


11-28-2018 12:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
You can use two pools of tiles, so you can render them differently.

12-06-2018 04:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-06-2018 04:52
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@JonFitbit Not working fine. After recycling Header is added on Next chunk.
eg:
Header
Item1
Item2
Item3
Item4
Item5
Item6
Item7
Item8
Item9
Header
Item10
Item11
I hope you understand my point, please resolve this issue.
Thanks,
Manish

12-10-2018 00:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-10-2018 00:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
@JonFitbit Waiting for your reply..........

12-10-2018 22:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-10-2018 22:07
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I too would like to see a code example of how to achieve this. I tried trial and error months ago using syntax from the non-pool example code and it didn't work so I gave up the idea.

12-11-2018 11:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-11-2018 11:41
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Can you provide an export of your project or a gist?

12-12-2018 00:04 - edited 12-12-2018 01:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-12-2018 00:04 - edited 12-12-2018 01:30
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Yes, please.
Please see code from below link.
https://drive.google.com/open?id=10-RQhbljcH2XOWM1jmu7Pbnd49vJsmGp

12-12-2018 21:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-12-2018 21:37
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-14-2018 13:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


12-14-2018 13:49
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Here's an example. Please note that each Pool ID and the Pool Item IDs must match.
<svg id="ui" display="inline"> <defs> <symbol id="header-item" href="#tile-list-item" focusable="false" class="header" height="45%" display="none"> <textarea id="header-text" y="5%" fill="white">Locate your pain in body part.</textarea> <textarea y="80%" font-size="24" fill="#a0a0a0">Select</textarea> </symbol> <symbol id="tile-item" href="#tile-list-item" focusable="false" pointer-events="none" system-events="all" display="none"> <use id="item-text" href="#checkbox-tile" pointer-events="all" value="0"> <set href="header/text" attributeName="text-buffer" to="Can not afford medication" /> </use> <rect id="tile-divider-bottom" class="tile-divider-bottom" /> </symbol> </defs> <use id="tile-list" href="#tile-list" height="100%"> <var id="virtual" value="1" /> <var id="reorder-enabled" value="0" /> <var id="separator-height-bottom" value="2" /> <use id="header-pool" href="#tile-list-pool"> <use id="header-pool[0]" href="#header-item" class="tile-list-item" /> <use id="header-pool[1]" href="#header-item" class="tile-list-item" /> <use id="header-pool[2]" href="#header-item" class="tile-list-item" /> <use id="header-pool[3]" href="#header-item" class="tile-list-item" /> <use id="header-pool[4]" href="#header-item" class="tile-list-item" /> <use id="header-pool[5]" href="#header-item" class="tile-list-item" /> <use id="header-pool[6]" href="#header-item" class="tile-list-item" /> <use id="header-pool[7]" href="#header-item" class="tile-list-item" /> <use id="header-pool[8]" href="#header-item" class="tile-list-item" /> <use id="header-pool[9]" href="#header-item" class="tile-list-item" /> </use> <use id="item-pool" href="#tile-list-pool"> <use id="item-pool[0]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[1]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[2]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[3]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[4]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[5]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[6]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[7]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[8]" href="#tile-item" class="tile-list-item" /> <use id="item-pool[9]" href="#tile-item" class="tile-list-item" /> </use> </use> </svg>
import document from "document"; let dataSet = [{ type: "header", text: "Section 1" }, { type: "item", text: "item 1-1" }, { type: "item", text: "item 1-2" }, { type: "item", text: "item 1-3" }, { type: "item", text: "item 1-4" }, { type: "header", text: "Section 2" }, { type: "item", text: "item 2-1" }, { type: "item", text: "item 2-2" }, { type: "item", text: "item 2-3" }, { type: "item", text: "item 2-4" }, { type: "header", text: "Section 3" }, { type: "item", text: "item 3-1" }, { type: "item", text: "item 3-2" }, { type: "item", text: "item 3-3" }, { type: "item", text: "item 3-4" }] const tileList = document.getElementById("tile-list"); function updateTileList(data) { tileList.delegate = { getTileInfo: (index) => { const poolType = (data[index].type === "header") ? "header-pool" : "item-pool"; return { type: poolType, data: data[index], }; }, configureTile: (tile, info) => { if (info.data.type === "header") { tile.getElementById("header-text").text = info.data.text; } else { tile.getElementById("item-text").text = info.data.text; } } }; if (tileList.length != data.length) { tileList.length = data.length; } } updateTileList(dataSet);

01-05-2019 13:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-05-2019 13:20
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
Interesting that you included
<var id="reorder-enabled" value="0" />
for your tile lists - SHOULD reordering of virtual tiles work, or was this force of habit? 😉
You can see a couple of us have failed to get reordering working and so have been wondering this in https://community.fitbit.com/t5/SDK-Development/Reordering-tiles-in-a-virtual-tile-list/m-p/2750112#...

