Sort a list based on a drop-down variable

#1

I want a list of all tags ZigBee with a sort criteria stored in a tiddler-field which is changeable by a drop -down menu. I came up with this:

<div>
  Sort by:
  <$select field="sort-field" default="title">
    <option value="title">Title</option>
    <option value="created">Created Date</option>
    <option value="modified">Modified Date</option>
    <option value="tags">Tags</option>
  </$select>
</div>


  <ul>
    <$list filter="[tag[ZigBee]sort[<sort-field>]]">
      <li><$link to={{!!title}}><$view field="title"/></$link></li>
    </$list>
  </ul>

However the list never changes sorting whatever value for sort-fieldI do select?

#2

Try this:

<ul><$list filter="[tag[ZigBee]sort{!!sort-field}]"><li><$link/></li></$list></ul>

Notes:

  • Your original filter syntax was incorrect in two ways:
    • The filter operand for the sort filter should not have square brackets.
      The general rule to remember is that the type of brackets for an operand indicate how that operand is to be processed:
      • square brackets surround literal text values (e.g., sort[somefield])
      • angle brackets surround variable references (e.g., sort<somevariable>)
      • curly brackets surround tiddler field references (e.g., sort{!!anotherfield})
  • For your use case, you want the sort filter operand value to come from the sort-field field in the current tiddler that is set by the $select widget. Thus, sort{!!sort-field} is the proper usage.

Also, when using the $link widget to link to the current tiddler (as set by the surrounding $list widget), then you can use the abbreviated widget syntax <$link/>, which uses the current tiddler title as the default for both the link destination and the display text.

enjoy,
-e

2 Likes
#3

Thanks for the quick help! that worked just fine :wink: Looks like I need a tutorial on syntax of all these bracket types…

A final twist would be now a second field sort-order
where to include this into the filter sequence?

#4

I would like a link to the documentation tiddler about this, or a keyword to search for. I already have a lot of your forum posts bookmarked, but links to official documentation are life saving when working offline and having only an offline copy of the documentation wiki.

#5

there is https://pesky-brackets.tiddlyhost.com

1 Like
#6

“Parameter” is the generalized term for the various operands that follow filter operators. I think Filter Parameter is probably the most directly relevant tiddler, and Filter Step may also be useful for a slightly broader picture.

@haegar33, if you’d like something to bookmark, I second @vuk’s Pesky Brackets recommendation!

1 Like
#7

Ok I got my list now working in a tiddler and can sort for title, date… in the dropdown menu. However the second field sort-order does not work yet?

<div>
  Sort by:
  <$select field="sort-field" default="title">
    <option value="title">Title</option>
    <option value="created">Created Date</option>
    <option value="modified">Modified Date</option>
    <option value="tags">Tags</option>
  </$select>
</div>

<div>
  Order  :
  <$select field="sort-order" default="">
    <option value="ascending">Ascending</option>
    <option value="descending">Descending</option> 
  </$select>
</div>

  <ul>
    <$list filter="[tag[ZigBee]sort{!!sort-field}  order{!!sort-order}]">
      <li>
         <$link>{{!!title}}</$link> - <$view field="modified" format="date" template="DD mmm YYYY"/>
</li>
    </$list>

</ul>
#8

According to the documentation for the order[...] filter operator (see order Operator), the filter parameter value must be the keyword reverse. Any other value results in no effect on the list order. Thus, you need to write:

  <$select field="sort-order" default="">
    <option value="">Ascending</option>
    <option value="reverse">Descending</option> 
  </$select>

Also, while whitespace is permitted BETWEEN filter runs, you can’t have whitespace WITHIN a filter run, so you need to remove the spaces preceding the order{!!sort-order} filter operator:

    <$list filter="[tag[ZigBee]sort{!!sort-field}order{!!sort-order}]">

enjoy,
-e

1 Like
#9

Thanks a lot for this breakdown. Works like a charm.
Maybe interesting to note: I asked several AI bots about this problem and none of them came up with a working solution. They all struggled, like me, on small caveats like spaces in a filter operator etc.
I appreciate any human help for computer problems :wink: