[TW5] Inline Editing of fields

[Stephan Hradek]

I felt that it might be a good idea to be able to edit fields in a tiddler while viewing that tiddler.

This way one could, for example, create contacts tiddlers, suiting one's needs and still be able to edit the contact details without having to edit the tiddler itself.

Here you can download my current attempt.

http://www.4shared.com/document/dSQIo7X2/five-1__1_.html

It's looking quite good, I think. When you click the "Edit fields" button, all the diesplayed values become input fields. When you click Cancel or Done, the values are displayed again. But the editing doesn't work too well. After each character typed, the edit mode is closed :(

Maybe someone (Jeremy) has an idea what I'm doing wrong?

[Jeremy Ruston]

Hi Stephan

I can't negotiate the steps needed to download the file. Could you perhaps post the example to TiddlySpot?

Many thanks,

Jeremy

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

--
Jeremy Ruston
mailto:jeremy...@gmail.com

[Stephan Hradek]

Am Dienstag, 5. November 2013 13:54:43 UTC+1 schrieb Jeremy Ruston:

Hi Stephan

Could you perhaps post the example to TiddlySpot?

I'd love to - but I don't see how I could do that :(

[Jeremy Ruston]

TiddlyWiki5 supports saving to TiddlySpot. Search for "tiddlyspot" on five.tiddlywiki.com, or see the instructions here:

http://five.tiddlywiki.com/static/TiddlySpot.html

Best wishes

Jeremy

[Stephan Hradek]

At first it didn't work, saving from five to tiddlyspot using FF14.

But Safari could do it.

And then I could also upload from FF14.

So now you can see the example at http://skeeve.tiddlyspot.com/

[Jeremy Ruston]

Hi Stephan

That's very helpful, thank you. What you are trying to do can be accomplished readily using the edit widget. Within a tiddler you can have a widget like this that will display a particular field of the current tiddler as an edit box:

<$edit field="myAddress"/>

Any changes to the text box are automatically dynamically bound to the underlying field.

If you want the buttons that switch a field from view to edit mode then the way to accomplish that is to use the reveal widget -- see how the preview is done in the edit template for an example.

Both this and your "home tiddlers" hack make use of inline event handlers. That's very much deprecated for TiddlyWiki5. Generally, fiddling around directly with the DOM will fall foul of TW5's refresh mechanism. The way to add custom javascript to TW5 is via the module mechanism.

Best wishes

Jeremy.

[Stephan Hradek]

Am Dienstag, 5. November 2013 15:19:00 UTC+1 schrieb Jeremy Ruston:

What you are trying to do can be accomplished readily using the edit widget.

Sounds great. Will test.
 

Both this and your "home tiddlers" hack make use of inline event handlers.

Yes. As a proof of concept and because I didn't look at modules yet.
 

Generally, fiddling around directly with the DOM will fall foul of TW5's refresh mechanism.

Except for replacing a class, there is no other change in the DOM at all in my current example. Still a no-go?

[Stephan Hradek]

Am Dienstag, 5. November 2013 15:41:47 UTC+1 schrieb Stephan Hradek:

Except for replacing a class, there is no other change in the DOM at all in my current example. Still a no-go?

To answer myself: YES! And this seems to be the cause for my problem. After typing one character, it seems the tiddler is refreshed and so the "view" class reappears in my form element.

[Jeremy Ruston]

Except for replacing a class, there is no other change in the DOM at all in my current example. Still a no-go?

To answer myself: YES! And this seems to be the cause for my problem. After typing one character, it seems the tiddler is refreshed and so the "view" class reappears in my form element.

That's correct. TW5 reconstructs the DOM dynamically from the underlying render tree; it can happen at any time. It means that you can't maintain state in DOM nodes.

Best wishes

Jeremy

 

[Stephan Hradek]

Am Dienstag, 5. November 2013 15:47:01 UTC+1 schrieb Jeremy Ruston:

That's correct. TW5 reconstructs the DOM dynamically from the underlying render tree; it can happen at any time. It means that you can't maintain state in DOM nodes.

This causes a problem.

Try this tiddler:
|!Name |<$edit field="name"/> |
|!Given Name |<$edit field="givenname"/> |
|!~E-Mail |<$edit field="email"/> |
|!Phone |<$edit field="phone"/> |

<$view field="name"/>

Type a character in any of the fields and observer how the field looses focus.

[Stephan Hradek]

Hi Jeremy!

As you already told me before Hangout #20, you know about this loose of focus. Memorizing the field and refocussing after tiddler refresh won't help, I fear. When a test input receives focus, usually the content gets selected, if I'm not mistaken. So when you type a character, before the next one, the text will be selected and the next character will delete that selected part.

My idea would be, at least for my use case, to not update anything until the "done" button is pressed.

I'd like to explore that idea but I have no clue about any JavaScript API offered by TW5 or whether there is any. I need to know how to retrieve and store the field values.

I also like to know whether or not the change of a class in my posted example can, for this case, be assumed safe? As long as the tiddler I'm editing does not get refreshed, I don't see, at the moment, a problem.

Another idea, how I thought I could achieve what I want, was something like this: I need to create some Form Tiddler which defines the layout and fields which are editable. This Form Tiddler then serves as the View and Edit template at the same time. It should be possible to create a tiddler with this Form Tiddler as its template. Clicking the EDIT button should then simply offer to change the fields.

I hope I could explain what I mean!?

[Vincent Yeh]

Hi Stephan,

I am not familiar with the field things in TiddlyWiki, but I have some idea about what you mentioned. The 'focus and select' behavior, as far as my experiences are concerned, can be a choice of the programmer's. For example, in my plugin combination TWtid+TWted (available at http://twtable.tiddlyspace.com, or see discussion thread https://groups.google.com/forum/#!searchin/tiddlywiki/view$20mode$20edit/tiddlywiki/0FT6iBneYOk/8sPbbQee2jsJ) I do explicitly select the text when setting focus to the edit box.

As for what you want to do, I don't know about the template things, but just for the editing purposes my plugin combination offers view mode editing capabilities in the TiddlyWiki (classic). It's working in many cases for regular tiddler text (not sure for fields, though) and still under development. If what you want to do can be done with regular tiddler text, instead of fields, and don't mind using the classic version, you are welcome to try them out. The upside is that you don't memorize tricks or hard-to-remember syntax just to get it work. (No disrespect to all the nice people here but I really cannot remember those Klingon-like syntax.) The downsides are 1) they are plugins that needs installation, 2) they are quite large as plugins (both over 50KB in minimized versions), and 3) they are not working with TW5 yet.

