"EditTextWidget for Dummies" anywhere?

[Jake]

I'm just wondering if there is some manual or tutorial about EditTextWidget and how to create and manipulate input forms in general? 

Because this info: https://tiddlywiki.com/#EditTextWidget is definitely not enough for me.

For example: why does the input field becomes "inactive" after every single letter I type? Is there a way to bypass that? Why can't I "just type", then hit enter, tab or "click away"? Currently I just have to "Ctrl+C/Ctrl+V" the full value from somewhere.

[Michael Wiktowy]

Hi Jake,

Read carefully the "Notes" section of that link you just referenced. You need to edit a field that is not in the tiddler that contains the EditTextWidget. The notes give you an example how to do that. It can be worked around.

/Mike

[David Gifford]

I'll give it a try.

Paste <$edit-text tiddler="YOURTIDDLER" default="" tag="input"/> into a tiddler. When typing in the input area created by this process, you are editing  the text field of the YOURTIDDLER tiddler in an 'input' (small, one line) style input area, with no default text assigned. Open YOURTIDDLER to see the results.

If you want a larger area to type in, you can use <$edit-text tiddler="YOURTIDDLER" tag="textarea" class="tc-edit-texteditor" default=""/> This makes it a textarea type of form field, and applies the CSS class tc-edit-texteditor. Again, no default text assigned.

The EditTextWidget tiddler at tiddlywiki.com gives you other parameters you can place in this widget.

• field="" gives you the option to edit a field of the tiddler other than the text field, for example, field="title".
  
• placeholder="" lets you put instructions in the text field that will disappear when the user enters their own text there.
  
• The size, autoHeight, minHeight and rows parameters allow you to tweak the look of the input area.

And, as the explanation states, you can't use an edittext widget in the tiddler you want to edit.

[David Gifford]

mwik and I must have clicked send at the same time. Google told me the post had been deleted, so I thought I lost my post! But here it is, after all.

[Jake]

Hi Jake,

Read carefully the "Notes" section of that link you just referenced. You need to edit a field that is not in the tiddler that contains the EditTextWidget. The notes give you an example how to do that. It can be worked around.

Yeah, I read that, but don't think I got that precisely. It can't be part of the tiddler even as a template?

So, currently I have a Tiddler named "Data entry" with some text and several <$edit-text field="....." size=...> fields. Then I create another Tiddler - let's call it SampleTiddler and put at the top or bottom of it {{||Data entry}}

But when I type smth in the input field - I can type only 1 symbol at a time. After that I have to click the field again and type or delete only 1 symbol. The only thing that works - Ctrl+C/Ctrl+V. The field are updated as they should. I'm just curious about this "input" thing. Why I can type only 1 symbol at a time?

 

[Michael Wiktowy]

From EditTextWidget:
"One trap to be aware of is that the edit text widget cannot be used to edit a field of the tiddler that contains it. Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field."
...
"In short the EditTextWidget can not change properties of the tiddler it is embedded in or part of. It can only change fields of other tiddlers."

What this means in your specific example is since your EditTextWidget and the field that your are editing are in your DataEntry tiddler, it will force a refresh of the EditTextWidget with every keystroke ... even if you transclude it into another tiddler. You are best to tweak your DataEntry EditTextWidget with tiddler=DataStorage so that the widget is in the DataEntry tiddler and the field being edited is in DataStorage tiddler.

For sure, it is an annoying limitation and an easy trap to fall in considering that the default tiddler for the widget is currentTiddler but once you get things working, it is easy problem to avoid. I banged my head on this one for a while.

/Mike

[Jake]

"Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field". - yep, that's exactly what happens.

Buuuut... how to update the fields of the TARGET Tiddler?.. How to chose the title of the tiddler I want to change the field values?? Change it manually EVERY TIME changind the name of "DataStorage" tiddler to the needed one? Then - what's the point??? It makes it absolutely useless this way... I'm sure I'm not getting smth here...

PS. 

1. "tiddler: The tiddler to edit (defaults to the current tiddler)" 

2. "One trap to be aware of is that the edit text widget cannot be used to edit a field of the tiddler that contains it."

sooooo... it has the default value that you cannon use?.. seems legit...

[Michael Wiktowy]

Jake,

Do some reading on how the <$list> and <$tiddler> widgets and templates can affect the value of currentTiddler before being dismissive. There is good reason why the default target of a lot of widgets is currentTiddler that makes it appropriate in 99.9% of use-cases.

