# Editable table from JSON tiddler

I think I am overthinking this again, but I can not come up with a clean solution to a “simple” problem: Tiddler data is a JSON tiddler holding an object. Tiddler Mask shows all those properties in a nice table and there is a way to edit those properties.

I am pretty sure there is a better solution for this since those redundant buttons hurt my soul. I am not bound to the way this edit procedure works. However I want fields to not be editable by default (i.e. all are edit-text by default) to prevent accidental typos from sneaking in. So a way to “activate” the edit mode for a cell would be ideal.

What I have cooked up so far does work somewhat but the problem is that clicking the “Set” button whilst the “Key” field is empty completely wipes the data tiddler which is not quite the intended behaviour to say the least

Tiddler “data”:

{
"foo": "hello",
"bar": "baz"
}


<table>
<tr><th>Key</th><th>Value</th></tr>
<$list filter="[[data]indexes[]]" variable="prop"> <tr> <td><<prop>></td> <td><$view tiddler="data" index=<<prop>> /></td>
</tr>
</$list> <$set name="temptiddler" value=<<qualify  $:/temp >> > <tr> <td> <$edit-text tiddler=<<temptiddler>> field="key" placeholder="Key" />
</td>
<td>
<$edit-text tiddler=<<temptiddler>> field="value" placeholder="Value" /> <$reveal type="nomatch" stateTitle=<<temptiddler>> stateField="value" text="" >
<$button> Set <$set name="key" tiddler=<<temptiddler>> field="key">
<$set name="value" tiddler=<<temptiddler>> field="value"> <$action-setfield $tiddler="data"$index=<<key>> $value=<<value>> /> </$set>
</$set> <$action-deletetiddler $tiddler=<<temptiddler>> /> </$button>
</$reveal> <$reveal type="match" stateTitle=<<temptiddler>> stateField="value" text="" >
<$button> Remove <$set name="key" tiddler=<<temptiddler>> field="key">
<$action-setfield$tiddler="data" $index=<<key>> /> </$set>
<$action-deletetiddler$tiddler=<<temptiddler>> />
</$button> </$reveal>
</td>
</tr>
</$set> </table>  Hi I did create a Script Manager Edition in 2017, which I do use as my main Link collection utility. While I did create the software I did also create a lot of step-by-step howto videos. So may be the following stuff can help, if you are willing to invest some time. The main intro was at a GG thread INTRO: A script and todo manager workflow / UI experiment + video howto’s You should have a look at the first video, which shows the complete functionality of the edition. The video 12 – Script Todo Manager - link list part1 - functionality - 12 - YouTube shows the function of the list element in detail. Video 13 – discusses how the code works in detail Script Todo Manager - link list part2 - implementation - 13 - YouTube Video 14 – shows a bit of background about lists and the currentTiddler variable Video 15 / 16 / 17 – shows how I did create the “action” buttons Script Todo Manager - create toggle button from scratch part1 - 15 - YouTube The videos are typically between 3 and 15 minutes long. The project itself is at: Script Manager Edition — manage information of all types … That’s the same version as I use to collect my links. have fun! mario While your code is semantic and clear, this is another approach (a modular approach, uses macros) \define tempTiddler() xx$:/temp
\define inputbox(prop) <$edit-text tiddler=<<tempTiddler>> field="$prop$" placeholder="$prop$" default=""/> \define btn-actions() <$list filter="[<value>!match[novalue]]" variable=null
emptyMessage="""<$action-setfield$tiddler=<<__dataTiddler__>> $index=<<key>> />""" > <$action-setfield $tiddler=<<__dataTiddler__>>$index=<<key>> $value=<<value>> /> </$list>
<$action-deletetiddler$tiddler=<<tempTiddler>> />
\end

<$let key= {{{ [<tempTiddler>get[key]trim[]!is[blank]] :else[[nokey]] }}} value= {{{ [<tempTiddler>get[value]trim[]!is[blank]] :else[[novalue]] }}} > <$list filter="[<key>match[nokey]then[yes]else[no]]" variable=disabled-status>
<$button disabled=<<disabled-status>> actions=<<btn-actions>> >Add/Remove</$button>
</$list> </$let>
\end

\define x-table(dataTiddler:data)
<table>
<tr><th>Key</th><th>Value</th></tr>
<$list filter="[<__dataTiddler__>indexes[]]" variable="prop"> <tr> <td><<prop>></td> <td><$view tiddler=<< __dataTiddler__>>   index=<<prop>> /></td>
</tr>
</\$list>
<tr>
<td><<inputbox key>></td>
</tr>
</table>
\end


Example

<<x-table data>>


Thanks Mario, I watched your series when you released it but completely forgot about it by now. I will definitely check it out again! I remember there being a wealth of good tricks and new concepts in them.

For some reason tiddly-macros always were some arcane art I never had the guts to get into and always preferred JS macros because that did resonate more with my thinking.

I adapted some things from your solution but it pretty much does what I want it to do. Thanks a lot!

Are you referring to the edition as a whole, or the “button info”?

@tjout
You may find Data Tiddler in TW-Scripts useful

1. goto Scripts in Tiddlywiki — codes, macros, and solutions in TW (kookma.github.io)
2. from sidebar click on Contents tab
3. from the Content list click on Data Tiddler
4. Click the first title
5. Each tiddler has a Previous | Next button at the tiddler bottom

There are examples for working with dictionary and JSON tiddlers, including property table

http://chronicles.wiki/TW5-RenderTablePlugin/#Examples%2FMacros%2FTable

@tjout
Is this useful for your purpose. I don’t know what it does clearly. I saw some common words in the description of this plug in and your question. That’s why I am posting it here

Thanks for the link @arunnbabu81. As far as I can see that macro creates tables one can sort by any field on the fly. What I was looking for is to change the order via drag&drop.