Virtual Tile List with Checkbox using SDK 5.0

[pll]

I am trying to build a virtual tile list with checkboxes using SDK 5.0. I tried carrying over some examples from previous SDKs but I could not get them to work. Where could I find some documentation on virtual tile list with checkboxes?

Thank you!

[pll]

I managed to create the virtual tile list with checkboxes. However, I am not sure whether this is the "right way" to do it.

Defs File

<svg>
  <defs>
    <!-- stylesheets -->
    <link rel="stylesheet" href="styles.css" />
    <!-- imports -->
    <link rel="import" href="/mnt/sysassets/system_widget.defs" />
    <link rel="import" href="/mnt/sysassets/widgets/text_button.defs" />
    <link rel="import" href="/mnt/sysassets/widgets/baseview_widget.defs" />
    <link rel="import" href="/mnt/sysassets/widgets/checkbox.defs" />
    <link rel="import" href="/mnt/sysassets/widgets/scrollbar.defs" />
    <link rel="import" href="/mnt/sysassets/widgets/tile_list_widget.defs" />
    <!-- symbols -->
    <symbol id="checkbox-item" href="#tile-list-item" class="list-item" height="112" display="none">
      <rect width="100%" height="100%" x="0" y= "0" fill="fb-black"/>
      <use id="checkbox" href="#checkbox" value="0" x="5%" fill="fb-yellow"/>
      <text 
        id="text"
        fill="fb-yellow" 
        font-size="36"
        text-anchor="start" 
        x="$+5%" 
        text-length="16"
      />
      <rect id="separator" width="100%" height="6" y= "100%-6" fill="fb-yellow" opacity="0.5"/>
    </symbol>
    <symbol id="button-item" href="#tile-list-item" focusable="false" class="list-item" height="112" display="none">
      <rect width="100%" height="100%" x="0" y= "0" fill="fb-black"/>
      <use id="button" href="#text-button" class="text-button application-fill" />
    </symbol>
  </defs>
</svg>

View File

<svg class="background" id="root">
    <use id="myList" href="#tile-list">
        <var id="virtual" value="1" />
        <var id="reorder-enabled" value="0"/>
        <var id="peek-enabled" value="0"/>
        <var id="separator-height-bottom" value="2" />

        <use id="checkbox-pool" href="#tile-list-pool">
            <use id="checkbox-pool[0]" href="#checkbox-item" />
            <use id="checkbox-pool[1]" href="#checkbox-item" />
            <use id="checkbox-pool[2]" href="#checkbox-item" />
            <use id="checkbox-pool[3]" href="#checkbox-item" />
            <use id="checkbox-pool[4]" href="#checkbox-item" />
            <use id="checkbox-pool[5]" href="#checkbox-item" />
            <use id="checkbox-pool[6]" href="#checkbox-item" />
            <use id="checkbox-pool[7]" href="#checkbox-item" />
            <use id="checkbox-pool[8]" href="#checkbox-item" />
        </use>

        <use id="button-pool" href="#tile-list-pool">
            <use id="button-pool[0]" href="#button-item" />
            <use id="button-pool[1]" href="#button-item" />
            <use id="button-pool[2]" href="#button-item" />
            <use id="button-pool[3]" href="#button-item" />
            <use id="button-pool[4]" href="#button-item" />
        </use>
    </use>
</svg>

Note that I also have buttons as tiles in the virtual tile list.

What I could not figure out is how to change the color of the checkboxes (in the code)? Any idea?

[pll]

I managed to change the color of the checkbox. I am again wondering whether this is the right way to do it or not.

CHECKBOX.getElementsByClassName('checkbox-icon')[0].style.fill = 'fb-black';
CHECKBOX.getElementsByClassName('checkbox-bg-a')[0].style.fill = settings.colorSchemeColorSelect;
CHECKBOX.getElementsByClassName('checkbox-bg-b')[0].style.fill = settings.colorSchemeColorSelect;
CHECKBOX.getElementsByClassName('checkbox-bg-b')[0].style.opacity = 0.5;

with CHECKBOX being an element of the checkbox class and settings.colorSchemeColorSelect being the desired color.