Modular Approach

Hi all,
I have a tiddler with two dropdowns, but my new requirement is to use one of the dropdowns in a different tiddler. I know that if I separate them into two different tiddlers, I can use the transclude property to insert them, and that works for me. However, in my case, I have many dropdowns and would like to use them in various parts of my code.

<select>
    <$list filter="[{myjson}jsonget[values1]]">
        <option><<currentTiddler>></option>
    </$list>
</select>

<select>
    <$list filter="[{myjson}jsonget[values2]]">
        <option><<currentTiddler>></option>
    </$list>
</select>

Can anyone guide me?
Thanks

You mean you are looking for something like this?

image

image

image

No, I meant, that in the dropdown tiddler, I have all the dropdowns(It can be many, in this example, I have only 2 dropdowns).

Screenshot 2024-09-04 at 19.45.36

And in the main tiddler, I want to include only 1 dropdown(or 2 dropdowns).
Screenshot 2024-09-04 at 19.45.48

I recommend that you put each drop-down in a distinct tiddler.

Tag each of those tiddlers as “drop-down”.

Componentize.

Why would you want all of the drop-down objects in one tiddler ?

If you really must have them all in one tiddler, then I’ll let somebody else chime in. My approach would be to have each drop down in a macro, and all of those macro definitions in one tiddler tagged with $:/tags/Macro, but macros are deprecated and I do not use procedures/functions.

As Charlie said, you could put each dropdown in a separate macro or procedure and keep all your select macros in the same tiddler. (You’ll probably also want to use a $select widget rather than HTML <select> if you want selections to be stored somewhere in the wiki.)

title: Dropdowns
tags: $:/tags/Macro OR $:/tags/Global

\procedure dropdown1()
<$select field="field1">
	<$list filter="[{myjson}jsonget[values1]]">
		<option><<currentTiddler>></option>
	<$list>
</$select>
\end

You’d then use <<dropdown1>> in the tiddler where you want the dropdown to appear.

However, since each select has so much code in common, I’d actually recommend using a single procedure (or macro) with parameters that can be specified when you call it.

\procedure my-dropdown(field, source:"myjson", index)
<$select field=<<field>>>
	<$list filter="[<source>get[text]jsonget<index>]">
		<option><<currentTiddler>></option>
	<$list>
</$select>
\end

Use it like this:

<<my-dropdown field:"field1" source:"myjson" index:"values1">> <!-- each parameter specified by name -->
<<my-dropdown "field1" "myjson" "values1">> <!-- each parameter specified in the order they're given in the procedure definition -->
<<my-dropdown field:"field1" index:"values1">> <!-- "source" parameter omitted; it will default to "myjson", as specified in the definition. Note that due to the order in which I defined the parameters, I need to use index:"values"; if I omit the name of the parameter, "values1" will be treated as the value of <<source>> -->
<$transclude $variable="my-dropdown" field=<<fieldName>> index={{!!values}} /> <!-- using $transclude to call a macro/procedure lets you define the parameters using variables and/or transcluded values. The short form <<my-dropdown>> takes literal text strings only. -->
<$macrocall $name="my-dropdown" field=<<fieldName>> index={{!!values}} /> <!-- same as above; this was the preferred format before 5.3.0. -->

I used a procedure for the examples above, but macro syntax is very similar. I’d generally recommend using procedures over macros as they’re more robust and potentially more performant, but TW’s commitment to backwards compatibility means that, although macros (and $macrocall) are “deprecated”, they should continue to be supported in future versions of TW5.

For reference, here’s how I would write the my-dropdown procedure in macro format:

\define my-dropdown(field, source:"myjson", index)
<$select field=<<__field__>>>
	<$list filter="[<__source__>get[text]jsonget<__index__>]">
		<option><<currentTiddler>></option>
	<$list>
</$select>
\end

All the procedure-call options discussed above can also be used with a macro.

2 Likes

Yeah. It’s great solution, macro worked for me pretty well.