ScrollView, Template Symbol, and JavaScript question

[DanMacLeod]

I have a ScrollView that displays a list of items that use a Template Symbol. I want to build the list dynamically but not sure how to do it. What I'd like to do is get a reference to the Scrollview (document.getElementById("table"), then create each item in the list dynamically. I think JavaScript can be used to create each item but not sure how it would be done. Any ideas?

Template Symbol

<symbol id="view-item" href="#scrollview-item">
  <rect fill="inherit" x="0" y="0" width="100%" height="100%" />
  <text id="item1" x="5"   y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
  <text id="item2" x="40%" y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
  <text id="item3" x="75%" y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
</symbol>

View Item

<use href="#view-item" height="20%" fill="dimgray">
  <set href="#item1" attributeName="text-buffer" to="some text" />
  <set href="#item2" attributeName="text-buffer" to="some text" />
  <set href="#item3" attributeName="text-buffer" to="some text" />
</use>

[DanMacLeod]

I have a ScrollView that displays a list of items that use a Template Symbol. I want to build the list dynamically but not sure how to do it. What I'd like to do is get a reference to the ScrollView (document.getElementById("table")), then create each item in the list dynamically. I think JavaScript can be used to create each item but not sure how it is done. Any ideas?

Template Symbol

<symbol id="view-item" href="#scrollview-item">
  <rect fill="inherit" x="0" y="0" width="100%" height="100%" />
  <text id="item1" x="5"   y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
  <text id="item2" x="40%" y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
  <text id="item3" x="75%" y="50%+10" fill="white" font-size="30" font-weight="regular" /> 
</symbol>

View Item

<use href="#view-item" height="20%" fill="dimgray">
  <set href="#item1" attributeName="text-buffer" to="some text" />
  <set href="#item2" attributeName="text-buffer" to="some text" />
  <set href="#item3" attributeName="text-buffer" to="some text" />
</use>

[Giampi71]

I suggest to post your question to SDK developement Forum

[Durus]

You can't recreate items on the fly; I'd love to be able to.

https://community.fitbit.com/t5/SDK-Development/Dynamically-Create-Buttons-from-JSON/td-p/2273560

What you need to do is create an item for all the elements you think you'll need in the scrollview; set them to invisible (style.display = "none")

<use id="scrollview" href="#scrollview">

	<use id="sv0" href="#view-item" display="none" class="yourClass" />
	<use id="sv1" href="#view-item" display="none" class="yourClass" />	
	<use id="sv2" href="#view-item" display="none" class="yourClass" />	
	<use id="sv3" href="#view-item" display="none" class="yourClass" />	
	<use id="sv4" href="#view-item" display="none" class="yourClass" />
	<use id="sv5" href="#view-item" display="none" class="yourClass" />
	
</use>

Then loop though the list of controls in javasciprt setting up there values and making them invisible.

let elements = document.getElementsByClassName("yourClass");
for (let i = 0;  i < elements.length; i++) {
	let element = elements[i];
	element.text = 'Hello';
	element.onclick = function() { console.log('clicked); }
}

It's a bit of a pain, but it is the only way I have found to make it work.

[DanMacLeod]

If I use document.getElementsByClassName("myClass"), am I guaranteed the items will come back in the correct order? If each of my items use: class="myClass", when I loop thru the items, will I always get item1, item2, item3... ? When I set the values for an item, it must be in the correct order in the list.

[Durus · Accepted solution]

The items will come back in the same order every time (top down).

Another option is to use getElementById. You could do something like:

for (let i = 0;  i < 6; i++) {
	let element = document.getElementById('sv' + i);
	element.text = 'Hello';
	element.onclick = function() { console.log('clicked); }
}

I'm working a score keep for disc golf / golf the project is in Github 

https://github.com/grumpy-coders/pointy

An example of both methods are used in https://github.com/grumpy-coders/pointy/blob/master/app/screen-game.js

   getElementsByClassName is used in the function unbindEvents.

   getElementById is used in the function screenGameInit

Depending on what you're doing and where the data is coming from; one or the other is easier to implement.  Having said that there is not really that much of a difference between the 2 approaches.