[Question] Adding a separate 'add tab' UI to add a specific field to the editor view. What to copy and change?

[Odin Jorna]

Hello all,

I am using TWCrossLinks plugin by TonyK. In this plugin, you can use the user-defined field 'keywords' to add keywords that can enhance the link your notes and tiddler have with each other. I find myself using this feature a lot to add themes and subjects to notes. 

Adding words in a field is less ideal and not as user friendly as adding tags. The 'add tags' bar has visuals that autocomplete previously used tags. This decreases the chances of duplicate tags by spelling mistakes (for example: 'Psychology' and 'psychology').

I want to build upon this feature and add a new bar to the bottom of the tiddler, that works just like the 'add tags' bar, but instead adds keywords into the keywords field. For a friendlier user experience. But to also manage my keywords better.

I am not much of a coder/programmer, but have learned a bit about the inner workings of TiddlyWiki by reading the website and lurking on this forum. So, knowing that tiddlers are made out of fields. 'Tags' is also a field. So in theory, I should be able to copy the tiddler that is responsible for the 'add tags' bar, change it's output to the 'keywords' field. Add the $:/tags/EditTemplate to it, and a list-after field to make it appear underneath the fields inputbar. That should be doable, I thought.

I found the $:/core/ui/EditTemplate/tags tiddler, which I think is building the 'add tags' bar. But I am struggling to understand exactly how it works. It uses some classes (like tc-edit-tags) that I think are responsible for the more inner workings, but I couldn't really find those.

\whitespace trim


\define lingo-base() $:/language/EditTemplate/


\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end


\define tag-body-inner(colour,fallbackTarget,colourA,colourB,icon)
\whitespace trim
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label tc-tag-list-item">
<$transclude tiddler="""$icon$"""/><$view field="title" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">{{$:/core/images/close-button}}</$button>
</span>
</$vars>
\end


\define tag-body(colour,palette,icon)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}} icon="""$icon$"""/>
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}} icon={{!!icon}}/>
</$list>
<$set name="tabIndex" value={{$:/config/EditTabIndex}}>
<$macrocall $name="tag-picker"/>
</$set>
</$fieldmangler>
</div>

I also found that Jed's (inmysocks) bookmark plugin also has an 'add tag' bar to add tags to the bookmarks. This works a bit differently because these tags don't share the same 'pool' as the normal tags.

http://inmysocks.tiddlyspot.com/#%24%3A%2Fplugins%2Finmysocks%2FBookmarks%2FBookmarksAddTag

The code for his bar is a lot longer:

\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label">
<$view field="title" format="text" />
<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">&times;</$button>
</span>
</$vars>
\end
\define tag-body(colour,palette)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
\end
<div class="tc-edit-tags">
<$fieldmangler>
<$list filter="[all[current]tags[]sort[title]]" storyview="pop">
<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
</$list>


<div class="tc-edit-add-tag">
    <span class="tc-add-tag-name">
        <$edit-text tiddler="$:/temp/NewTagName" tag="input" default="" placeholder={{$:/language/EditTemplate/Tags/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>
        </span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
        <$button
            message="tm-add-tag"
            param={{$:/temp/NewTagName}}
            set="$:/temp/NewTagName"
            setTo=""
            class=""
        >
            <$action-setfield
                $tiddler='$:/data/Bookmarks/BookmarkTags'
                $index={{$:/temp/NewTagName}}
                $value=1
            />
            <<lingo Tags/Add/Button>>
        </$button>
    </span>
</div>


<div class="tc-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher set="$:/temp/NewTagName" setTo="" message="tm-add-tag">
<$list filter="[[$:/data/Bookmarks/BookmarkTags]indexes[]search:title{$:/temp/NewTagName}sort[]]">
{{||$:/core/ui/Components/tag-link}}
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
</$fieldmangler>
</div>

Can anyone give me some tips to help me on my way to create something similar for a user-defined 'keywords' field? I am struggling with finding out what exactly to change and copy to have it work like I intend to.

PS:While writing this post I did find out that the $:/language/EditTemplate/Tags/Add/Placeholder tiddler is responsible for the word 'tag name' inside the bar. I can clone it, change the tiddle to $:/language/EditTemplate/Keywords/Add/Placeholder, and have it say: Keywords.

[TonyM]

Without reading your full post can I suggest you look at Mario's gen tags plugin.

You can create additional tag like fields and you get a lot of the features that come with tags.

Regards
Tony

[Birthe C]

Jed Cartys Gentags plugin

[Odin Jorna]

Thank you two so much! This is exactly what I was looking for : )

[Odin Jorna]

It turned out not being exactly what I was looking for. The plugin works well, but it missing the selection from the dropdown. When you click on a previously used word in the dropdown menu, it doesn't add it to the list, but instead takes you to a new missing tiddler. There is also no autocomplete. 

I tried changing Jed's bookmark tag selector (because this one does have the above features) some more to make it add words within brackets to a 'keywords' field. I managed to make the selection of a word within the dropdown menu, and the press on the add button, create a 'keyword' field. But i am struggling with also adding a word surrounded by brackets to that field. I think the ActionListopsWidget with the append operator should help me with this, but I am struggling with making it word. It just doesn't add anything to the 'keywords' field.

Any help would be greatly appreciated :)

