Project

General

Profile

Actions

Feature #17972

open

Javascript in Forms for Dynamic Update (among others)

Added by Benjamin Baer 4 months ago. Updated 4 months ago.

Status:
In Progress
Priority:
Normal
Assignee:
Carsten Rose
Target version:
Start date:
22.02.2024
Due date:
% Done:

0%

Estimated time:
Discuss:
Prio Planung:
No
Vote:

Description

  • New textfield in form for javascript per formelement
  • QFQ Variables inside the javascript get replaced (ex: {{id:R0}} = 25, {{SELECT name FROM person WHERE vorname = "Benjamin"}} = Baer)
  • New variables for references to make dynamic update possible. Bsp: Form Element: name%d, im Javascript block ref returns a css selector: {{ref:name}} = [data-reference="name%d"]
  • All Javascript text get added after the form
<form class="qfq-form">
 ...
</form>
<script>
[insert here]
</script>

Beispiel script im form:

// document.querySelectorAll("{{&name%d:V}}") # no jquery
if($("{{&name%d}}").value === "{{SELECT name FROM person WHERE vorname = "Benjamin"}}") {
    $("{{&matrikelnr}}").hide()
}

Beispiel Ausgabe:

// document.querySelectorAll("[data-reference='name%d']") # no jquery
if($("[data-reference='name%d']").value === "Baer") {
    $("[data-reference='matrikelnr']").hide()
}

Anmerkung:

  • Fuer die Referenzvariable war urspruenglich {{ref:<name>}} vereinbart und nichts gesagt zum Store.
  • Das Zeichen ':' hinter 'ref' kollidiert mit dem Delimiter fuer Store, Escape, Action ... - nicht gut.
  • Neu: Anstelle von {{ref:... wird vorgeschlagen (und ist implementiert) {{&<name>:V}}
  • Das '&' ist in C als Adressoperator bekannt - das passt hier ziemlich gut.
  • Der STORE_VAR wurde gewaehlt weil bereits andere System Angaben wie RANDOM, MIMETYPE usw. enthaelt. Der STORE_FORM ist mehr fuer Content gedacht, der STORE_RECORD passt hier gar nicht.
  • Mit dem '&' am Anfang sollten Kollisionen sehr unwahrscheinlich sein.
Actions #1

Updated by Carsten Rose 4 months ago

  • Description updated (diff)
Actions #2

Updated by Carsten Rose 4 months ago

  • Tracker changed from Support to Feature
Actions #3

Updated by Carsten Rose 4 months ago

  • Status changed from New to In Progress
Actions #4

Updated by Carsten Rose 4 months ago

  • Description updated (diff)
Actions #5

Updated by Carsten Rose 4 months ago

  • Description updated (diff)
Actions #6

Updated by Carsten Rose 4 months ago

Offen:

  • Reference fuer TG zum laufen bringen
  • Dokumentation inkl. Beispiel.
Actions #7

Updated by Benjamin Baer 4 months ago

Feature Request:
Eine Variabel um die Form Id zu bekommen, damit man die selects innerhalb des forms eingrenzen kann. {{formId:V}}?

Probleme:
  • ClientJS in einem templategroup formElement wurde nicht getriggered (kann man testen mit console.log("Hey"))
  • Mehrere ClientJS werden concatinated ohne ein newline dazwischen (nicht super schlimm, muss man beachten das man mit ; beendet und nicht wie im modernen js einfach mit linebreak, aber falls du das aendern kannst)
  • {{&formelement%d:V}} und {{&formelemnt:V}} wird beides nicht aufgeloest bei einem templategroup formelement

Koenenn wir uns nach UPlan deadline ansehen, das jetzige funktioniert schon gut genug.

Actions

Also available in: Atom PDF