Symcon Modul Helfer - eine VS Code Extension für Modul-Entwickler (ehem. Forminator)

Erweiterungen Externe Zusatzsoftware
1

Hallo zusammen, liebe Modulentwickler,

ich hatte ja mal vor längere Zeit ein Diskussion hinsichtlich Modul-Konfiguration angestoßen.
Das Fazit - in kurzen Worten - war: den Komfort möchte man weiterhin nutzen, aber die derzeitige Unterstützung für Programmierer ist verbesserungswürdig (meine Interpretation).

Über dieses Thema denke ich schon sehr lange nach und wollte immer ein Programm schreiben das irgendwie visuell - per klicki bunti - mir ein Formular zusammenbaut. Selbst für eine Minimalversion brauche ich als ungelernter Frontendler/Javascripler wahrscheinlich Wochen oder Monate. Dann kam ich aber auf eine Idee für ein Zwischenlösung, welche es wenigstens ein wenig Schreibarbeit und ständiges Nachschauen in der Doku erleichtert :slight_smile:

Ich habe eine Erweiterung für Visual Studio Code geschrieben, welche zur Unterstützung bei der Erstellung von forms.json Dateien für Symcon Module unterstützt. Sie ist noch relativ „dumm“, aber bietet schon alle Konfigurationselemente die Symcon bietet.

Hier mal ein Screenshot:

image
image587×1121 68.7 KB

Was kann sie bzw. wie funktioniert sie:

  • wenn man die forms.json im Projekt öffnet, wird in der Sidebar die Erweiterung eingeblendet
  • dann setzt man den Cursor an die Stelle wo man das neue Element hin haben möchte (immer hinter einem Komma :slight_smile: )
  • wählt in der Sidebar das Element aus
  • dann erscheint unterhalb der Sidebar ein Formular mit allen Eigenschaften dieses Elements
  • man nimmt die Entsprechenden Einstellungen vor
  • drückt dann den Button „Element einfügen“
  • fertig

Hier noch ein Bild von den Eigenschaften für Label:

image
image354×531 5.52 KB

  • es zeigt alle Eigenschaften so an wie sie von Symcn als Default gesetzt werden
  • bei komplexeren Elementen kann man auswählen ob Beispieldaten eingesetzt werden sollen (z.B. bei List usw.)

image

  • er kopiert alle Attribute in die forms.json (was manchmal nervig ist)
  • aber derzeit muss man dann alles rauslöschen was man nicht braucht (besser als andersherum :smiley: )

Es ist noch nicht die riesen Erleichterung, aber bei neuen Elementen (welche man noch nicht im Formular hat und per copy&paste schnell einbauen kann) nutze ich die Extension dann schon gerne.
Man braucht halt nicht in die Doku und suchen :loveips:

Will eigentlich noch paar Default-Einstellungen anbieten, aber soweit bin ich noch nicht gekommen!

Wer Lust hat es zu testen oder zu nutzen, einfach bei mir oder hier direkt melden!

Schönen Gruß
Heiko

11 „Gefällt mir“
Erstellung eines eigenen Moduls (das erste)
2

Hier! Ich probiere es gerne aus :slight_smile:

paresy

1 „Gefällt mir“
3

Super! Vielen vielen Dank!
Das die Community einspringt, um die Modulentwickler zu unterstützen und das Produkt so weiter pushen, ist super!
Ich werde es sobald ich Zeit habe anschauen.
Gruß
BlackOrca

2 „Gefällt mir“
4

Noch einfacher, ich stelle das hier mal ein …

forminator-1.0.2.zip (87,7 KB)

Einfach auspacken und dann in VS Code installieren:

In VS Code: Öffne die Command Palette (Strg+Shift+P oder F1)

' Englisches VSC
Extensions: Install from VSIX...
' oder in deutsch ...
Erweiterung: Aus VSIX installieren...

Bin auf Feedback gespannt

5

Ahh, falsch in Erinnerung gehabt, NICHT den Cursor hinter ein Komma setzen, sondern immer ans Ende einer vorhandenen Elementdefinition (also hinter einer geschweiften Klammer ‚}‘). Das Komma wird automatisch hinzugefügt!!!

Sorry, für die Verwirrung!

PS: Die Erweiterung taucht als „Symcon Form Helper“ in der Liste der installierten Erweiterungen auf!

6

Gerade mal ein bisschen rumgespielt. Auf jeden Fall ein cooler Start! Ich glaube das ist richtig hilfreich, wenn man mal wieder nicht die genauen Namen der Parameter parat hat oder welche es überhaupt genau gibt. Gerade arbeite ich leider nicht aktiv an Formularen, aber beim nächsten mal werde ich auf jeden Fall mit dem Forminator arbeiten!

1 „Gefällt mir“
7

Ja, genau - so ging es mir auch immer :slight_smile:

Bin gerade dabei es für den Marktplatz fit zu machen - dann geht das mit den Updates auch einfacher!

Gruß Heiko

8

Soo, hab mich nochmal ins Zeug gelegt und die Extension auf den Marketplace gestellt.
Damit ist das Installieren und Updaten nochmal einfacher :smiley:

Hier der Link => Symcon Form Helper - Visual Studio Marketplace

Man kann aber auch einfach in VS Code auf der Erweiterungsseite nach „Forminator“ suchen und dann installieren!

Viel Spaß
Heiko

3 „Gefällt mir“
9

Schreibfehler gefunden?

1 „Gefällt mir“
10

@habre Danke für den Hinweis!

Hat mich nicht losgelassen - kennt mich ja :smiley:

Habe jetzt noch die Einstellungen erweitert und implmentiert …

image
image1008×450 20.3 KB

Funktioniert schon alles - nur noch nicht online!
Frau will das ich Himbeern flücke :frowning: … kommt aber heute Abend!

Damit macht es jetzt schon richtig Spaß damit zu arbeiten!

Heiko

1 „Gefällt mir“
11

Version v1.1.0 ist online

  • NEW: Setting Transfer empty values to include fields with empty values when inserting form elements.
  • NEW: Setting Delete default values to exclude fields with default values when inserting elements.
  • NEW: Setting Overwrite default width to override the default width with a custom value (px or %).
  • NEW: Setting Write mandatory keys to always include specific parameter keys, even if they are empty or match the default (comma-separated list).
  • FIX: Added title and description fields to all configuration options to improve clarity in the VS Code settings UI.

Bis dann
Heiko

6 „Gefällt mir“
12

Hallo Entwicklergemeinde,

das mit dem Feedback üben wir nochmal – aber keine Sorge, ich hab trotzdem etwas Nützliches für euch :grinning_face_with_smiling_eyes:

Es gibt jetzt eine Erweiterung, die ich mir schon oft gewünscht habe – und nun endlich über meine eigene Extension umgesetzt habe.

Was mich immer gestört hat: Man schreibt schön seine caption- oder label-Texte in die form.json, und dann geht das Suchen und Pflegen der Übersetzungen in der locale.json los. Damit ist jetzt Schluss!

Ab sofort kann man einfach einen Text in der form.json markieren, mit der rechten Maustaste das Kontextmenü öffnen und „Übersetzung zur locale.json hinzufügen“ auswählen.
Dann gibt man den übersetzten Text ein – und nach dem Bestätigen mit Enter wird automatisch eine neue Zeile in die locale.json eingefügt. :tada:

[1.2.0] - Feature (2025-07-31)

  • NEW: Add Context menu for translating text values directly from form.json into locale.json

Viel Spaß
Heiko

5 „Gefällt mir“
13

Ups, da ist mir ein kleiner Konfig-Fehler passiert.

Dadurch wurde - jedenfalls bei mir - VS Code immer in Englisch gestartet.

[1.2.1] - Patch (2025-08-05)

  • FIX: Wrong localisation settings in package.json

Gruß Heiko

14

Langsam macht die Extension richtig Spaß :slight_smile:

Heute ein Update mit einem echten Zeit-Killer-Feature :drum: :drum: :drum:

Man kann jetzt über die Befehlspalette (Strg + Shift +P) alle RegisterPropertyXyz Aufrufe aus den Elementen in der form.json erzeugen und diese werden an das Ende der Create()-Methode in der module.php eingetragen. Das geht auch im nachhinein, also wenn man neue Elemente hinzunimmt :slight_smile: Spart richtig viel Zeit!

[1.3.0] - Feature (2025-08-20)

  • NEW: Add Command for insert RegisterProperty calls into Create().

Gruß Heiko

5 „Gefällt mir“
15

Ich habe gerade ein bisschen Formular mit der Erweiterung gebastelt. Es geht schon ziemlich gut. Ein paar Feinheiten aber über die ich gestolpert bin:

  • Der Umgang mit dem Komma ist ein bisschen umständlich. Sobald mein Cursor hinter dem Komma ist, kommt an einer Stelle ein Doppelkomma und an einer anderen fehlt es. Wenn ich in einer Liste das erste Element hinzufügt, dann kommt auch ein Komma, das ich danach entfernen muss.
  • Mich stört das hinzufügen aller Parameter, selbst wenn diese auf Standard gelassen werden. So muss ich immer in einem Zusatzschritt die Parameter wieder rauslöschen
  • Bug: Wenn ich $-Notation in einem Textfeld nutze (typischerweise bei onClick, betrifft aber scheinbar alle), dann wird das verschluckt, siehe Screenshot. Bei name und onClick steht $dd bzw. $id, welche rechts aber einfach fehlen.
    image
    image919×236 13 KB

Weiterhin finde ich die Erweiterung aber sehr cool! Tolle Arbeit, die du da machst!

16

Sehr gut, Feedback - damit kann man arbeiten :smiley:

Ja, gefällt mir auch nicht - muss ich mal schauen!

Dafür gibt es eine Lösung …

image
image1264×450 27.4 KB

Danke fürs finden - schau ich mir auch an!

Danke Heiko

17

Fehler gefunden, komt mit nächtem Update!

Gruß Heiko

1 „Gefällt mir“
18

Und schon gibt es ein Update :slight_smile:

