How to easily fill forms using a set of field values from template tiddlers

[arunnbabu81]

Here is a demo wiki in which I use forms to fill data (for a budget wiki). Click on the Forms link in the topbar to see the relevant tiddlers.

Most frequently used form is Input form - there are number of similar Input tiddlers being created on different days of a month. These are two example Input tiddlers - Petrol and Medicines

There will be similar other Input tiddlers like stationaries, food etc. Each of these Input tiddlers will have a same set of fields with different field values. Most of the field values for a particular type of Input will be mostly same except for one or two fields. Currently I use the clone option of tiddlers to easily create an input tiddler if a similar tiddler was made before. For that I have to do an additional search also.

So I was thinking whether there is an easy way to input these repeating field values for each set of Input in the Form I created using some widgets - Form is shown in the image below.

The code for the form is given below

!!Step 1 - ''Give the tiddler a name'' 

---
<$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='name_temp' placeholder='Tiddler Name'/><br>

!!Step 2 - ''Text field''

---

<$edit-text class='tc-edit-texteditor' tiddler='Input' field='text' placeholder='Tiddler Text'/><br>

!!Step 3 - ''Fields''

---

account: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='account' default='' placeholder='account'/><br>

amount: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='amount' default='' placeholder='amount'/><br>

category: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='category' default='' placeholder='category'/><br>

subcategory: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='subcategory' default='' placeholder='subcategory'/><br>

input_type: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='input_type' default='' placeholder='input_type'/><br>

year: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='year' default='' placeholder='year'/><br>

month: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='month' default='' placeholder='month'/><br>

link: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='link' default='' placeholder='link'/><br>


!!Step 5 - ''Create the tiddler''

---


<$button>
 <$action-createtiddler $basetitle= {{$:/state/NewTiddlerForm!!name_temp}} $overwrite="yes" $template="Input" text={{Input!!text}} year={{$:/state/NewTiddlerForm!!year}} month={{$:/state/NewTiddlerForm!!month}} link={{$:/state/NewTiddlerForm!!link}} account={{$:/state/NewTiddlerForm!!account}} amount={{$:/state/NewTiddlerForm!!amount}} category={{$:/state/NewTiddlerForm!!category}} input_type={{$:/state/NewTiddlerForm!!input_type}}> 
</$action-createtiddler>
Create new input
</$button>


<$button>Clear Form
<$action-setfield $tiddler='$:/state/NewTiddlerForm' name_temp='' text='' account='' amount='' category='' input_type='' year='' month='' link='' />

[TW_Tones]

The answer is there are many ways, all are very easy once designed, but I think the template method is the easiest to design and update.

You can create your own button that creates a new tiddler using a tiddler template for the whole tiddler, and thus the default values are in the template. This is in a way a clone + new name + optional custom field or context as below.

Also a button can contain the logic, fields and preset values in to create each form, but if you want to change a preset value you need to edit code.

Another way to handle default values is to capture and access the “Most Recently used Values for a given fieldname” so if they don’t change they remain the same, if they do change you can access other value before that or from all existing values for that field using each and get operator.

When making a new item button I like to include what I call context, for example the new here creates tiddlers with the current tiddler, but you could for example create the new tiddler, but include the current tiddlers project field and value in the new tiddler, that is the new tiddler inherits the project in which it was created. In this case the new tiddler button is on the view toolbar.

[arunnbabu81]

I already use a template tiddler to automatically create most of the field values of the Input tiddlers (Check the demo). Only some of the tiddler field values are filled using the EditTextWidget. Most of the field values filled using the EditTextWidget are same for a set of similar Input tiddler - so for all petrol related tiddlers, all the field values except 2 or 3 are the same. Similar is the case of medicine tiddler. For the fields whose field value doesn’t change, I want a way to automatically fill those field values (? using select or button widget) rather than maually fill them using EditTextWidget.

[TW_Tones]

As I said before there are many ways to enhance the entry or selection of values for a given field, but first you need to decide what values you want the new field to have. Examples include

• From a set of provided values
• From all existing values in that same field throughout the wiki
• From the last value you set the same field to

As is usual this can all be handled by a filter;

\define select-field-value(fieldname filter:"")
<$select field="""$fieldname$""">
<$list filter='$filter$'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>
\end

<<select-field-value "caption" "[each[caption]get[caption]]">>
<<select-field-value "status" "New WIP done">>

