Checkbox component

[thaberkern]

Is there a checkbox component that I can use in my application? The fitbit alarm app has one but i'm not sure if it just undocumented like the Tumbler component or just a custom control of the app.

[SunsetRunner]

We are still awaiting quite a bit of documentation.

Maybe @JonFitbit would post some examples as he so kindly did for the other components 

[JonFitbit · Accepted solution]

Sorry we're falling short in the documentation, we'll have more soon!

I hope this helps:

<!-- widgets.gui -->
<svg>
 <defs>
 <link rel="stylesheet" href="styles.css" />
 <link rel="import" href="/mnt/sysassets/widgets_common.gui" />
 <!-- Additional imports -->
 <link rel="import" href="/mnt/sysassets/widgets/tile_list_widget.gui" />
 <link rel="import" href="/mnt/sysassets/widgets/checkbox_tile_widget.gui" />
 <!-- Custom tile list item with checkbox -->
 <symbol id='log-checkbox-tile' href='#tile-list-item'>
 <use id="log-checkbox" href='#checkbox-tile'/>
 </symbol>
 </defs>
</svg>

<!-- index.gui -->
<svg>
  <use id="my-list" href="#tile-list" class="application-color">
    <!-- specify how many pixels of the content are taken by separators -->
    <var id="separator-height-bottom" value="2"/>
    <!-- disable tile list reordering -->
    <var id="reorder-enabled" value="0"/>
    <use id="log1" href="#log-checkbox-tile" class="tile">
      <set href="log-checkbox/header/text" attributeName="text-buffer" to="Log 1" />
    </use>
    <use id="log2" href="#log-checkbox-tile" class="tile">
      <set href="log-checkbox/header/text" attributeName="text-buffer" to="Log 2" />
    </use>
    <use id="log3" href="#log-checkbox-tile" class="tile">
      <set href="log-checkbox/header/text" attributeName="text-buffer" to="Log 3" />
    </use>
  </use>
</svg>

// app/index.js
import document from "document";

let list = document.getElementById("my-list");
let tiles = list.getElementsByClassName("tile");

// manually track the checked state
let mystate = {}

tiles.forEach((element, index) => {
  element.firstChild.onclick = (evt) => {
    mystate[index] = !mystate[index];
    console.log(`item ${index} checked = ${mystate[index]}`)
  };
});

[Matthew1471]

Hi :), can the checkbox component be used inside other components such as a panoramaview?

[barbossa]

Hi Jon! Does this checkbox still work for Sense 2 devices? I tried it in my clockface for Sense2, but it does not seem work do anything. Nothing appears on the UI. 

[Gondwana]

@barbossaNot until an SDK for Sense 2 is released. A date hasn't been set for that.