For 1) that's the price to pay for not learning Klingon. For 2) I would rather leave it for now for my "function first, optimization later" strategy. For 3) I am (soon to be) spending time studying TW5 plugin mechanism, hopefully to figure a good way to migrate in the near future.

Have fun!

Vincent

[Stephan Hradek]

Thanks for the hint, Vincent.

I'd still like to have the fields be editable. But additionally, being able to edit parts of a tiddler inline would also help. But my focus is more to TW5.

In order not to learn (too much) Klingon and not to have too much overhead, I also thought about how this could be achieved. My idea is to have something like this:

{{ InlineEditor }} <<editButtons>>

So this is to include the Buttons which will allow editing.

And then you need to mark the editable blocks like so:

@@.editable
This is an editable text block.

2nd paragraph of the block
@@

Or you can even mark parts of a line as editable:

This is just one @@.editable
word
@@
which is editable

I updated my tiddlyspot to show how the view mode could look like. I choose pink as background just for illustration puposes. Of course clicking the button doesn't do anything yet besides switching the buttons. And I'm still using Javascript directly in the onclick handler. But as long as I don't know any API, I don't want to put too much effort in doing it properly ;)

[Jeremy Ruston]

Hi Stephan

As you already told me before Hangout #20, you know about this loose of focus. Memorizing the field and refocussing after tiddler refresh won't help, I fear. When a test input receives focus, usually the content gets selected, if I'm not mistaken. So when you type a character, before the next one, the text will be selected and the next character will delete that selected part.

As Vincent notes, we can in fact remember the text selection in order to restore it correctly. It's fiddly, but do-able. The tricky part is tracking widget nodes across refresh cycles, because of the way that DOM nodes can get recreated as part of the refresh cycle.

My idea would be, at least for my use case, to not update anything until the "done" button is pressed.

In effect that is how TW5 already works. Edits happen live to the draft of the tiddler, and then clicking done copies the draft over the original. So, the actual edit isn't performed until you click done. We update the draft live so that it can be synced to the server/localstorage for backup.

I'd like to explore that idea but I have no clue about any JavaScript API offered by TW5 or whether there is any. I need to know how to retrieve and store the field values.

There's quite a lot of dev documentation on five.tiddlywiki.com, and a great deal of comments in the code.

 

