Virtual list header

[mjain]

Is there any way to add a header in the Virtual Tile List? 

[JonFitbit]

You can use two pools of tiles, so you can render them differently.

[mjain]

@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

[mjain]

@JonFitbit Waiting for your reply..........

[EmTe]

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.

[JonFitbit]

Can you provide an export of your project or a gist?

[mjain]

Yes, please.

Please see code from below link.

https://drive.google.com/open?id=10-RQhbljcH2XOWM1jmu7Pbnd49vJsmGp

[EmTe]

Could you paste the code here? Google/DropBox/Box is blocked in my country.

[JonFitbit · Accepted solution]

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);

[ObSkewer]

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#...