• These macros operate on the current tiddler so if your form is provided via the viewTemplate tag it works on the current tiddler.
• Rather than a temp tiddler this changes the field directly
• The select widget also allows actions so you could do more each time the value is selected such as save the last value to a temp tiddler then include that in the available values as well.
• other options or buttons may be clear or delete field, only display if missing a value etc…

[arunnbabu81]

Thank you @TW_Tones for your reply. I will have a look at it later today.

Here is what I got from my reading yesterday.

<$edit-text class='tc-edit-texteditor' tiddler='Input' field='text' placeholder='Tiddler Text'/>

This is the code from the form I use to create new input tiddlers…the tiddler='Input' in that code is responsible for the creation of fields for the new input tiddlers based on the template tiddler Input.

What I want now is an option to add multiple template tiddlers to the tiddler='' command like Input, Medicine, Petrol etc so that the field values used will differ depending on the template tiddler selected. Is that possible using select widget.

I saw a similar code in this post from @telumire

@@.combobox
<$edit-text field=selection placeholder="type or select"/>
<$select field=selection>
<option value='A Tale of Two Cities'>A Tale of Two Cities</option>
<option value='A New Kind of Science'>A New Kind of Science</option>
<option value='The Dice Man'>The Dice Man</option>
</$select>
@@

Here is the link of his demo - https://combobox-demo.tiddlyhost.com/

[TiddlyTweeter]

@arunnbabu81

Here is a demo wiki in which I use forms to fill data (for a budget wiki). Click on the Forms link in the topbar to see the relevant tiddlers.

Sidenote.

That is also a great example of using MCL for layout!

Just saying!
TT

[arunnbabu81]

@TiddlyTweeter

That is also a great example of using MCL for layout!

Also I like the ensemble feature of MCL for showing demo or doubts regarding different items in the same wiki…just look the number of ensemble I have created in this wiki .

[arunnbabu81]

@TW_Tones

<option value=<<currentTiddler>>><$view field='title'/></option>

I tried to modify my form based on your code to include the select widget - here is the updated form

\define select-field-value(fieldname filter:"")
<$select field="""$fieldname$""">
<$list filter='$filter$'>
<option value='$:/state/NewTiddlerForm'><$view field='title'/></option>
</$list>
</$select>
\end

!!Step 1 - ''Give the tiddler a name'' 

---
<$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='name_temp' placeholder='Tiddler Name'/><br>

!!Step 2 - ''Text field''

---

<$edit-text class='tc-edit-texteditor' tiddler='Input' field='text' placeholder='Tiddler Text'/><br>



!!Step 3 - ''Fields''

---

account:<<select-field-value "account" "[each[account]get[account]]">>

amount: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='amount' default='' placeholder='amount'/><br>

category:<<select-field-value "category" "[each[category]get[category]]">>

subcategory: <<select-field-value "subcategory" "[each[subcategory]get[subcategory]]">>

input_type: <<select-field-value "input_type" "[each[input_type]get[input_type]]">>

year: <<select-field-value "year" "[each[year]get[year]]">>

month: <<select-field-value "month" "[each[month]get[month]]">>

link: <<select-field-value "link" "[each[link]get[link]]">>


!!Step 5 - ''Create the tiddler''

---


<$button>
 <$action-createtiddler $basetitle= {{$:/state/NewTiddlerForm!!name_temp}} $overwrite="yes" $template="Input" text={{Input!!text}} year={{$:/state/NewTiddlerForm!!year}} month={{$:/state/NewTiddlerForm!!month}} link={{$:/state/NewTiddlerForm!!link}} account={{$:/state/NewTiddlerForm!!account}} amount={{$:/state/NewTiddlerForm!!amount}} category={{$:/state/NewTiddlerForm!!category}} input_type={{$:/state/NewTiddlerForm!!input_type}}> 
</$action-createtiddler>
Create new input
</$button>


<$button>Clear Form
<$action-setfield $tiddler='$:/state/NewTiddlerForm' name_temp='' text='' account='' amount='' category='' input_type='' year='' month='' link='' />

But how to use the state tiddler instead of the currentTiddler. So my code is not working when I was trying to use state tiddler - I think I am not using it correctly. Can you take a look at the updated form. If its not possible to send the field values to the newly created tiddler via the state tiddler, I will check another option using currentTiddler.

Edit: In the Step 3 of the above code, I was able use the select widget to get the desired field value - for example, I could select the field value as cash for the field account using select widget

!!Step 3 - ''Fields''

