How to create a field macro similar to the tag macro

Thanks @mwiktowy for doing something I have being intending to for some time, the result is somewhat simple compared to what I imagined. From here we can;

  • Add a tag to introduce new elements to the filter pill as with tag pills $:/tags/TagDropdown
  • Create an alternative tag pill that looks like the regular ones but that responds to a filter eg todo not done
  • Make pills look a little different from tag pills
    • Perhaps add icons
  • Field value pill with drag and drop reordering

Thanks for the inspiration at the beginning of my Wednesday.

@arunnbabu81 have you know got what you wanted in the original Post?

I saw the post, but didn’t get time to test it. Have been busy for the last few days. I will test it later today

I got what I asked for in the OP earlier itself,but the pop ups are not unique. If I press on one field-pill, all other filed-pills also will show the pop ups (even with solution by @mwiktowy)
Check this tiddler.
Will try to solve it later.

In the definition of filter-pill(), the popup uses """$:/temp/state/$pill_label$""" to construct the popup ID. Thus, all filter pills that use the exact same label text will be displayed at the same time.

I suggest doing TWO things:

  1. Change the popup ID to use <<qualify """$:/temp/state/$pill_label$""">>. This will ensure that filter-pill popups that occur in different tiddlers will have unique ID values, even if they share the same $pill_label$ text.
  2. Add an optional id param to the macro: \define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333 id), and use <<qualify """$:/temp/state/$pill_label$$id$""">> to construct the popupID. This will allow you to pass an extra id value to explicitly differentiate filter-pill popups that occur in the same tiddler, like this:
<<filter-pill "[!is[system]search:title[Drop]]"
   """Non-system Tiddlers With "Drop" in the title""" "grey" "white" 1>>
<<filter-pill "[ae-cycle[shadow]]"
   """Non-system Tiddlers With "Drop" in the title""" "grey" "white" 2>>
<<filter-pill "[leftbar[shadow]]"
   """Non-system Tiddlers With "Drop" in the title""" "grey" "white" 3>>
2 Likes
\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333)
<$let popupID=<<qualify """$:/temp/state/$pill_label$""">>>
<$button dragFilter="$pill_filter$" class="tc-tag-label tc-btn-invisible" style="background-color:$pillcolour$; color:$textcolour$;" popup=<<qualify """$:/temp/state/$pill_label$$id$""">> >$pill_label$
</$button>
<$reveal type="popup" state=<<popupID>> >
<div class="tc-drop-down">
<$button> export
<$action-sendmessage $message="tm-download-file"
   $param="$:/core/templates/exporters/JsonFile"
   exportFilter="$pill_filter$"
   filename="tiddlers.json" /> 
</$button>
<hr>
{{{$pill_filter$}}}
</div>
</$reveal>
\end

<<filter-pill "[!is[system]search:title[Drop]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white" >>

<<filter-pill "[ae-cycle[shadow]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white" >>

<<filter-pill "[leftbar[shadow]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white" >>

@EricShulman I tried this code, but its not working. You had helped me in the past for a similar problem. I had tried this method of using qualify macro and stateID before, then also it didnt work. Must be due to some problem with my code.

  1. Add ‘id’ to the filter-pill(...) parameter list:
    \define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333 id)
  2. Use the $id$ value when contructing the popupID:
    <$let popupID=<<qualify """$:/temp/state/$pill_label$$id$""">>>
  3. Use the <<popupID>> in the $button widget:
    <$button ... popup=<<popupID>> ... >
  4. Add id values (e.g., “1”, “2”, “3”) at the end of each <<filter-pill>> macro call to differentiate the popupID for each call:
<<filter-pill "[!is[system]search:title[Drop]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white"  "1">>
<<filter-pill "[ae-cycle[shadow]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white" "2">>
<<filter-pill "[leftbar[shadow]]" """Non-system Tiddlers With "Drop" in the title""" "grey" "white" "3">>
2 Likes
\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333 id)
<$let popupID=<<qualify """$:/temp/state/$pill_label$$id$""">>>
<$button dragFilter="$pill_filter$" class="tc-tag-label tc-btn-invisible" style="background-color:$pillcolour$; color:$textcolour$;" popup=<<popupID>> >$pill_label$
</$button>
<$reveal type="popup" state=<<popupID>> >
<div class="tc-drop-down">
<$button> export
<$action-sendmessage $message="tm-download-file"
   $param="$:/core/templates/exporters/JsonFile"
   exportFilter="$pill_filter$"
   filename="tiddlers.json" /> 
