Change color of checkbox

[Florian87]

Hi folks,

i'm looking through the docs, but can't find any reference on how to change the checkbox color in a tile.

In this section the check box item is mentioned: https://dev.fitbit.com/guides/design-guidelines/ui-components/#checkbox-tile, but how can i set the color?

Is there something similar for checkboxes like for square buttons?

<use id="mybutton" href="#square-button" y="5" fill="fb-red">
    <set href="#text" attributeName="text-buffer" to="Click Me!" />
  </use>

Thanks in advance,

Florian

[JonFitbit · Accepted solution]

You can do it in CSS:

.checkbox-tile-image image { fill: fb-cyan }
.checkbox-unselected-color image { fill: fb-red }

[Florian87]

Thanks Jon, works like a charme! 

[Florian87]

@JonFitbit One remaining question thematically related to tiles... (don't want to open an extra thread)

I get some strange behavior when hiding tiles from a VirtualTileList component. When i hide

tiles via it's click callback (f.e. in the middle of the list), some tiles (at a shifted position in the list)

are also hidden. I assume that i'm doing something wrong with the list's redraw method or the alignment.

this.list = document.getElementById("my-list");

var NUM_ELEMS = 30;
var SATURATION = (Math.random() % 0.5) + 0.5;
var VALUE = (Math.random() % 0.5) + 0.5;
var HUE_CONST = 1.0 / NUM_ELEMS;
var STARTING_POINT = Math.random() * NUM_ELEMS;
var STARTING_POINT = 0;

let tileState = {}

this.list.delegate = {
getTileInfo : function(index) {
var tile_type = "colour-pool"; 
return { 
type : tile_type,
color : that.HSVtoRGB(HUE_CONST * ((index + STARTING_POINT) % NUM_ELEMS), SATURATION, VALUE),
index : index
};
},
configureTile : function(tile, info) {
tile.getElementById('bg').style.fill = info.color;
tile.getElementById('title-text').text = "Part #" + info.index;
tile.info = info;

tileState[info.index] = tile.getElementsByClassName("tile-item-checkbox")[0].value;
tile.getElementsByClassName("tile-item-checkbox")[0].onclick = (evt) => {
tileState[info.index] = !tileState[info.index];
vibration.start("bump");
tile.hide();
//tile.align({alignment: 'bottom', animate: true, redraw: true});
that.list.redraw(true);
};
}
};

Thanks in advance

[JonFitbit]

I found this note:

// KNOWN ISSUE: It is currently required that VTList.length be set AFTER VTList.delegate
VTList.length = NUM_ELEMS;

[Florian87]

Nope... no effect. I already had this in my code. But when hiding a tile from its list (not deleting), it shouldn't effect the list length?! Even if i adapt the length after hiding a tile, the effect occurs 

Do you have some details about the insertTile and obtainTile methods? Unfortunately i can't apply these methods on the TileList. 

[Florian87]

No hint, how to move on? 😬

[Florian87]

@JonFitbit

I investigated the reason for the odd behavior. The virtual tiles are all instantiated from the predefined tile pool. You can add more tiles via JavaScript, but all visible tiles share the id attribute from the tile pool. Thats why f.e. if hiding a tile at position 0, also the tile at n+tile-pool-length is hidden. Thats logical but also rediculous because there is no chance to apply data binded actions on virtual tiles, as there is no chance to explicit identify them.

[JonFitbit]

I had a chat with some people internally about this.

The correct way to "hide" an item in a virtual tile list is to do so in the draw callback, by drawing item N+1 instead of item N. Virtual Tile List does not keep track of hidden / deleted for you, but it is easy enough to do on your own. For example, you could track the visibility in your source data, then don't draw items which aren't visible.

[Tnoff]

Hello, I am trying to use the checkbox component in an SDK 5.0 application. Can you give me a link to the documentation for this component, if it exists for SDK 5?