---

account:<<select-field-value "account" "[each[account]get[account]]">>

But I have to pass it to the actioncreate widget within the button widget in the Step 5

<$button>
 <$action-createtiddler $basetitle= {{$:/state/NewTiddlerForm!!name_temp}} $overwrite="yes" $template="Input" text={{Input!!text}} account={{$:/state/NewTiddlerForm!!account}}> 
</$action-createtiddler>
Create new input
</$button>

How can I pass the field value selected from the Step 3 to the actioncreate widget in the Step 5. I have to change the account={{$:/state/NewTiddlerForm!!account}}> in the actioncreate widget to what ??

[telumire]

Thanks for the mention ! I used the combobox trick in my CuratedVideo wiki, for a form that allow me to quickly create tiddlers for youtube channel that I like.

I think you could modify it to achieve what you’re looking for :

https://www.telumire.be/CuratedVideos/#:$:/template/channel/edit

demo

Let me know if you need help with that.

[arunnbabu81]

Thank you @telumire for sharing it. I will take a look at the code…will ask for help if needed.

[arunnbabu81]

Finally I was able to make it work somehow. Thank you @TW_Tones.

\define select-field-value(fieldname filter:"")
<$select field="""$fieldname$""">
<$list filter='$filter$'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>
\end

!!Step 1 - ''Give the tiddler a name'' 

---
<$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='name_temp' placeholder='Tiddler Name'/><br>

!!Step 2 - ''Text field''

---

<$edit-text class='tc-edit-texteditor' tiddler='Input' field='text' placeholder='Tiddler Text'/><br>



!!Step 3 - ''Fields''

---

account:<<select-field-value "account" "[each[account]get[account]]">>

amount: <$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='amount' default='' placeholder='amount'/><br>

category:<<select-field-value "category" "[each[category]get[category]]">>

subcategory: <<select-field-value "subcategory" "[each[subcategory]get[subcategory]]">>

input_type: <<select-field-value "input_type" "[each[input_type]get[input_type]]">>

year: <<select-field-value "year" "[each[year]get[year]]">>

month: <<select-field-value "month" "[each[month]get[month]]">>

link: <<select-field-value "link" "[each[link]get[link]]">>


!!Step 5 - ''Create the tiddler''

---


<$button>
 <$action-createtiddler $basetitle= {{$:/state/NewTiddlerForm!!name_temp}} $overwrite="yes" $template="Input" text={{Input!!text}} year={{!!year}} month={{!!month}} link={{!!link}} account={{!!account}} amount={{$:/state/NewTiddlerForm!!amount}} category={{!!category}} subcategory={{!!subcategory}}input_type={{!!input_type}}> 
</$action-createtiddler>
Create new input
</$button>


<$button>Clear Form
<$action-setfield $tiddler='$:/state/NewTiddlerForm' name_temp='' text='' account='' amount='' category='' input_type='' year='' month='' link='' />

Although its working, I want to make some more improvements to it.

1. How to clear the options from the select widget once I have created a new tiddler using this form.
2. I have made category and subcategory fields. For example - Car and Shopping are two categories. Fuel and Service is subcategories under Car only not Shopping. Similarly Bakery and Stationaries are subcategories under Shopping only. So once I have selected Car as category, I want to see only the subcategories Fuel and Service under the subcategory select widget, not Bakery and Stationaries. How to do it ?
3. How to use the last value set to the same field

@TW_Tones

From the last value you set the same field to

[arunnbabu81]

@telumire

https://demo-complete.tiddlyhost.com/#Budget%20Input%20Form%20telumire

Here is what I made using some of your code I shared above. I was able to add select widget to the tiddler template part of the code of edit text widget in Step 2. But I dont know how to get the pass on those to the action create widget in Step 3.

!!Step 1 - ''Give the tiddler a name'' 

---
<$edit-text class='tc-edit-texteditor' tiddler='$:/state/NewTiddlerForm' field='name_temp' placeholder='Tiddler Name'/><br>

!!Step 2 - ''Text field''

---
<$edit-text field=selection placeholder="type or select"/>
<$select tiddler=selection>
<$list filter='[all[shadows+tiddlers]tag[templates]sort[title]]'>
<option value=<<currentTiddler>>><$view field='title'/></option>
</$list>
</$select>



!!Step 3 - ''Create the tiddler''

---

<$button>
 <$action-createtiddler $basetitle= {{$:/state/NewTiddlerForm!!name_temp}} $overwrite="yes" $template="selection" text={{Input!!text}} > 