Also understand the use of variables, macros and TextReferences to assign the values to widget parametersbsince they open up a world of flexibility to your Tiddlywiki applications and avoid having to manually change code.

/Mike

[Jake]

well, that's why I asked if there is some manual or tutorial for that thing in the first place... :))  

The basic articles on https://tiddlywiki.com provide very little in terms of "learning". In most of the cases it's just simple description of fields and parameters useful to those who already know how to deal with them. With 1-2 simple basic examples at best. 90% of info I'm getting in terms of learning is either searching this forum or asking people who know "how to do stuff" here. I read the $list and $tiddler descriptions (actually I read all of those: https://tiddlywiki.com/#Widgets) before asking here but it didn't help me much. As about being dismissive I was dismissive not about the tool but about my understanding of that tool. I thought that was rather obvious.

[Birthe C]

Jake,

I do not have a link for a tutorial, does one even exist? But maybe you can benefit from an example.

http://mycookbook.tiddlyspot.com/ I create the recipes using a viewtemplate called $:/_bc/viewtemplate/recipe

Try to select a recipe and see how it is done. Create one yourself and so on. I think you will find that you can reuse this way for your own purpose.

Birthe

[Eric Shulman]

On Thursday, July 2, 2020 at 8:18:46 AM UTC-7, Jake wrote:

From EditTextWidget:
"One trap to be aware of is that the edit text widget cannot be used to edit a field of the tiddler that contains it. Each keypress results in the tiddler being re-rendered, which loses the cursor position within the text field."

Here's a macro that provides a work-around interface:

\define input(fieldname)
<$vars
   temp="$:/temp/$(currentTiddler)$/$fieldname$"
   default={{{ [<currentTiddler>get[$fieldname$]] }}}
   placeholder="enter a value for $fieldname$">
<$keyboard key="enter" actions="""
   <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$" $value={{{ [<temp>get[text]] }}} />
   <$action-deletetiddler $filter="[<temp>]" />
""">
<$edit-text tag="input" tiddler=<<temp>> default=<<default>> placeholder=<<placeholder>>/>
</$keyboard>
<$button tooltip="delete field"> {{$:/core/images/delete-button}}
   <$action-deletefield $tiddler=<<currentTiddler>> $field="$fieldname$"/>
   <$action-deletetiddler $filter="[<temp>]" />
</$button>
<$button tooltip="cancel input"> {{$:/core/images/cancel-button}}
   <$action-deletetiddler $filter="[<temp>]" />
</$button>
<$button tooltip="save input"> {{$:/core/images/done-button}}
   <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$" $value={{{ [<temp>get[text]] }}} />
   <$action-deletetiddler $filter="[<temp>]" />
</$button>
</$vars>
\end

How to use it:

* copy the above code into a tiddler (e.g., "$:/TiddlyTools/Macros/getinput")

* tag that tiddler with "$:/tags/Macro"

* in any other tiddler, write:

<<input "foo">>

How it works:

* the $edit-text default value is the current value in "SomeField" of "SomeTiddler"

* the $edit-text input goes into a temporary tiddler named $:/temp/SomeTiddler/SomeField

* the "delete" button removes "SomeField" from "SomeTiddler"

* the "cancel" button discards the temporary tiddler (automatically reverting the input contents to showing the default value)

* the "ok" button copies the temporary tiddler content to "SomeField" in "SomeTiddler"

* the "enter" key is a shortcut for pressing "ok"

I'm also working on an enhanced version where the buttons appear as a "popup"

only when the $edit-text control gets the input focus, but I'm still debugging that

version (there's a strange interaction between the focus and the popup that I

haven't yet figured out).

enjoy,

-e

[Jake]

Here's a macro that provides a work-around interface:

How to use it:

* copy the above code into a tiddler (e.g., "$:/TiddlyTools/Macros/getinput")

* tag that tiddler with "$:/tags/Macro"

* in any other tiddler, write:

<<input "foo">>

How it works:

* the $edit-text default value is the current value in "SomeField" of "SomeTiddler"

* the $edit-text input goes into a temporary tiddler named $:/temp/SomeTiddler/SomeField

* the "delete" button removes "SomeField" from "SomeTiddler"

* the "cancel" button discards the temporary tiddler (automatically reverting the input contents to showing the default value)

* the "ok" button copies the temporary tiddler content to "SomeField" in "SomeTiddler"

* the "enter" key is a shortcut for pressing "ok"

I'm also working on an enhanced version where the buttons appear as a "popup"

only when the $edit-text control gets the input focus, but I'm still debugging that

version (there's a strange interaction between the focus and the popup that I

haven't yet figured out).

wow-wow-wow!! what sorcery is this?? I hardly understand what is happenning in that vodoo-macro but it works! Tested it in one of my micro-wikis (visual novel database).

I think it should be part of the core TW (together with Relink Plugin). When I asked a question - I thought it is rather standard operation. To have your own custom template to input data in your tiddlers. What could be more standard? But turned out you need to have a TW degree to do that because of... because of that "engine-techie stuff" that I doubt I would understand. :) Also I VERY doubt that I could come to this solution by myself. Even after reading the whole tiddlywiki.com several times. At least in the nearest year or two. :)  There is a huuuge gap between TW newbies and oldtimers and very little possibilities to bridge that because there's very little literature on the topic since TW community is relatively small.

