[TW5] [TW-jsoneditor] Json Editor for Tiddlywiki Open Beta v0.0.5

[Joshua Fontany]

This is NOT an April Fools Day Joke! ;)

I am pleased to announce that after about 2 years of tinkering and learning the guts of tiddlywiki and how to write widgets that Json Editor for Tiddlywiki is a reality!

TW-jsoneditor

The $jsoneditor widget generates and displays an HTML form constructed from the given JSON Schema. It does this by wrapping a TiddlyWiki widget around the json-editorpackage. None of the optional requirements (css frameworks, icons, etc.) of json-editor are included in this plugin except for Bootstrap4 and FontAwesome5.

The schema must be in JSON Schema format and can reside in:

• the text of any json tiddler
• any index in any json tiddler
  
• any field from any tiddler (using the text field by default)
  

Examples are found in the Using Json Editor tiddler in the demo wiki.

Repository: https://github.com/joshuafontany/TW5-jsoneditor

Demo Wiki: https://joshuafontany.github.io/TW5-jsoneditor/

[David Nebauer]

FYI, when I try to open the demo wiki in IE11 (Windows 7, v6.1) I get the internal javascript error "Object doesn't support property or method 'assign'". I can open tiddlywiki.com in this browser.

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywikide...@googlegroups.com.
To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/c7bcd930-74e5-40a4-8150-ebe5d6c2645d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Joshua Fontany]

Thanks! You win first post in the Issues. ;P

https://github.com/joshuafontany/TW5-jsoneditor/issues/1

This should be easy to fix with a "polyfill" so that IE11 can run the code in one of the sub-libraries. Unfortunately, I became super busy this afternoon, so it may have to wait until tomorrow.

Thanks for the bug report! Let me know if you run into any issues in any other browser.

Best,
Joshua Fontany

On Monday, April 1, 2019 at 6:08:57 PM UTC-7, David Nebauer wrote:

FYI, when I try to open the demo wiki in IE11 (Windows 7, v6.1) I get the internal javascript error "Object doesn't support property or method 'assign'". I can open tiddlywiki.com in this browser.

On Tue, 2 Apr 2019 at 09:03, Joshua Fontany <joshua...@gmail.com> wrote:

This is NOT an April Fools Day Joke! ;)

I am pleased to announce that after about 2 years of tinkering and learning the guts of tiddlywiki and how to write widgets that Json Editor for Tiddlywiki is a reality!

TW-jsoneditor

The $jsoneditor widget generates and displays an HTML form constructed from the given JSON Schema. It does this by wrapping a TiddlyWiki widget around the json-editorpackage. None of the optional requirements (css frameworks, icons, etc.) of json-editor are included in this plugin except for Bootstrap4 and FontAwesome5.

The schema must be in JSON Schema format and can reside in:

• the text of any json tiddler
• any index in any json tiddler
  
• any field from any tiddler (using the text field by default)
  

Examples are found in the Using Json Editor tiddler in the demo wiki.

Repository: https://github.com/joshuafontany/TW5-jsoneditor

Demo Wiki: https://joshuafontany.github.io/TW5-jsoneditor/

--
You received this message because you are subscribed to the Google Groups "TiddlyWikiDev" group.

To unsubscribe from this group and stop receiving emails from it, send an email to tiddly...@googlegroups.com.

[@TiddlyTweeter]

Ciao Joshua

Brilliant piece of work! 

It works well and looks good too.

I have in mind to maybe use it for a food nutrition database. That will take me time---but this looks like it will do the job properly.

Best wishes

Josiah

[Joshua Fontany]

Thanks Josiah (@TiddlyTweeter)!

Be sure to explore the Advanced Examples. The key things I improved upon from btheado's version is that the widget now has different modes (edit, view, design, & preview), and there is some smart state-handling (currently just detects which collapse buttons have been closed and then if the view/edit mode toggles), and various other bugfixes and workflow helpers.

The key thing is to follow the procedure outlined in the Advanced Examples  _if_ you have a json object to start with. If not, just spawn a $jsoneditor in design mode, point it to a storage tiddler, and design the form (which then builds/creates the data object). Starting from scratch can lead to 'options paralysis' tho, which is why I gave some concrete examples of starting with a simple form/schema of a simple object, and then adding onto it and using it in more complex cases.

@DavidNebaur - eeee, looks like IE11 not supporting the assign() function is quite a problem. Still researching it.

Best,
Joshua Fontany

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWikiDev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywikidev/xa9PunBvrbE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywikide...@googlegroups.com.

To post to this group, send email to tiddly...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywikidev.

To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywikidev/13e8158b-dd4e-42fe-a6a5-44c112a11f98%40googlegroups.com.

[Joshua Fontany]

Current progress on v0.0.6:

• The Lame: The IE11 .assign() polyfill problem is a bit difficult, as IE11 debugging sucks, and I'm not sure where I need to be loading the polyfill to catch the error in time...
  
• The Awesome: I was successfully able to setup View-Mode so that any content in the JSON data that has wiki-text syntax is automatically rendered into an appropriate widgetTree and attached as children to the $jsoneditor, while the DOM nodes (rendered HTML) they generate is attached to the appropriate place in the form. This works so well that interactive wiki-text components like Buttons WORK!!!

Kinda pleased with myself on that, as it lets $jsoneditor become a full member of the tiddlywiki-ecosystem. This opens up a HUGE design space to play around in.

For example, TonyM mentioned that he might need to refactor his "data structure" in one of his wikis from tiddler-fields holding data to json-tiddler-indexes holding data. This is NOT going to be necessary, as we can now:

• design a JSON object with blank values that represents the structure of each tiddler,
• then auto-generate a schema from this abstract-data-object,
• then, tweak the schema with a $jsoneditor in Design-Mode to look as we like (hide labels, etc),
• then go back and fill in the blank values in our abstract-data-object with actual wikitext that will reference the current tiddler where we will render the editor-UI
• create a view-template (or edit-template) tiddler (& tagged appropriately) with a $jsoneditor widget pointing to our schema+abstract-data-object UI-definition
  
• tag each tiddler we need the UI to render in, where it will automatically pick up the data FROM THE TIDDLER and render it through our new UI
  

At least, that's the theory. Now to get an example implemented. Once I have that I will release v0.0.6.

Best,
Joshua Fontany

[TonyM]

joshua

This is starting to sound revolutionary. I have being playing with a version and am quite impressed.

Once I start to grasp the details a bit more I can help with user support and writting some detailed user documentation however if we could wrap it up with a turn key solution or two I think it may get a lot of adoption. Some effort to maintain tiddlywiki style doco and language would also help.

Amazing work thankyou
tony