</$action-createtiddler>
Create new input
</$button>


<$button>Clear Form
<$action-setfield $tiddler='$:/state/NewTiddlerForm' name_temp='' text='' />

[TW_Tones]

The issues here to address @arunnbabu81 requirements seems to me to be all about the design and coding, not the technical methods which have all being stated.

Here some tips.

• Don’t include anything in your text field, unless its user input, move that to the view template
• Establish a way to indicate what Kind of tiddler it is, I use the object-type field (as type is in use) for example you may use budget-item and then a subtype shopping.
• When you create a new tiddler you have to select first the object-type and subtype, now create and open the tiddler. This new tiddler could be a clone of a template you have for that object-type/subtype
• When a tiddler is open you make the form you want display by detecting the object-type and subcategory in the view template. Any changes will be saved to the current tiddler directly, no need for a temporary tiddler.
  • This way you could even avoid having a template.
• You could write one mini-form for each field and include these in your form entry view template so they can be reused on other forms.

I think what you want to do here is to develop a solution, its great you are jumping in the deep end. The issue is there are many ways to do this but they all depend on each other. I suggest try documenting it for yourself, as if you were going to share it, as you write your solution and force yourself to state the whole design approach.

• I am now experienced enough to do this in my head but I would not have gained this skill without first doing it methodically, and writing it down.
• It is is not so easy to assist you when much of your design approach needs to be gleaned from your code.

[telumire]

First off, a few points :

@arunnbabu81

<$select tiddler=selection>

I think you meant field=selection, that way you store the selection in the field “selection” of the current tiddler.

To access this selection and use it in other widgets, you can use this a filtered transclusion : {{!!selection}}

@arunnbabu81

$basetitle= {{$:/state/NewTiddlerForm!!name_temp}}

There is a space there ! You should write

$basetitle={{$:/state/NewTiddlerForm!!name_temp}}

Since you are using the $basetitle attribute, you shouldn’t set $overwrite="yes" : $basetitle will attempt to NOT overwrite an existing tiddler when creating a new tiddler and add a number to itś title if it already exist, while overwrite will overwrite existing tiddlers.

$template="selection"

This means that the content of the tiddler “selection” will be used as a template → the text and fields will be copied to the new tiddler. I think what you meant is this : $template={{!!selection}}

That way you use the tiddler selected, stored in your selection field, as the template. But again, you should probably NOT do that, and instead use a viewtemplate - that way if you want to change the template of a category, you dont need to change each tiddlers of the category. If you want to be able to edit each tiddler individually, you could consider using a override field for example that will prevent the default template to be applied.

@arunnbabu81

text={{Input!!text}}

I suppose that you want to use the value typed in step 2 ? Then you should type text={{{ [{!!selection}get[text]] }}}

I hope this help !

[arunnbabu81]

Thank you @telumire
It working after making the changes as you suggested.

@telumire

But again, you should probably NOT do that, and instead use a viewtemplate - that way if you want to change the template of a category, you dont need to change each tiddlers of the category

I will have to think about how to use viewtemplate for this purpose. These forms I use in my budget wiki. If you take a look at my wiki, you can see that I create seperate tiddlers for each financial transactions ( I have added only few sample tiddlers in the demo wiki. But I have been using it for the past 4 months in my private wiki). I store the details of these transactions in the tiddler fields. I don’t know how to use viewtemplate for such usecases. Will have to think about it when I get free time. Getting free time is the main problem due to work and family reasons. Most of the tiddlywiki testing I do around and after midnight - just because of some craziness for TW( it’s nearing 3 am here now).

After using the budget wiki daily for last 4 months, the main pain point in this workflow for me was cloning of tiddlers when similar expense or income events occur frequently. I was trying to avoid this cloning of tiddler and to use forms with template tiddlers instead.
I will review my methods so that I can use in long term. Although I have used the budget wiki for last 4 months, it’s not complete yet because I haven’t worked on it after the initial set up was created and all the entries I make are just for testing purpose.

[telumire]

OK, if you want to keep each tiddler self-contained then you can try this simplified setup I just did, I added a preview in it for ease of use :

https://demos.tiddlyhost.com/#Form

demo

I’m curious to see your own version, please let me know if/when you upload it !

I will try to create a more complete version that use View Templates if I find the time, I’ll let you know when I do

[arunnbabu81]