But I have one more question. Is it possible to make a button for that transcluded template tiddler with <<input "...">> fields appear and dissappear? Because I don't need to see it all the time. I just need it to fill in initial values or change them. Btw I was also thinking if it is possible to make this whole "Fill in Data Form" to popup with a press of a button in a sertain tiddler and closed when the data is added/updated.

Anyway, again thanks A LOT, Eric!

[Eric Shulman]

On Thursday, July 2, 2020 at 11:24:04 AM UTC-7, Eric Shulman wrote:

I'm also working on an enhanced version where the buttons appear as a "popup"

only when the $edit-text control gets the input focus, but I'm still debugging that

version (there's a strange interaction between the focus and the popup that I

haven't yet figured out).

Here's the version that uses the focusPopup="..." method, so that the delete/cancel/ok buttons

only appear when you put the cursor into the input field:

\define inputpopup(fieldname)
<$vars
   temp="$:/temp/$(currentTiddler)$/$fieldname$"
   popup=<<qualify "$:/state/popup/$(currentTiddler)$/$fieldname$">>

   default={{{ [<currentTiddler>get[$fieldname$]] }}}
   placeholder="enter a value for $fieldname$">
<$keyboard key="enter" actions="""
   <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$

" $value={{{ [<temp>get[text]] }}} />
   <$action-deletetiddler $filter="[<popup>] [<temp>]" />
""">
<$edit-text tag="input" tiddler=<<temp>> default=<<default>> placeholder=<<placeholder>> focusPopup=<<popup>> class="tc-popup-handle"/>
</$keyboard>
<$reveal state=<<popup>> type="popup" text="" position="right" style="margin-left:0.25em;">

   <$button tooltip="delete field"> {{$:/

core/images/delete-button}}

      <$action-deletefield $tiddler=<<currentTiddler>> $field="$fieldname$"/>

      <$action-deletetiddler $filter="[<popup>] [<temp>]" />

   </$button>
   <$button tooltip="cancel input"> {{$:/core/images/cancel-button}}

      <$action-deletetiddler $filter="[<popup>] [<temp>]" />

   </$button>
   <$button tooltip="save input"> {{$:/core/images/done-button}}
      <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$" $value={{{ [<temp>get[text]] }}} />

      <$action-deletetiddler $filter="[<popup>] [<temp>]" />
   </$button>
</$reveal>
</$vars>
\end

Install it the same way as the previous version:

* copy the above code into a tiddler (e.g., "/TiddlyTools/Macros/inputpopup")

* tag that tiddler with "$:/tags/Macro"

* in any other tiddler, write:

<<inputpopup "foo">>

-e

 

enjoy,

-e

[Eric Shulman]

On Thursday, July 2, 2020 at 1:31:53 PM UTC-7, Eric Shulman wrote:

Here's the version that uses the focusPopup="..." method, so that the delete/cancel/ok buttons

only appear when you put the cursor into the input field

Here's yet another version.  This one uses a $button to toggle between field display and editing.

and, like the "popup" version, the delete/cancel/ok buttons only appear when you click on the

text to start editing.  However, unlike the popup version, the buttons do not automatically

disappear when you click somewhere else.  You have to click on one of the buttons to trigger

an action that makes them go away.

\define inputbutton(fieldname,width:"12em",style:"2px inset")
<$vars
   temp="$:/temp/$(currentTiddler)$/$fieldname$"

   default={{{ [<currentTiddler>get[$fieldname$]] }}}
   placeholder="enter a value for $fieldname$">

<$list filter="[<temp>!is[tiddler]]" variable="inactive">
   <$button class="tc-btn-invisible" style="width:$width$;text-align:left;white-space:nowrap;border:$style$" set=<<temp>> setTo=<<default>>>
      <$reveal default=<<default>> type="match"   text=""><$text text=<<placeholder>>/></$reveal>
      <$reveal default=<<default>> type="nomatch" text=""><$text text=<<default>>/></$reveal>
   </$button>
</$list>
<$list filter="[<temp>is[tiddler]]" variable="active">

   <$keyboard key="enter" actions="""
      <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$

" $value={{{ [<temp>get[text]] }}} />
      <$action-deletetiddler $filter="[<temp>]" />
   """>
   <$edit-text tag="input" tiddler=<<temp>> default=<<default>> placeholder=<<placeholder>>/>
   </$keyboard>
   <span style="position:relative;">
   <span style="position:absolute;width:7em;">
   <$button tooltip="delete field" style="display:inline-block;width:2em"> {{$:/core/images/delete-button}}

      <$action-deletefield $tiddler=<<currentTiddler>> $field="$fieldname$"/>

      <$action-deletetiddler $filter="[<temp>]" />
   </$button>
   <$button tooltip="cancel input" style="display:inline-block;width:2em"> {{$:/core/images/cancel-button}}
      <$action-deletetiddler $filter="[<temp>]" />
   </$button>
   <$button tooltip="save input" style="display:inline-block;width:2em"> {{$:/core/images/done-button}}

      <$action-setfield $tiddler=<<currentTiddler>> $field="$fieldname$" $value={{{ [<temp>get[text]] }}} />

      <$action-deletetiddler $filter="[<temp>]" />
   </$button>
   </span>
   </span>
</$list>
</$vars>
\end

 

Install it the same way as the previous version:

* copy the above code into a tiddler (e.g., "/TiddlyTools/Macros/inputbutton")

* tag that tiddler with "$:/tags/Macro"
* in any other tiddler, write:

<<inputbutton "foo">>

enjoy,

-e

[Jake]

Trash bin icon is absent for me. Plus sometimes icons appear in some weird places. :) And there is a problem with overlapping if there is a text or another field after the inputpopup-field. 

