Hallo everyone,
how do I add to tiddlers’ toolbar a custom button that opens a dropdown list of choices when clicked? So far I was able, thanks -or I should rather say despite- to TW documentation’s page ‘Creating new toolbar buttons’ ( https://tiddlywiki.com/static/Creating%20new%20toolbar%20buttons.html ) to add a custom button to the toolbar. Now how do I make it open a dropdown list of choices as is the case of default ‘More actions’ button?
Thanks and regards,
CG
Perhaps the easiest way is to copy a button that already does this. I am sure there are reasons, some historical, some related to multi-language support that such buttons are awkward to follow.
What is the function of the button you want to build or is this only a general question? I ask because what if it exists already?
I recently cloned the Editor Tollbar button “excise” to do this,
see New EditorToolbar button "wrapper" please review - #3 by TW_Tones look for the latest shared, and I have done view toolbar buttons previously including cloning the more button for a drop down list. Once you cloan it you have to review tags, fields and field values, replacing values or creating additional tiddlers.
Because of the effort involved my new button will serve as a template for future Editor Toolbar buttons.
I will try, time permitting to do a new view toolbar button with drop down and share that soon. Keep an eye on the discussion thread. It may then be easy to clone my button than a core one to build another.
Yea, adding to what TT says;
Here is the “more” button. You can just copy and rinse a lot of it out.
Here a solution I built today more-tiddler-actions
buttons-more-tiddler-actions.json (11.1 KB)
Import to your wiki, or test on tiddlywiki.com
Here is one I built in 5mins from the one above, that works stand alone
buttons-more-tiddler-actions.json (11.1 KB)
a completely general question, I need to implement this button to show a dropdown of my own custom actions, no way for these to already exist somewhere…
By the way, it would be useful to add a little tutorial page on the subject in the official TW documentation.
“to show actions” is hard to understand. Actions is whatever you make them and you could list a bunch of buttonwidgets that perform actions. But assuming you mean “show my items” then here’s a template for you:
title: mybutton
tags: $:/tags/ViewToolbar
text:
<$button popup=<<qualify "$:/state/popup/mybutton">> class=<<tv-config-toolbar-class>> selectedClass="tc-selected">
{{$:/core/images/down-arrow}}
</$button>
<$reveal state=<<qualify "$:/state/popup/mybutton">> type="popup" position="belowleft" animate="yes">
<div class="tc-drop-down">
* one
* two
</div>
</$reveal>
yes, items is better said indeed. Thanks.
In my above solution you can place anything you want to appear in the dropdown in one or more tiddlers. So if you have a button with an action already just give it the matching tag.
Try an existing button to see.
thanks, it worked but… I need the items be a clickable dropdown menu, not a static list…
OK, I think you must use the MessageCatcher widget then. It was a long time ago that I fiddled with that, so I can’t tell how it is used right away. If you investigate how the “more” tiddler tool button is created I think you should find use of it and can study it. Or elsewhere.
…or maybe it is just a matter of making your items in the list be ButtonWidgets. You can style the buttons to look like links (by applying tc-btn-invisible tc-tiddlylink) or just like text.
Have you tried my solution?
no, I wasn’t able to, sorry. I imported the json snippet but after that I was clueless, didn’t know how to go on…
Couldn’t find this…
Make sure you download the last JSON I shared;
After installing see the list of tiddlers listed in the
$:/Import
The following tiddlers were imported:
$:/PSaT/buttons/more-tiddler-actions
$:/PSaT/buttons/more-tiddler-actions/icons/show-more-horizontal
$:/PSaT/buttons/more-tiddler-actions/icons/show-more-vertical
$:/PSaT/buttons/more-tiddler-actions/icons/more-two-fill
$:/PSaT/buttons/more-tiddler-actions/icons/more-three-outline
$:/PSaT/buttons/more-tiddler-actions/icons/more-three-outlinemore-three-fill
$:/PSaT/buttons/more-tiddler-actions/icons/more-two-outline
$:/PSaT/buttons/more-tiddler-actions/icons/more-vertical-o
$:/PSaT/buttons/more-tiddler-actions/icons/more-vertical-r
$:/PSaT/buttons/more-tiddler-actions/readme
Click, or copy the tiddler title into a new tiddler to ge a link to it.
It creates a button
Clicking shows its empty.
Add the tag $:/tags/more-ViewToolbar to any tidler or an existing button and it will appear in that menu drop down (What ever displays in the text field
You asked for
list of choices when clicked?
I always wanted this for myself but I made it now for you. Please take the time to consider an Ernest reply to you and with respect try a little harder to work it out. Always feel free to ask questions but please put in the effort.
In this solution a Tiddler with the $:/tags/more-ViewToolbar tag can contains one or more buttons that triggers whatever actions you are interested in.
The key advantages of this implementation is that
I forgot to give some environmental info, maybe it can help troubleshoot the issue:
TW version: 5.2.1
Browser: Firefox 97.0.2
CG
It looks like you are dragging the file from Discourse into your wiki.
You need to first download the file to your computer, and then drag it into your wiki to import.
it worked! Thanks! 
Thank you, now that I found how to correctly import it I tested it and it does [almost] exactly what I was looking for. Now I only have to hack it just a little, to make it ‘contextual’, so for it to show up only on certain tiddlers, not all…
Can you point me to the code to modify? I’m not asking you to spend time hacking it for me, just tell me please where do I go in your code to add my changes.
Thanks a lot, really…
CG