I also like to know whether or not the change of a class in my posted example can, for this case, be assumed safe? As long as the tiddler I'm editing does not get refreshed, I don't see, at the moment, a problem.

The tiddler you're editing could get refreshed because of, say, an unrelated change in the content of the story list. It's pretty fundamental to TW5 that DOM nodes are dynamically created. It's just the same as modern frameworks like Angular.

 

Another idea, how I thought I could achieve what I want, was something like this: I need to create some Form Tiddler which defines the layout and fields which are editable. This Form Tiddler then serves as the View and Edit template at the same time. It should be possible to create a tiddler with this Form Tiddler as its template. Clicking the EDIT button should then simply offer to change the fields.

I'll reply separately to your later message about this part.

Best wishes

Jeremy

 

I hope I could explain what I mean!?

[Jeremy Ruston]

If I understand correctly, you're trying to switch fragments of a tiddler into edit mode? That's not going to be easy. Because raw wikitext can be generated by macro parameter expansion there isn't a straightforward relationship between the tiddler source text and the text that the parser sees.

Best wishes

Jeremy.

[Eric Shulman]

On Wednesday, November 6, 2013 8:07:54 PM UTC-8, Vincent Yeh wrote:

I am not familiar with the field things in TiddlyWiki ....

... I don't know about the template things

TWCore custom tiddler fields and templates (ViewTemplate/EditTemplate) are very effective for creating tiddlers with use-case specific fields.

... view mode editing capabilities in the TiddlyWiki (classic). It's working in many cases for regular tiddler text (not sure for fields, though)...

For some other plugins that do various types of field editing, you should check out:

   http://www.TiddlyTools.com/#EditFieldPlugin (edit fields from view mode)

   http://www.TiddlyTools.com/#EditSectionPlugin (popup editor for tiddler sections)

   http://www.TiddlyTools.com/#ListboxPlugin (set fields from droplists and listboxes)

   http://www.TiddlyTools.com/#CheckboxPlugin (set/clear tags or field values)

-e

[Vincent Yeh]

I just watched your video about custome fields and now I have a better idea of what they are and what they do. Thanks a lot, Eric.

[Dylan Kinnett]

I've been able to have a great deal of luck making inline editable fields, by making use of the EditTextWidget.

I'm still having some of the troubles you're describing, when it comes to editing the title, but with other custom fields it seems to work well.

For example, if a tiddler has a field like pub_date then you can do the following in the body of the tiddler

<$edit-text field="pub_date" type="date" tag="input"></$edit-text>

then, the body will display an input to edit that field (in compatible browsers with a date selector built into the input tag)

[Stephan Hradek]

Which Browser? Neither my (old) Safari nor my (old) FireFox could handle

<$edit-text field="pub_date" type="date" tag="input"></$edit-text>

Which I simply pasted into a new tiddler on five.tiddlywiki.com. Typing just one character un-focusses the field.

[Stephan Hradek]

Just to confirm: Also FF25 on WinDOS has the described issue.

[Dylan Kinnett]

I'm on Chrome for windows and mac when it works for me. 

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

[Danielo Rodríguez]

Does anyone find a solution for the loosing focus issue?

The edit widget comes useless whit this problem. I would like to have some templates in my wiki, and whit this limitation is not possible.

[Stephan Hradek]

Sure there is a solution: Just edit the fields of another tiddler.

[Danielo Rodríguez]

I already realized about that, but thank you for your fast response. So, how can I manage this if the important part for me is the output of those fields? Transcluding the other tiddler does not work, the changes are not reflected. Can I maybe add a button to open the result?

Can I have a "master" tid where all the fields of all the fiddlers with a certain tag are sown?

Thanks in advance. 

[Stephan Hradek]

I don't know what you want to do, so I can't give you a good solution.

But maybe my examples help you?

http://tw5magick.tiddlyspot.com/ check "Creating a simple Contacts DB".

[Danielo Rodríguez]

Wow! You're the author of TW5 Magick? That TW is awesome.

I'm checking your example (for second time, since I checked some days ago) but It's getting too intense for me.

The problem is I don't understand how the whole TW think works. I can't even imagine how you came to the conclusion you needed so many tidlers an the way you chain they. I really miss a tutorial explaining the "basics" of TW. In my opinion the TW documentation is a bit obscure for people not used to it.

Thank you very much for your help

[Stephan Hradek]

Am Montag, 20. Januar 2014 21:47:43 UTC+1 schrieb Danielo Rodríguez:

I can't even imagine how you came to the conclusion you needed so many tidlers an the way you chain they.

You mean in regards to the Contacts example? To be honest: I didn't plan it in advance. I just started to create it in order to see what's required.
 

I really miss a tutorial explaining the "basics" of TW.

Maybe you start posting questions here so that others, like me, can pick them up and create tutorial pages?
 

In my opinion the TW documentation is a bit obscure for people not used to it.

I think I tend to agree ;)

[Danielo Rodríguez]

Hallo!

Yes, I mean your contacts example. I don't understand at all why you use a viewer tiddler, but I suppose why since I'm familiar with the separation of concerns. That kind of things are a bit twisted for a third person.

One thing that I really miss is a list if core available variables and methods and how to use them. I tried to look into tiddlywiky main page with no luck. One example is the tw-list-item. What is that exactly? How many types of items are out there? How can I use them for my own purposes? I don't like to use things that I don't understand where they came from. Maybe there is a better way to do what I want but I don't know how because I lack for a reference.

Of course nobody have to write that extensive documentation, but it will help a lot.

[Julie]

If you talk about that, it's going to be fixed:

While I think of it, a lot of shadow tiddlers with a list widget have an attribute itemClass="tw-menu-list-item" which seems to be obsolete (or is not documented) and replaced with the attribute template="$:/core/ui/ListItemTemplate" or a <div class="tw-menu-list-item"> inside the list widget content.

You're right, the itemClass attribute is obsolete. I've removed the left-over references here:

https://github.com/Jermolene/TiddlyWiki5/commit/bad2e36e45dfc16f57496d4ea1e27d9f9925391d

Best wishes

Jeremy

Otherwise, the tw-menu-list-item seems to be a CSS class to display a list of tiddlers (the results of a filter, typically) as links, with a new line for each.

[Danielo Rodríguez]

Thanks Julie ;) but that only fixes that item incognita. I came to the conclusion that the list widget creates some kind of environment with variables and so. Reading the documentation for writing widgets confirmed it, but I don't know if there are more possibilities or that's all. Can I iterate over the results? In my opinion is not clear enough in te documentation.

Anyway, thanks to everybody for helping so much

[Julie]

Did you check the ListWidget tiddler? It has examples of nested lists.

I've found that the documentation + editing the shadow tiddlers to see how they work (when I don't understand how to use a widget, I search for it in shadow tiddlers) + the 3 first sites in the community tiddler (thanks very much to Dave Gifford, Ton Gerner and Stephan Hradek for these) help in apprehending wikitext, macros, widgets,... There is still much to discover, but a lot becomes understandable and playable with. Curiosity and testing is a key, and maybe a good sense of logic helps also.

[Handoko Suwono]

Hi Danielo,

I made a basic tutorial for  classic TW sometime ago,
http://datacom.co.id/tiddly_tutor.html

Hope it helps a bit. I haven't got a chance to update it due to lack of resources.

Handoko -

[Danielo Rodríguez]

Thanks for your tips.
But about the sense of logic, where is the logic in this:
<$button message="tw-new-tiddler"...

That creates a button that creates a new tiddler. Using the message! I just checked the button documentation and there is no clue about that. I like to play around, but sometimes reverse engineering takes too much time and a bit of frustration.

[Danielo Rodríguez]

Thank you Handoko, I will check it.

[Jeremy Ruston]

Hi Danielo

The button is sending a message back up to the ancestor navigator widget that contains it. It is the navigator widget that actually creates the new tiddler. That indirection is needed because the process of adding the new tiddler needs to know things like the current story and history details. Specifying those details within the button would reduce the ability to reuse them.

Best wishes

Jeremy.

--
You received this message because you are subscribed to the Google Groups "TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an email to tiddlywiki+...@googlegroups.com.

To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/groups/opt_out.

[Danielo Rodríguez]

Hello Jeremy, thank you for the explanation. I understand the mechanism, but it still unintuitive, even reading the documentation. What kind of messages does the navigator accepts? Is that the only one or there are others like close tiddler and so?

[Stephan Hradek]

Am Mittwoch, 22. Januar 2014 12:39:45 UTC+1 schrieb Danielo Rodríguez:

Hello Jeremy, thank you for the explanation. I understand the mechanism, but it still unintuitive, even reading the documentation. What kind of messages does the navigator accepts? Is that the only one or there are others like close tiddler and so?

http://tiddlywiki.com/static/NavigatorWidget.html

 

[Danielo Rodríguez]

Thank you, that throws some light to my doubts.