</$button>
<hr>
{{{$pill_filter$}}}
</div>
</$reveal>
\end

It’s working now. Thank you @EricShulman - https://focus-tiddler-demo.tiddlyhost.com/#tag-field%20macro

2 Likes

could we make it take it’s default colors from the palette? maybe have it look like the untagged-pill does, or as a default uncolored tag?

\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:<<colour tag-background>> textcolour:<<tag-foreground>> id)

I changed the first line of the macro like this and it works for me except the text color

Your textcolour is missing the colour in the colour macro.

textcolour:<<colour tag-foreground>> id ...

However, even with this adjusted, it doesn’t work for me for some reason.

Edit: oddly, it works fine in a blank tiddlywiki, I wonder if it’s just something with my peronal one, anyhow nevermind!

Edit 2: nevermind my nevermind.

I added it later to the code after posting the message. It was a copy paste error.

Even in my personal wiki it’s not working

ATM I’m taking apart $:/core/macros/tag to see if I can reuse it to apply color and contrastcolour, but it’s a bit harder than I thought it would be.

It looks like the filter-pill macro isn’t getting it’s colors for the palette when using the colour macro, why I do not know.

I wasn’t successful in figuring out how to get it to work, unfortunately.

Thank you @EricShulman .

The ‘qualify’ macro is definitely needed to keep two popups from happening when they are in different tiddlers.

As to your point regarding the “id”, I completely see what you intend with that and agree that it should be necessary. However, it doesn’t seem to matter (at least in Chrome). Putting a bunch of the filter-pill macros together in the same tiddler only pops up the one activated and the others stay closed. I don’t know why since they are all tied to the same state tiddler.

/Mike

Without the “id” params in the <<filter-pill ...>> macro calls, all three popups DO appear. However, they are all displayed at the same position, so they overlap with each other, which can make it appear as if only one popup is being shown.

Thank you for pointing that out. Those duplicates are hidden well.

On that note, I wanted to try to make a unique identifier macro to plug in as a default value. Absent a random number generator, I came up with:

{{{[<now YY0MM0DD0hh0mm0XXX>sha256[]]}}}

Not perfect but has some hope of working if rendering is slow enough.

However, I am noticing that no matter if I define a macro and use it like this

\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333 id:<<uid>>) ...

or put it directly in like this:

\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:lightgrey textcolour:#333333 id:{{{[<now YYYY0MM0DD0hh0mm0XXX>sha256[]]}}}) ...

The result is using it as a literal string rather than calculating the value and using that. Is it possible to provide anything as a default value to a macro other than a literal string?

@EricShulman Is it possible to get the number of tiddlers for filter next to the export button by using the count operator ?

This is the code I am using.

\define filter-pill(pill_filter pill_label:"FilterPill Label" pillcolour:<<colour tag-background>>textcolour:<<tag-foreground>> id)
<$let popupID=<<qualify """$:/temp/state/$pill_label$$id$""">>>
<$button dragFilter="$pill_filter$" class="tc-tag-label tc-btn-invisible" style="background-color:$pillcolour$; color:$textcolour$;" popup=<<popupID>> >$pill_label$
</$button>
<$reveal type="popup" state=<<popupID>> >
<div class="tc-drop-down">
<$button> export <$count filter="$pill_filter$"/>
<$action-sendmessage $message="tm-download-file"
   $param="$:/core/templates/exporters/JsonFile"
   exportFilter="$pill_filter$"
   filename="tiddlers.json" /> 
</$button>
<hr>
{{{$pill_filter$}}}
</div>
</$reveal>
\end

I used the count widget to get the number of tiddlers in that filter expression.
Is there any way to make this count widget appear in the pill label.

I just want to add as I said previously;

So I am working to extend this Idea for “filter pills” further including;

  • Extensibility like with the use of $:/tags/TagDropdown on tagpills
    • Eg open all/ close all listed tiddlers
    • Search with filter
    • And a lot more

Please let me know what other ideas you have that would make sense on a “filter pill”

1 Like

I’m sure adding the count to the filter-pill can be done. At one point I was hacking regular tag pills to include a count, but benwebber’s tag-count does it better.

Whatever is going on there ought to be readily adapted…

-Springer