Sample code: Check box widget actions impacting two select widgets

Tips & Tricks
,
#1

This is TW 5.2.3 code, so not taking advantage of any more recent TW features, and no attempt made to reduce the amount of code.

The code follows two screenshots.

image
image1108×268 12.5 KB

image
image1108×268 18.6 KB 

<$let DefaultASCIICharacterSet="ASCII Character Set 1"
         DefaultExtendedCharacterSet="Extended Character Set 1">

<fieldset><legend> Character Set Options </legend>

<!-- 🟠🟠🟠 No Character Sets -->
<details><summary>No Character Set: <$checkbox tiddler=<<currentTiddler>> field="text_character_set" checked="none" unchecked=<<DefaultASCIICharacterSet>> checkactions="""<$action-setfield $tiddler=<<currentTiddler>> $field="graph_character_set" $value="none"/>""" uncheckactions="""<$action-setfield $tiddler=<<currentTiddler>> $field="graph_character_set" $value=<<DefaultExtendedCharacterSet>>/>"""></$checkbox></summary>

Some helpful info about the selection of "No Character Set"

</details>

<div style="width:100%;text-align:center;border-bottom:1px solid #000;line-height:0.1em;margin:10px 0 20px;"><span style="background:#fff;padding:0 10px;">OR</span></div>

<!-- 🟠🟠🟠 ASCII Character Set -->

<details><summary>
ASCII Character Set:
<$list variable="show" filter="[<currentTiddler>get[text_character_set]else[default]!match[none]]">
<$select tiddler=<<currentTiddler>> field="text_character_set" default=<<DefaultASCIICharacterSet>>>
<option><<DefaultASCIICharacterSet>></option>
<option>ASCII Character Set 2</option>
</$select>
</$list>
<$list variable="show" filter="[<currentTiddler>get[text_character_set]else[default]match[none]]">
None
</$list>
</summary>

Some helpful info about ASCII Character Sets.

</details>

<!-- 🟠🟠🟠 Extended Character Set -->

<details><summary> 
Extended Character Set:
<$list variable="show" filter="[<currentTiddler>get[graph_character_set]else[default]!match[none]]">
<$select tiddler=<<currentTiddler>> field="graph_character_set" default=<<DefaultExtendedCharacterSet>>>
<option><<DefaultExtendedCharacterSet>></option>
<option>Extended Character Set 2</option>
</$select>
</$list>
<$list variable="show" filter="[<currentTiddler>get[graph_character_set]else[default]match[none]]">
None
</$list>
</summary>

Some helpful info about Extended Character Sets.

</details>

</fieldset>

</$let>
3 Likes
#2

Charlie, what is the problem?, what needs solving?

#3

If I had a problem, I would have stated it, I think.

Nah, no problem. Just sample code being shared.

1 Like
#4

I did recognize that this was mostly a demo, and was surprised that you – who has managed to demonstrate so many novel (at least to me) techniques – were promoting this. I think I’m missing the point. Can you explain a bit more what you find interesting in this?

What I did find interesting is…

…using Unicode characters in the comments about ASCII-related code! :wink:

#5

Pherhaps just spell out what it does or achives if for no other reason than it comes up in searches later.

#6

Code samples for newbies are always a good thing. User interface of any kind, even if not something anybody would use, can still be useful to trigger some novel ideas.

I’m not sure why you’re being critical or dismissive/demeaning of a contribution. Why would you publicly do such a thing to a member of the community sharing something in case it might be useful to anybody else?

#7

I’m sorry, I don’t understand what you are asking for.

I’ve contributed something I thought might be useful, and I contributed that within my abilities.

Admins: feel free to add whatever you think would be useful.

1 Like
#8

I think you missed the point:

I don’t understand. I’m not criticizing, just looking for clarification.

What is it you’re demonstrating here? Maybe I just got distracted by thinking I was going to learn something about character sets.

Is the point that you use a select widget to set a field? That you read from that field to choose values in two other fields? Something else?

#9

Having a bit closer look at the code, I think it’s a novel way to create a “form-like” input element. I have not seen anything like this one here at Talk.

It uses the DETAILS and SUMMARY HTML elements to show additional info about the TW checkbox-widget and the select-widget.

The checkbox also has the possibility to modify the behaviour of the select-inputs.

I think that’s basically it. – As far as I do understand it.

@Charlie_Veniot Thanks for sharing.

have fun!
Mario
PS: I did more the thread into the Tips&Tricks category, because I thought it belongs there.

#10

That was indeed the primary point of the post, as per the OP title: " Sample code: Check box widget actions impacting two select widgets"

Any other things in the code that might be of interest to anybody, that’s pretty cool if the code provides secondary bonuses.

#11

The point of the code was as per the title of the OP: a check box widget that impacts select widgets.

The particular “domain” is irrelevant. Substitute the labels and the data with whatever would be meaningful to you for a scenario of a check box widget having these actions:

  • when checked, hide the select widgets, set the fields related to those select widgets as “None” (or whatever makes sense for your scenario), and show “None” (or whatever makes sense to you) where the select widgets would normally appear

  • when unchecked, show the select widgets (instead of the “None” text), set the related fields to their default values

As per the screenshots.

#12

Yeah, this has been a (cognitive overload) case of “no good deed goes unpunished”.

Coherent and concise communication is a challenge for me, and being reminded that I’m no good at it makes for painful experiences.

#13

I really did not understand what it was you’re demoing. I sort of understand now.

(The rest was going to be a direct message, but you’re not accepting them.)

But I’m still trying to understand completely. But feel free to ignore this if you chose; I won’t be offended.

I’m wondering if the point you’re demonstrating is related to something I did last summer. It might not be. Mario seems to also be focused on the details widget. But is the main point to hide-show other controls based on an initial control?

I did something like that, using both radio buttons (in the outer shell) and checkboxes (inside Select Ages) in this: Create Query.json (6.1 KB) (self-contained, and should run on tiddlywiki.com or other recent wikis). Is this a similar idea? Or are you trying to demonstrate something different?

My form was part of a never completed and temporarily abandoned wiki related to last November’s municipal elections in my town. I will probably resurrect it for this November’s national elections. I’m part of the leadership of a local political party, and the idea was to quickly be able to select voters according to the criteria you see there. The goal was to be able to add to some stock queries we had (All Democratic Women, All Voters Under 40, Men over 60 on Boston Hill Rd or Wales Rd, etc.) custom ones that you could simply run against the data and/or save for others to use. This part is just the criteria selection. It should be obvious enough how to use it. (I don’t bother trying to integrate the field-selector for streets; that used a plug-in that was never quite what I wanted.)

So is this similar to what you’re demonstrating or am I still missing the point?

#14

Yeah, I’ve got TiddlyTalk’s private messaging thing turned off because it is too distracting and makes TiddlyTalk that much more challenging for me to use.

I tried my best to explain the point of the sample code in this reply. If that isn’t clear enough, I don’t know how else to explain it.

1 Like