das mit dem Cursor war ganz schön tricky, aber ich hoffe es jetzt verbessert zu haben. Jedenfalls musste ich bei meinen Test nicht mehr so genau auf die Cursor-Position achten :slight_smile:

Man kann jetzt vorne, hinten und in der Mitte vor und nach Komma platzieren usw. …
Wenn er es gar nicht auflösen kann - weil komplett falsch platziert - dann kommt eine Fehlermeldung und es wird nicht einfach wild eingefügt!

@Dr.Niels bin wieder gespannt was Du sagst!

[1.3.1] - Patch (2025-08-27)

  • FIX: Text containing $ characters is now correctly escaped.
  • NEW: Intelligent cursor position management.

Gruß Heiko

1 „Gefällt mir“
19

Klingt gut! Die Option für Standardwerte habe ich direkt angepasst. Ich werde testen, sobald ich wieder an einem Formular arbeite :slight_smile:

20

Aus Forminator wird Symcon Module Helper!!! Ein großes Update steht vor der Tür

Hallo zusammen,

ich freue mich sehr, euch heute mein neuestes Update vorstellen zu dürfen: Fominator heißt ab sofort Symcon Module Helper :champagne:!

Mit diesem Update gibt es unter anderem ein echtes „Kill-Feature“ :rocket:: die LIVE PREVIEW für eure Module. Aber auch viele kleine, feine Anpassungen und Verbesserungen haben Einzug gehalten :loveips:

Die Geschichte der Live Preview

1.Akt: Vorspiel

Alles begann vor etwa zwei, drei Wochen, als ich das StockWidget entwickeln wollte. Bevor es ans eigentliche Modul ging, habe ich erstmal mit reinem HTML getüftelt. Dabei entstand die Idee, eine lokale Darstellung ähnlich einer TileVisu-Kachel zu bauen.

Kurz darauf kam die Idee, die Kachel gleich als iFrame zu realisieren. Dann kam der Wunsch, verschiedene Themes ausprobieren zu können, um die Darstellung zu prüfen – und natürlich unterschiedliche Kachelbreiten und -höhen zu testen.

Und siehe da: die erste kleine Preview war geboren!

2.Akt: Verbesserungen

Bald kam der Wunsch auf, auch Live-Daten bereitzustellen und zu modifizieren.
Nach ein paar Stunden merkte ich, dass ich das HTML-SDK von Symcon nachprogrammiert hatte – also warum nicht gleich das Original nehmen?
Ich kopierte alle notwendigen Ressourcen von meinem Server und experimentierte weiter.
Nach einem ganzen Wochenende hinter dem Computer funktionierte alles perfekt!

3.Akt: Fragen und Absprachen

Eigentlich war ich total happy und wollte das gleich mit der Community teilen.
Dann dachte ich mir: besser erstmal bei Symcon nachfragen, weil Teile ja originale Symcon-Ressourcen waren.

Gesagt, getan: Termin mit @paresy gemacht.
Er fand es super und hatte grundsätzlich kein Problem mit den Ressourcen, aber beim Fachsimpeln kamen Punkte wie:

  • up-to-date halten der Ressourcen
  • Lizenzrechte Dritter (Fonts, Icons)

Daraufhin entwickelten wir die Idee, das als „Spezial“-Modul zu bauen.

4.Akt: Der ganz andere Weg

Die Extension nicht als lokale PHP-Anwendung laufen zu lassen, sondern direkt in Symcon – das war schon verlockend. Aber irgendwie passte das nicht mit meiner Primäridee: lokal entwickeln, aber die Ressourcen vom Livesystem nutzen zusammen.

Dann fiel mir ein, da war doch noch was … meine VSCode Extension!
Kurzer Check mit ChatGPT, ob das technisch machbar ist …
Und siehe da – ES GEHT! Ich bin völlig begeistert. :grinning_face_with_smiling_eyes:

Live Preview in Aktion

vscode-preview
vscode-preview1914×1151 285 KB

Ich liebe diese Extension – was damit schon jetzt an Zeit gespart werden kann, ist einfach unglaublich.

ChangeLog [2.0.0] - Release (2025-08-29)

  • NEW: Renamed the extension to Symcon Module Helper
  • NEW: Updated icons and logos
  • NEW: Added Symcon TileVisu Live Preview (module.html)
  • NEW: Added command and context menu for preview
  • NEW: New settings for Server IP and Server Port to load resources from the Symcon server
  • NEW: Theme management for storing and switching between different live preview designs
  • FIX: Complete refactoring of code and settings
  • FIX: Added warning when inserting elements if no form file is open
  • FIX: Added menu command for inserting RegisterProperty calls
  • FIX: Added missing translations

Sorry @Dr.Niels, Du musst die Settings nochmal einstellen, durch den Umbau hat sich da was geändert!!!

Danke an alle, die das Projekt begleiten, testen und Feedback geben.
Ich freue mich auf eure Rückmeldungen und Ideen, wie wir den Symcon Module Helper noch besser machen können!

Grüße, Euer Pitti der Liebe!

12 „Gefällt mir“