Dynamic creation of tumbler-items

[Ismar]

My tumbler is supposed to have 100+ items. Is it possible to add these items dynamically/in a for-loop?

I have looked at Virtual Tile List, but Tumbler and Tile list have different behaviour. Does Tumbler have Delegates as well?

[JonFitbit]

Unfortunately there isn't a "virtual tumbler" like we have on tile list.

100 items in a tumbler seems a lot, what are you trying to make users select? Could you break that down into a few steps.

[Ismar]

Im building an body tracker app, where you can add different measurements. So the idea was to use Tumbler to pick an value, for instance between 50-100 cm.

[Florian87 · Accepted solution]

Split it up in two tumblers. One for decimeters and one for centimeters (in case your using the metric system )

[Ismar]

Creative solution, but Im not sure how user friendly that would be. Is it so that Tumbler is not ment to contain more then few number for items?

[Gondwana]

Non-trivial values should probably be entered using settings on the companion device. I think you can restrict a text input to only accept numbers.

[Ismar]

I dont consider non-trivial values here. I need to have a list of values between 50-100. I can also solve this with use of + and - button and one text-label or ask user to enter number, but I want to make the input as easy as possible.

[marwanz]

I figure this thread is a good place for my question.

An approach I have tried is:

1. Create, say, X svg elements (tumbler items)
2. In JavaScript, set their display to "none" (e.g. via a forEach loop)
3. For the ones you want to show, set their display to "inline"

This is similar to what others have suggested for similar questions elsewhere on the forums.

This approach almost works - the elements I want to show are visible but they are all bunched together on one line. See image. As soon as I touch the screen, however, they snap into the correct position and the tumbler looks and works as expected.

Below is the main code I'm using to try and do this. It's a fairly contrived example, ripped from the docs but it shows what I'm trying to do.

Am I expecting too much from the tumbler at this point in time? Or is there a way to get it to display the items stacked up nicely on first load of the screen? (in this case I would expect the see the first five items).

<svg viewport-fill="fb-cyan">
  <use id="tumbler" href="#tumblerview">
    <use id="item0" href="#tumbler-item" class="item">
      <text id="content">01</text>
    </use>
    <use id="item1" href="#tumbler-item" class="item">
      <text id="content">02</text>
    </use>
    <use id="item2" href="#tumbler-item" class="item">
      <text id="content">03</text>
    </use>
    <use id="item3" href="#tumbler-item" class="item">
      <text id="content">04</text>
    </use>
    <use id="item4" href="#tumbler-item" class="item">
      <text id="content">05</text>
    </use>
    <use id="item5" href="#tumbler-item" class="item">
      <text id="content">06</text>
    </use>
    <use id="item6" href="#tumbler-item" class="item">
      <text id="content">07</text>
    </use>
    <use id="item7" href="#tumbler-item" class="item">
      <text id="content">08</text>
    </use>
    <use id="item8" href="#tumbler-item" class="item">
      <text id="content">09</text>
    </use>
    <use id="item9" href="#tumbler-item" class="item">
      <text id="content">10</text>
    </use>
  </use>
</svg>

import document from "document";

let tumbler = document.getElementById("tumbler");
let items = tumbler.getElementsByClassName("item");

items.forEach((item, index) => {
  if (index < 5) {
    item.style.display = "inline";
  }
});

[marwanz]

My JavaScript code block is missing the line to set the elements to display "none". Here it is again.

import document from "document";

let tumbler = document.getElementById("tumbler");
let items = tumbler.getElementsByClassName("item");

items.forEach((item, index) => {
  item.style.display = "none";
  if (index < 5) {
    item.style.display = "inline";
  }
});