Thank you for sharing it. I will take a look at it tomorrow.

Edit: it looks interesting. I will have to study the code to use it in my forms.very thanks @telumire

[arunnbabu81]

Hi @telumire Sorry for being late. I was travelling for the last two days. I am not comfortable doing TW testing in mobile. Thats why the testing got delayed. I am in the process of tweaking the code to suit my workflow. I added some code to remove the template tag from the newly created tiddlers.

\define tiddlerCreate()
<$action-createtiddler $basetitle={{!!new-tiddler-title}} $template={{!!new-tiddler-template}} >
   <$list filter="[tag[template]]"><$action-listops $tags="-template"/></$list>
<$action-navigate $to=<<createTiddler-title>>/>
</$action-createtiddler>
\end

Is it the correct way to do it ?

Edit: This will remove the tag from the template also. How to remove the tag from the newly created tiddler only while retaining the tag on the template.

[telumire]

Good catch !

This :

@arunnbabu81

<$list filter="[tag[template]]"><$action-listops $tags="-template"/></$list>

Didnt work because you are listing all tiddlers tagged with “template”, then removing their “template” tag.
You need to only target the created tiddler.

You can do this using the action-createtiddler widget to set the tags of the new tiddler when it’s created:

\define tiddlerCreate()
<$action-createtiddler
  $basetitle={{!!new-tiddler-title}}
  $template={{!!new-tiddler-template}} 
  tags={{{ [{!!new-tiddler-template}tags[]format:titlelist[]remove[template]join[ ]] }}}
>
<$action-navigate $to=<<createTiddler-title>>/>
</$action-createtiddler>
\end

Here I use a filtered transclusion to get the list of tags, remove the tag template from the list, then format the title in title list format (just in case there is a tag with a space), and finally join together the name of the tags to set the tags attribute (it expect only one string, so we need to join).

Or you can use the ActionListops Widget to edit the tags after the fact (which is easier to read IMO) :

\define tiddlerCreate()
<$action-createtiddler $basetitle={{!!new-tiddler-title}} $template={{!!new-tiddler-template}}>
  <$tiddler tiddler=<<createTiddler-title>>>
    <$action-listops $tags="-template"/>
    <$action-navigate/>
  </$tiddler>
</$action-createtiddler>
\end

Here I use a tiddler widget to set the currentTiddler variable to the created Tiddler title, that way I dont need to specify the tiddler attribute on the action and navigate widgets (the tiddler attribute is equal to the currentTiddler variable by default). See https://tiddlywiki.com/#ActionCreateTiddlerWidget

[arunnbabu81]

Thank you @telumire . I adopted the second method based on ActionListTop widget.

I made some changes also to the tables as shwon below -

\define exclude-fields() modified created text title tags creator modifier
\define tiddlerCreate()
<$action-createtiddler $basetitle={{!!new-tiddler-title}} $template={{!!new-tiddler-template}}>
  <$tiddler tiddler=<<createTiddler-title>>>
    <$action-listops $tags="-template"/>
    <$action-navigate/>
  </$tiddler>
</$action-createtiddler>
\end

<table>
<tr>
<td>New tiddler <br> <$edit-text field="new-tiddler-title" class="full"/></td> <td> Preview <$checkbox field="show-preview" checked="true"/> <$button actions=<<tiddlerCreate>> >Create tiddler</$button> </td>
</tr>
<tr>
<td><$link to={{!!new-tiddler-template}}>Template</$link> 
<br> 
@@.combobox
<$edit-text field="new-tiddler-template" placeholder="type or select"/>
<$select field="new-tiddler-template">
<$list filter="[[template]tagging[]!is[draft]search:title:whitespace{!!new-tiddler-template}]">
<option value={{!!title}}>{{!!title}}</option>
</$list>
</$select>
@@
<$tiddler tiddler={{!!new-tiddler-template}}>
<$let newFieldNameTiddler=<<qualify "$:/temp/NewFieldName">> newFieldValueTiddler=<<qualify "$:/temp/NewFieldValue">>>
<$transclude tiddler="$:/core/ui/EditTemplate/fields"/>
</$let>
</$tiddler>
</td>
<td>
<$list filter={{!!show-preview}} variable="_">
<$tiddler tiddler={{!!new-tiddler-template}}>
<$transclude mode="block"/>
</$tiddler>
</$list>
</td>
</tr>
</table>

How to add a button to clear the edit text field of the select input ?

Also how to make both columns of the table of equal width ?