PS. Actually I don't have problems with the icons showing all the time - they are kinda cute. :)

[Jake]

A little question: what if I want this template to appear/disappear with a click of a button?

E.g. I stored that form in a tiddler "DataInput" 

I tried this: 

<$button> Data Form

<$set name="datavar" value="DataInput"> 

<$transclude tiddler={{||<datavar>}}  />

</$set>

</$button>

but obviously I'm doing smth wrong coz it's not working. :)  Plus I want to have another button "No Data" that would change the name of the transcluding tiddler template to another one ("No Data" or just an empty/non existing tiddler, though the 1st variant is better since provide more flexibility) - thus this DataInput template would "disappear".

[Mat]

Jake wrote:

A little question: what if I want this template to appear/disappear with a click of a button?

I didn't follow the intricacies of this thread but to make something appear/disappear with the click of a button you can use the RevealWidget as described here (see section "Accordion or Slider") OR, since you refer to it as a "template" then maybe that means it si something that has a critical tag for it to enable/disable it, in which case you can use e.g the CheckBoxWidget to toggle that tag.

<:-)

[Jake]

 

I didn't follow the intricacies of this thread but to make something appear/disappear with the click of a button you can use the RevealWidget as described here (see section "Accordion or Slider") OR, since you refer to it as a "template" then maybe that means it si something that has a critical tag for it to enable/disable it, in which case you can use e.g the CheckBoxWidget to toggle that tag.

Yeah, thanks Mat! That works. I dunno how I missed that.

<$button set="$:/state/DataReveal" setTo="show">Data Input</$button>

<$button set="$:/state/DataReveal" setTo="hide">Hide</$button>

<$reveal type="match" state="$:/state/DataReveal" text="show">

{{||DataInput}}

</$reveal>

It even works within a macro. At first had some troubles because of double nested transclution. Changed of of the transclutions into macro and all went nicely.

[Ankit]

If you are trying to create a form, I figured the easiest approach was to just store the data of your form on a data tiddler. All this can then be done while giving complete flexibility on different field types. If you create a form template and then use that template to create new tiddlers using {{||template}} that should just work.

Code below shows examples of various HTML field types :

\define db() $(currentTiddler)$-db

\define dbformstate() $(currentTiddler)$-formstate

\define ToggleEditFld(formName, tagValue, fieldType, fieldName, helpText)

<$reveal type="nomatch" stateTitle=<<dbformstate>> stateIndex="$formName$" text="show">

