tile-list: Determining Item Order

[Gondwana]

I'm wanting to use a tile-list to allow the user to reorder some items that will be displayed subsequently. However, I can't find any way to determine the order in which the tile-list-items have been arranged by the user. There doesn't seem to be any events raised on reordering, nor does the TileList API seem to provide any functions that divulge the rearranged tile order.

Can anyone shed any light?

[Rajid]

Can't help but I do have the exact same issue. If I learn anything relevant, I'll post t here.

[Gondwana]

Thanks Rajid. I'm kinda glad it's not just me overlooking something obvious. It could be a case of incomplete API or documentation.

[Rajid]

Not sure that it actually helps with your question about tile order, but I did learn that in order to have the system automatically save the reordered tiles, such that they come back in the same order when the app is restarted, you MUST have an "id" on both the "#tile-list" as well as every "#tile-list-item".  I made this change and now the order is retained!

[Rajid]

Ok, actually...  Once you put an id on each "#tile-list-item", like so:

<svg class="background">
  <use id="tile-list" href="#tile-list">

    <var id="reorder-enabled" value="1"/>

<use id="tile1" href="#tile-list-item" class="tile-item">
  <use id="motion" href="#checkbox-tile">
    <set href="header/text" attributeName="text-buffer" to="Motion Light" />
  </use>
</use>
<use id="tile2" href="#tile-list-item" class="tile-item">
  <use id="frtv" href="#checkbox-tile">
    <set href="header/text" attributeName="text-buffer" to="TV" />
  </use>
</use>

Then, in your "onclick" function you can access to the "element.id", which, e.g., in my case gives "tile1".  This doesn't tell you its position in the list, but at least you know explicitly what tile was clicked.

You could possibly figure out the order of the clicked item by looking at "element.y" and knowing that all tile items are the same set height, etc.

[Rajid]

Upon further review, this doesn't work because it reports the y position on the screen and not in the entire list.

[Gondwana]

Thanks for testing that, Rajid. It was a great idea!

Unfortunately the items in my list won't necessarily be clicked.

I've tried iterating through the list-items using items.forEach((element, index) and it returns the items in the original (unrearranged) order.

Worse, list.getTile(index) doesn't seem to be implemented. Even if it was, it probably wouldn't help with determining the order after rearrangement.

[JonFitbit · Accepted solution]

I wonder if you need to trigger the redraw before you iterate with forEach()

YOURTILELIST.redraw()

Returns: void

Force a redraw of the list. This is usually called after a number of changes have been made to the list items with a redraw option set to false, for optimization.

Also the order is persisted in the following file:

/private/data/YOURTILELISTID-order.csv

[Gondwana]

Thanks Jon! The .csv file will get me going.

For this to work, it needs to be combined with @Rajid's observation that list-items have to be given ids, since they're what gets stored in the .csv.

I'm surprised that my use case is so unusual that the order isn't exposed by the API. Could I politely suggest that this be appended to your doubtless burgeoning to-do list? 🙂

[Rajid]

Actually, it's not my observation.  Jon told me what was needed to make tile-list reordering preserved across restarts.  I was just passing it on.  It's all info from Jon.  Thanks, Jon!  🙂