'

\define lingo-base() $:/language/EditTemplate/
\define tag-styles()
background-color:$(backgroundColor)$;
fill:$(foregroundColor)$;
color:$(foregroundColor)$;
\end
\define tag-body-inner(colour,fallbackTarget,colourA,colourB)
<$vars foregroundColor=<<contrastcolour target:"""$colour$""" fallbackTarget:"""$fallbackTarget$""" colourA:"""$colourA$""" colourB:"""$colourB$""">> backgroundColor="""$colour$""">
<span style=<<tag-styles>> class="tc-tag-label">

<$view field="keywords" format="text" />

<$button message="tm-remove-tag" param={{!!title}} class="tc-btn-invisible tc-remove-tag-button">&times;</$button>
</span>
</$vars>
\end
\define tag-body(colour,palette)
<$macrocall $name="tag-body-inner" colour="""$colour$""" fallbackTarget={{$palette$##tag-background}} colourA={{$palette$##foreground}} colourB={{$palette$##background}}/>
\end
<div class="tc-edit-tags">
<$fieldmangler>

<$list filter="[all[current]!field:title[]sort[title]]" storyview="pop">

<$macrocall $name="tag-body" colour={{!!color}} palette={{$:/palette}}/>
</$list>
<div class="tc-edit-add-tag">
    <span class="tc-add-tag-name">

        <$edit-text tiddler="$:/temp/NewKeyword" tag="input" default="" placeholder={{$:/language/Odin/Keywords/Add/Placeholder}} focusPopup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-edit-texteditor tc-popup-handle"/>

        </span> <$button popup=<<qualify "$:/state/popup/tags-auto-complete">> class="tc-btn-invisible tc-btn-dropdown" tooltip={{$:/language/EditTemplate/Tags/Dropdown/Hint}} aria-label={{$:/language/EditTemplate/Tags/Dropdown/Caption}}>{{$:/core/images/down-arrow}}</$button> <span class="tc-add-tag-button">
        <$button

            message="tm-add-field"
            param=keywords
            set="$:/temp/NewKeyword"
            setTo=""
            class=""
        >
            <$action-setfield
                $tiddler='$:/data/Odin/Keywords'
                $index={{$:/temp/NewKeyword}}

                $value=1
            />
            <<lingo Tags/Add/Button>>
        </$button>
    </span>
</div>
<div class="tc-block-dropdown-wrapper">
<$reveal state=<<qualify "$:/state/popup/tags-auto-complete">> type="nomatch" text="" default="">
<div class="tc-block-dropdown">
<$linkcatcher 

set="!!keywords" setTo="{{$:/temp/NewTagName}}" 
>
<$list filter="[[$:/data/Odin/Keywords]indexes[]search:title{$:/temp/NewKeyword}sort[]]">

{{||$:/core/ui/Components/tag-link}}
</$list>
</$linkcatcher>
</div>
</$reveal>
</div>
</$fieldmangler>
</div>

Op donderdag 14 mei 2020 18:04:15 UTC+2 schreef Odin Jorna: