HTML like forms saving information in data tiddler

[Atul Grover]

Hi everyone,

How can I make an html form in a tiddler, and save the values entered in the form, into a data tiddler? 

AG

[Eric Shulman]

On Monday, June 21, 2021 at 1:19:40 AM UTC-7 atulg...@gmail.com wrote:

How can I make an html form in a tiddler, and save the values entered in the form, into a data tiddler? 

To store the input in a field, you will need to use the $edit-text widget, like this:

<$edit-text field="somefield" tag="textarea" class="tc-edit-texteditor"/>

Unfortunately, this won't work quite right.  The problem is that as you type each character of input, the TWCore refresh handling will be triggered for the current tiddler which will, in turn, cause the $edit-text widget to be re-rendered and, as a side effect, the widget will lose the input focus.  The result is that you can only type one character at a time, and then you will have to click inside the textarea to restore the focus.  This is, of course, completely impractical.

However, there is a way to work around this by using a temporary tiddler to hold the $edit-text input while you type, and then press a $button to copy that input into the desired field of the current tiddler.  Try something like this:

\define temp() $:/temp/$(currentTiddler)$/somefield

<$edit-text tiddler=<<temp>> tag="textarea" class="tc-edit-texteditor" default={{!!somefield}}/>

<$button> ok

   <$action-setfield somefield={{{ [<temp>get[text]else{!!somefield}] }}}/>

   <$action-deletetiddler $tiddler=<<temp>> />

</$button>

<$button> cancel

   <$action-deletetiddler $tiddler=<<temp>> />

</$button>

Notes:

* temp() defines a temporary tiddler that includes the name of the current tiddler and the name of the target field

* the $edit-text gets it's starting value from "somefield" of the current tiddler and then, as you type, it stores the changed value in the $:/temp tiddler

* the "ok" button then copies the value from the $:/temp tiddler back into "somefield" of the current tiddler

* note that, if you haven't actually changed the contents of the $edit-text field, the "ok" button simply copies the previously stored value from "somefield" (i.e., no change in value occurs)

* the "ok" button also deletes the $:/temp tiddler so the value in the $edit-text widget will now show the new "default" value from "somefield" of the current tiddler

* an optional "cancel" button deletes the $:/temp tiddler so the value shown in the $edit-text automatically reverts to the previously stored value from "somefield" of the current tiddler

enjoy,

-e 

[Eric Shulman]

On Monday, June 21, 2021 at 1:19:40 AM UTC-7 atulg...@gmail.com wrote:

How can I make an html form in a tiddler, and save the values entered in the form, into a data tiddler? 

My first reply was assuming that you wanted to save the input into a field in the *current* tiddler.

However, upon re-reading your question, I see that you want to save the values "into a data tiddler"

This is actually quite simple:

<$edit-text tiddler="sometiddler" index="someindex" tag="textarea" class="tc-edit-texteditor"/>

Notes:

* The target tiddler "sometiddler" will be saved with type="application/json" and will contain

* any newlines you enter will be automatically encoded as \n

* any quotes you enter will be automatically encoded as \"

enjoy,

-e

[Saq Imtiaz]

To store the input in a field, you will need to use the $edit-text widget, like this:

<$edit-text field="somefield" tag="textarea" class="tc-edit-texteditor"/>

Unfortunately, this won't work quite right.  The problem is that as you type each character of input, the TWCore refresh handling will be triggered for the current tiddler which will, in turn, cause the $edit-text widget to be re-rendered and, as a side effect, the widget will lose the input focus.  The result is that you can only type one character at a time, and then you will have to click inside the textarea to restore the focus.  This is, of course, completely impractical.

Just a heads up that this should no longer be an issue as of TW 5.2.0 for most use cases. The refresh handling is more specific and checks for changes in the transcluded field before triggering a re-rendering. So changes to field "myfield" of tiddler A, wont cause a refresh for any transclusions of the "text" field (or any field other than "myfield") for tiddler A.

[Atul Grover]

Thanks Eric,  

Worked like a charm. 

What other tags (tag="textarea") can we use? 

I will try using textbox/checkbox/date etc. 

AG

[TiddlyTweeter]

Small query; since this thread has experts involved :-)

HOW  do I NOT SORT a data dictionary?

I use dictionaries a lot for some tasks. I'd like to render the following exactly in the order of the dictionary records. 

But it all goes alpha on default.

   Bank - Fideuram : https://www.fideuramonline.it/script/ServiceLogin/ib/login 

   Bank - Deutsche : https://lamiabanca.db.com/apigw/wb/login 

   Bank - NatWest : https://DUMMY.html 

   Bank - PayPal : https://www.paypal.com/it 

   Amazon - IT : https://www.amazon.it 

   Amazon - UK : https://www.amazon.co.uk 

   Amazon - USA : https://www.amazon.com 

   Amazon - DE : https://www.amazon.de 

   Amazon - FR : https://www.amazon.fr

In render Amazon goes top, Bank after. That is NOT what I need!

       Q: Is there any way to present dictionary entries ordered exactly as entered?

Just asking! Trying to understand this ...

TT

[TW Tones]

Saq,

Just a heads up that this should no longer be an issue as of TW 5.2.0 for most use cases. The refresh handling is more specific and checks for changes in the transcluded field before triggering a re-rendering. So changes to field "myfield" of tiddler A, wont cause a refresh for any transclusions of the "text" field (or any field other than "myfield") for tiddler A.

This is awfully exciting and will make the use of forms and custom views of tiddlers much easier. This limitation has always felt like unnecessary complexity for users, not withstanding the technical reasons,  I hope this will inspire more solutions, however the truth is this constraint has taken me down some interesting paths. So it does demonstrate how constraints can cause innovation.

However it seems to me the ability to readily (as opposed to with difficulty) construct forms for the editing of tiddlers will unleash the possibilities and encourage more users. Once again I can see value in providing the tools through de facto standards will help, these include;

• The way to implement modes eg view and edit - ie toggle a form to accept input or simply display.
• Using a field to indicate an "object type" so tiddlers can identify the relevant form to present.
• A suit of tools to populate a fields value from existing values, set lists and other lookups, or add a new value when permitted.
• Additional field definition and field-type handling tools.

Finally, a default form that allows editing of all existing fields from which the designer can rearrange and customise a form would be a good start.

Regards

Tones

[TW Tones]

atulg,

Many, though not all of the other html input tags work with the edit-text widget. Date/time work but do not convert dates to the TiddlyWiki full date/time serial which is ideal, but you can use actions to reformat to this serial number. Number email etc... do restrict entry somewhat as desired.

Regards

Tones

[TW Tones]

TT,

At least with the data dictionary format key:value you can parse the data tiddler and extract each row using [[datatiddler]get[text]spitregexp[\n]] and retain the order. There is a similar method for JSON to parse and extract titles only which I used to list the contents of the history tiddler - 

Here is a partial snipit of listing the contents of the history tiddler, a json of tiddler titles, pasted in a tiddler tagged for the sidebar tabs you could call this a session history tab.

\define title-string() "title": "

\define end-title() "

\define hasdrafts() {{{ [list[$:/StoryList]get[draft.of]] }}}

<$list filter="[{$:/HistoryList}split<title-string>splitbefore<end-title>removesuffix<end-title>reverse[]is[tiddler]limit[20]]">

   <$wikify name=hasdrafts text="""<<hasdrafts>>""">

   <$list filter="[all[current]] -[subfilter<hasdrafts>]">

       <<currentTiddler-buttons>> <!--<save-if-draft>--> <$link/>

      <!--<close-if-open-button>--> <<close-if-open-button>><br>

   </$list>

   </$wikify>

</$list>

The buttons are not defined.

Regards

Tones

[Atul Grover]

Dear All,

In my case I want to allow the users to input and store data (in a predefined structured way) without giving them the tiddler edit functionality,

So an HTML form which saves data either in the tiddler fields or in a data tiddler (whichever is easier) was desired.

I tried using JSON EDITOR, except (as a lay person) I found it difficult to use. More ready to use schema for basic form types or Links to online schema creation tool could have helped.

I would love to see a separate section in TW5 dedicated to HTML FORM functionality, with 2/3 ready to use/copy forms. 

I my case even something as simple as a textarea tag (thanks Eric) has sufficed (for now). 

This is a basic functionality could be at par with the basic "Note-Taking" or " Task-Management" and would propel faster adoption of TW5 by masses.

Regards

AG

[Atul Grover]

PS: 

1. A separate html-form edition would be great.

2. I wanted to use a simple  $:/plugins/tgrosinger/tw5-checklist except the functionality would vanish in case all items from the list are deleted. 

3. I am presently using a combination of https://kookma.github.io/TW-Todolist/ and ERIC's text-area (tiddler field) to help users store/save data.

[TW Tones]

atulg,

There is no need to go to a html form, TiddlyWiki has all the tools to build forms natively however you can use HTML for layout and css anyway. Its just when you define fields or address the text field in a tiddler you need to use tiddlywiki edit-text widget etc... This is because tiddlywiki keeps trackh as changes are made and immediately reflects the new values where ever they are referenced. 

In the new version 5.2.0 there will be improvements which will support more sophisticated forms and editing the current tiddler. At the moment a little gymnastics is required to edit the current tiddler. This a is why when you edit a tiddler a draft tiddler is created. The changes coming remove some of the complexity. 

 

To edit tiddlers via a designed or created form, rather than the default edit mode you display this form via the view template. I suggest just as the standard wiki manages tiddlers in view or edit modes, that should you build edit forms in the view template you should introduce another mode eg "view, update, edit" where update is the mode in which your form allows a form based edit (in underlying view mode). Such a mode should have a global and local setting so the current tiddler can differ from the global setting.

Regards

Tones

[TiddlyTweeter]

Thanks TW Tones for posting that code ...

It is useful.

Best wishes

TT