<$tiddler tiddler=<<db>>>{{##$formName$-$fieldName$}}</$tiddler> 

</$reveal>

<$reveal type="match" stateTitle=<<dbformstate>> stateIndex="$formName$" text="show">

<$edit-text tiddler=<<db>> tag=$tagValue$  type=$fieldType$ index="$formName$-$fieldName$"/>

<button class="tc-btn-invisible tc-btn-help" title="$helpText$" aria-label="help">

{{|| $:/core/images/help}}

</button>

</$reveal>

\end

\define ToggleEditBtn(formName)

<$reveal type="nomatch" stateTitle=<<dbformstate>> stateIndex="$formName$" text="show">

<$button type="button" class="btn btn-danger" setTitle=<<dbformstate>> setIndex="$formName$"  setTo="show">Edit</$button>

</$reveal>

<$reveal type="match" stateTitle=<<dbformstate>> stateIndex="$formName$" text="show">

<$button type="button" class="btn btn-success" setTitle=<<dbformstate>> setIndex="$formName$"  setTo="hide">Save</$button>

</$reveal>

\end

<table>

<tr>

<td>

|thead-primary table-caption-top|k

|''Table-Caption''|c

|Title|Details||h

|''URL Field'' |<<ToggleEditFld form1 input url dt_url "Enter [[Sometext|http://www.google.com]] to display Sometext as hyperlink for URL: https://www.google.com">> | <<ToggleEditBtn form1>> |

|''Work Email Address'' |<<ToggleEditFld form1 input email work_email_address "Enter Email">> |~|

|''Other Email Address'' |<<ToggleEditFld form1 input email other_email_address "Enter other Email">> |~|

|''Home Phone Number'' |<<ToggleEditFld form1 input tel home_phone_number "Enter Home phone">> |~|

|''Cell Phone Number'' |<<ToggleEditFld form1 input tel cell_phone_number "Enter Cell phone">> |~|

|''Start Date'' |<<ToggleEditFld form1 input date start_date "Enter Start Date">> |~|

|''Colour'' |<<ToggleEditFld form1 input color form_colour "Select Colour">> |~|

|''Blurb'' |<<ToggleEditFld form1 textarea textarea blurb "Type <br> to display break between lines">> |~|

|''Single Line Input'' |<<ToggleEditFld form1 input text single_line_input "Some one line text">> |~|

</td>

<td>

|thead-primary table-caption-top|k

|''Table-Caption''|c

|Title|Details|h

|''URL Field'' |<<ToggleEditFld form2 input url dt_url "Enter [[Sometext|http://www.google.com]] to display Sometext as hyperlink for URL: https://www.google.com">> |

|''Work Email Address'' |<<ToggleEditFld form2 input email work_email_address "Enter Email">> |

|''Other Email Address'' |<<ToggleEditFld form2 input email other_email_address "Enter other Email">> |

|''Home Phone Number'' |<<ToggleEditFld form2 input tel home_phone_number "Enter Home phone">> |

|''Cell Phone Number'' |<<ToggleEditFld form2 input tel cell_phone_number "Enter Cell phone">> |

|''Start Date'' |<<ToggleEditFld form2 input date start_date "Enter Start Date">> |

|''Colour'' |<<ToggleEditFld form2 input color form_colour "Select Colour">> |

|''Blurb'' |<<ToggleEditFld form2 textarea textarea blurb "Type <br> to display break between lines">> |

|''Single Line Input'' |<<ToggleEditFld form2 input text single_line_input "Some one line text">> |

|>| ~o~ |<|

|>| <<ToggleEditBtn form2>> |<|

</td>

</tr>

</table>

<$set name="formNamevar" value="form3">

|thead-primary table-caption-top|k

|''Table-Caption''|c

|Title|Details|h

|''URL Field'' |<$macrocall $name="ToggleEditFld" formName=<<formNamevar>> tagValue="input" fieldType="url" fieldName="dt_url" helpText="Enter [[Sometext|http://www.google.com]] to display Sometext as hyperlink for URL: https://www.google.com" /> |

|''Work Email Address'' |<$macrocall $name="ToggleEditFld" formName=<<formNamevar>> tagValue="input" fieldType="email" fieldName="work_email_address" helpText="Enter Email" /> |

|>| ~o~ |<|

|>| <$macrocall $name="ToggleEditBtn" formName="form3" /> |<|

</$set>

This will display like so:

The main thing to notice is if you want to create a new field in an existing form, you need to use following macro call with new parameters:

<<ToggleEditFld form2 input url dt_url "Enter [[Sometext|http://www.google.com]] to display Sometext as hyperlink for URL: https://www.google.com">>

or 

<$macrocall $name="ToggleEditFld" formName="form1" tagValue="input" fieldType="url" fieldName="dt_url" helpText="Enter [[Sometext|http://www.google.com]] to display Sometext as hyperlink for URL: https://www.google.com" /> 

The second option is better as that explains the parameters better and can allow passing the formname as a variable if it is a big form with lot of fields.

[Jake]

If you are trying to create a form, I figured the easiest approach was to just store the data of your form on a data tiddler. All this can then be done while giving complete flexibility on different field types. If you create a form template and then use that template to create new tiddlers using {{||template}} that should just work.

Code below shows examples of various HTML field types :

 

Yeah, this could also work, but... I just don't think I'm currently TW-smart enough to understand what is going on here and where. It's easier to deal with 1 field you don't understand functioning then with the whole table you don't understand functioning. :) But I'll definitely save this one and try to understand how to handle it and taylor to my needs. Thank you, Ankit!

[Ankit]

no problem at all.... :)

Let me try and walk you through the edit-text widget as I understand and more knowledgeable people around can pitch in to correct me if I have got this wrong...

As I understand the most basic usage of the widget would be to place the widget in a tiddler like so:

<$edit-text tiddler="name_of_data_tiddler_other_than_one_where_this_widget_is_present" tag="input_or_textrea"  type="html_field_type" index="some-index-name"/>

Now if we want to make just a simple form above can be repeated a number of times with different values for index and it will work. You can check this by creating a new tiddler and pasting the following on it:

|Title|Value|h

|!Input Text |<$edit-text tiddler="testdb" placeholder="Input text-field" index="field1" size="40"/>|

|!Input Text-index |<$edit-text tiddler="testdb" placeholder="Input text-index" index="field2" size="40" tag=input/>|

When you will do this you will notice few things:

1. field1 is textarea. This is because tag=input is not included in paramenter and if it is not specified by default TW assumes it to be textarea.
2. As soon as you fill the field the data will keep getting saved on the tiddler "testdb" specified in the parameters
3. If you open the tiddler "testdb" and edit the values in field on the tiddler with fields you can see the testdb values change with each keystroke.
4. If you change data on "testdb" tiddler it changes in the field on other tiddler too.

The above behaviour tells us that "testdb" tiddler can effectively be treated as backend database for the form on the frontend or so I explained it to myself.

So now if I want to store everything on testdb I need to ensure I am giving unique names to index which can get crowded and messy so I decided to make the backend tiddler change based on name of the frontend tiddler using the macro definition which can be done with following line:

\define db() $(currentTiddler)$-db

All this is essentially doing is defining the variable "db" as a string "Title of Current Tiddler"-db... So if name of current tiddler is Jake then variable db = "Jake-db"

Using this new information we can rewrite the above form as below and see how it works:

\define db() $(currentTiddler)$-db

|Title|Value|h

|!Input Text-index |<$edit-text tiddler=<<db>> placeholder="Input text-index" index="it" size="40" tag=input/>|

|!First Name |<$edit-text tiddler=<<db>> index="firstname" placeholder="First Name"  size="40"/>|

|!Date Field |<$edit-text tag=input type=date tiddler=<<db>> index="dt_text"/>|

|!URL Field |<$edit-text tag=input type=url tiddler=<<db>> placeholder="https://" index="dt_URI"/>|

|!Telephone Field |<$edit-text tag=input type=tel tiddler=<<db>> placeholder="+4407706811884" index="tel"/>|

|!Email Field |<$edit-text tag=input type=email tiddler=<<db>> placeholder="ad...@admin.com" index="email"/>|

|!Colour Field |<$edit-text tag=input type=color tiddler=<<db>> placeholder=color index="color"/>|

In above snippet I have now included more field types so you can see how we are using various html field types. but more importantly you will notice that the parameter tiddler is now calling the macro we defined by using <<db>> which in turn is setting the tiddler to Jake-db assuming the tiddler where you pasted the above snippet is titled "Jake".

ok so now if you enter some data in the fields created by tiddler named Jake, the data for those fields will be saved in the tiddler named Jake-db...

If you have followed this far, you will see that rest of the stuff on my previous post's snippet really just adds the functionality to make the form editable and view only by including the same fields with help of view widget and reveal macro.. tell me if you would want a walk-through of that else you are set to proceed :)