Widget for entering an integer input

#1

Hi everybody,

I was wondering if anybody already implemented a TW widget where the user can enter an integer by typing or by clicking on the two arrow buttons to increment/decrement the value? For example like the ones shown in this SO question.

Couldn’t find this in links.tiddlywiki.org, but maybe I didn’t use the right search terms.

Thanks!
Erwan

#2

It’s already supported by the TWCore $edit-text widget.
Just use type="number" param.

1 Like
#3

Oh ok, I didn’t realize. Thank you Eric!

#4

I do wish there’s more support for number fields beyond simply being able to specify type="number" in EditTextWidget.

How about adding support for numeric min, max and step attributes in EditTextWidget?

#5

see Add HTML5 attributes support to the EditText widget · Issue #4230 · Jermolene/TiddlyWiki5 · GitHub

#6

Yeah I am aware of it. It has been open since 2019 and I wish I knew enough of the internals of TW to help because on the surface it seems like a very simple change to make.

#7

I understand there would be value allowing the edit-text widget to pass through the additional parameters that can be applied to type=“number”,

<$edit-text type=number field=number-field/>

Something similar could be argued for any or all html input types below, but it seems to me in this case rather than continue to modify the edit-text widget we may be able to develop an <$input widget and provide equivalent to the onclick trigger and javascript to service all inputs, adjusting to accommodate tiddlywiki’s mechanisms. These can be summarised as;

  • Setting a tiddler and/or field to the value(s)
  • Reading the current value from a tiddler and/or field
  • Triggering appropriate actions
  • Possibly providing some “canned” actions.
  • Ideally but unlikely, being able to set a variable or other that can be used at least inside the input widget.

TiddlyWiki 5.3.x

  • I believe with TW 5.3.x there may be more opportunities with a generic input widget to then spawn new widgets that handle specific input types, and subsequently “call” the input widget.
  • There is substantial features and checking already available in HTML that if we can find a way to do this, we can generate low code solutions, perhaps even rewrite some existing widgets.

However, much can already be done.

  • Please note with the current edit-text widget you can partially leverage these using the type parameter, then using the inputActions and the variable actionValue, you could trigger a data evaluation process, and modify the input field accordingly, to generate the equivalent of min , max if not step, however a step fuction can be emulated with buttons/listops/filter maths.
  • Basically I would argue everything you could Imagin is already possible, its just that it is just more complex than it needs to be.
    <input type="button">
    <input type="checkbox">
    <input type="color">
    <input type="date">
    <input type="datetime-local">
    <input type="email">
    <input type="file">
    <input type="hidden">
    <input type="image">
    <input type="month">
    <input type="number">
    <input type="password">
    <input type="radio">
    <input type="range">
    <input type="reset">
    <input type="search">
    <input type="submit">
    <input type="tel">
    <input type="text">
    <input type="time">
    <input type="url">
    <input type="week">

If you paste this into a tiddler you will see the html; is generated the only problem is getting the input into tiddlers and fields.

  • Try this in the edit-text widget and many work well enough, except for handing “some” of the input attributes
  • It does not help, that we do not document the working cases in TiddlyWiki.com

In html the typical approach after accepting inputs, is the submission of a form. The values entered are I understand stored in the DOM (Document Object Model), but since the DOM is how tiddlywiki’s underlying mechanism works, never the two will communicate.

  • It seems to my years of IT Experience, but admittedly limited internet developer skills, that a way to process the html form with a tiddlywiki action like the HTML submit we could perform an action to populate tiddlywiki fields or variables from this overlaying DOM.
#8

LineOneTwo has done some work in the area of forms that may be relevant.

A while back I wrote a $form widget that can be wrapped around HTML input elements and the form can be saved to JSON or to a tiddler with the individual values in fields, with an optional filter validation and conversion step. Data attributes on the input elements map the value of an input to a field or JSON property. It works really well but my instinct is that it would need something akin to a wizard to help users easily create and configure new forms. As a result I have been slowly exploring a GUI mechanism for adding fields to forms but haven’t had much motivation to spend much time on it.

#9

That sounds great @saqimtiaz perhaps you don’t need to worry too much about

Especially if internally, it is just html, because documentation, tools and code examples can be found everywhere, for html forms. In fact I expect its easy in some of the LLM’s like ChatGPT to ask for a form.

  • Even with say a step to make names unique in a tiddler, or a setting a specific class, it should be trivial.

Although your idea for a forms wizard would be excellent.

[Edited] I posted am example form generated by ChatGPT on this unrelated site sans-CSS/styles HTML Form exChatGPT