Editable table from JSON tiddler

1

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 :smiley:

Tiddler “data”:

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

Tiddler Mask:

<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>
2

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

3

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

\define add-remove-button()
<$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>
<td><<inputbox value>><<add-remove-button>></td>
</tr>
</table>
\end

Example

<<x-table data>>
4

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.

5

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!

6

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

7

I was answering to Mohammad and his solution. Watching your series right now :slight_smile:

8

@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

9

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

10

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.