diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/00 Start hier - David.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/00 Start hier - David.md new file mode 100644 index 00000000..ca8fea47 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/00 Start hier - David.md @@ -0,0 +1,70 @@ +--- +kind: start +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +recipient: David +status: Review-ready +stand: 2026-07-09 +--- + +# Start hier - D-FORM David Review + +Das ist der Startpunkt fuer den weitergegebenen D-FORM-Ordner. + +## Schnell lesen + +1. [[D-FORM David Uebergabe 2026-07-09]] +2. [[Simple Builder Neuausrichtung]] +3. [[Subframe Bau Log]] +4. [[WF-D-FORM Form Builder]] + +## Kurzfassung + +D-FORM ist auf Builder + oeffentliches Formular begrenzt. Der empfohlene Hauptfluss ist jetzt der einfache Google-Forms-nahe Editor S02, weil der alte Advanced-Canvas fuer normale Handwerksbetriebe zu schwer wirkt. + +Nach Davids Feedback wurde die Lead-Zuweisung ergaenzt: + +- S02 zeigt eine ruhige Lead-Card. +- `Felder zuweisen` fuehrt nach S02L. +- S02L ordnet Formularfragen per Dropdown Lead-Feldern zu. +- E05 zeigt fehlende oder unmoegliche Zuweisungen. +- Advanced-Canvas und D07-D09 bleiben Referenz, aber nicht Hauptfluss. + +## Review-Reihenfolge + +1. [[Screens/01 S00 Formulare verwalten]] +2. [[Screens/02 E01 S00 Keine Formulare]] +3. [[Screens/03 E02 S00 Keine Treffer]] +4. [[Screens/04 S01 Formularart auswaehlen]] +5. [[Screens/05 S02 Einfacher Fragen Editor]] +6. [[Screens/05b S02L Lead Felder zuweisen]] +7. [[Screens/05c E05 S02 Lead Zuweisung pruefen]] +8. [[Screens/06 S03 Formular Design]] +9. [[Screens/07 S04 Oeffentliches Formular]] +10. [[Screens/08 V01 Public Erfolg oder Redirect]] +11. [[Screens/09 V02 Public Formular nicht verfuegbar]] +12. [[Screens/10 V03 Public Captcha oder Submit Fehler]] +13. [[Screens/11 S05 Antworten Tabelle]] +14. [[Screens/12 E03 S05 Keine Antworten]] +15. [[Screens/13 E04 S05 Export Fehler]] + +Danach nur bei Bedarf: + +- [[Screens/80 S01B Gefuehrter Fragen Editor]] +- [[Screens/81 S01C Website Formular Editor]] +- [[Screens/82 S01D Umfrage Editor]] +- [[Screens/83 S01E Internes Formular Editor]] +- [[Screens/90 ADV Form-Builder Canvas]] +- [[Screens/90b ADV Form-Builder Canvas 2]] +- [[Screens/91 D07 Logic Regel Detail]] +- [[Screens/92 D08 Action Detail mit Mapping]] +- [[Screens/93 D09 Publish Blocker Summary]] + +## Bitte pruefen + +- Ist S02 als Haupteditor die richtige Richtung? +- Reicht S02L fuer die einfache Lead-Feldzuweisung? +- Passt E05 fuer fehlende oder unmoegliche Zuweisungen? +- Reichen S03, S04/Public States und S05 fuer D-FORM? +- Sollen M01-M04 spaeter als echte Dialog-Screens gebaut werden oder reicht die Dokumentation? diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/D-FORM David Uebergabe 2026-07-09.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/D-FORM David Uebergabe 2026-07-09.md new file mode 100644 index 00000000..f537213f --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/D-FORM David Uebergabe 2026-07-09.md @@ -0,0 +1,282 @@ +--- +kind: handoff +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +recipient: David +status: Review-ready / Subframe Draft gebaut +stand: 2026-07-09 +--- + +# D-FORM - Uebergabe fuer David + +Kurzfassung: D-FORM ist fachlich auf Builder + oeffentliches Formular begrenzt. Der alte grosse Form-Builder-Canvas bleibt als Advanced-/Referenzrichtung erhalten, aber die empfohlene Hauptvariante ist jetzt ein einfacher Google-Forms-naher Editor fuer Handwerksbetriebe. Der Subframe-Draft ist gebaut und die wichtigsten Lead-Zuweisungszustaende wurden nach Davids Feedback ergaenzt. + +## 1. Was D-FORM umfasst + +D-FORM umfasst: + +- Formular-Zentrale zum Finden, Filtern und Oeffnen von Formularen. +- Formularart auswaehlen. +- Einfacher Fragen-Editor fuer alle Formulararten. +- Lead-spezifische Feldzuweisung. +- Design-Tab fuer Logo, Farbe und Public-Vorschau. +- Oeffentliches Formular fuer Kunden/Interessenten. +- Public States: Erfolg, nicht verfuegbar, Captcha-/Submit-Fehler. +- Antworten-Tab als einfache Tabelle mit Export. +- Empty/Error States fuer Verwaltung und Antworten. + +D-FORM umfasst bewusst nicht: + +- Booking. +- Kalender. +- Signatur. +- HR. +- Vollstaendige Submissions-Verwaltung. +- Vollstaendige CRM-/Automation-Konfiguration. +- Komplexe Multi-Step-Forms, Scoring, Repeater oder If/Else-Baeume. + +## 2. Wichtigste Arbeitsentscheidung + +Die erste Builder-Richtung war fachlich vollstaendig, aber fuer normale Handwerksbetriebe zu schwer. Deshalb wurde der Hauptfluss vereinfacht: + +| Alt | Neu | +|---|---| +| Palette, Canvas und Inspector dauerhaft sichtbar | Ruhiger Fragen-Editor mit einzelnen Fragekarten | +| Viele Modi gleichzeitig | Nur das zeigen, was fuer den naechsten Schritt wichtig ist | +| Logic und Actions wirken wie Profi-Module | Logic als `Bedingung`, Actions als `Nach Absenden` | +| Technische Feldtypen | Verstaendliche Fragetypen | +| Lead-Mapping wirkt wie Admin-Konfiguration | Lead-Felder werden einfach per Dropdown zugewiesen | + +Empfehlung: S02 ist der Haupteditor. ADV-S01 bleibt nur Referenz fuer spaetere Advanced-/Power-User-Funktionen. + +## 3. Aktueller Hauptfluss + +```text +S00 Formulare verwalten +-> Neues Formular +-> S01 Formularart auswaehlen +-> S02 Einfacher Fragen Editor +-> bei Lead-Formular: S02L Lead Felder zuweisen +-> bei fehlender/unmoeglicher Lead-Zuweisung: E05 +-> S03 Formular Design +-> S04 Oeffentliches Formular +-> Public States V01/V02/V03 +-> S05 Antworten Tabelle +``` + +## 4. Gebaute Hauptscreens + +| Nr. | ID | Screen | Zweck | Subframe | +|---|---|---|---|---| +| 01 | S00 | Formulare verwalten | Erste Seite fuer Suche, Filter, Status und Bearbeiten | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit | +| 02 | E01 | S00 Keine Formulare | Empty State, wenn noch nichts existiert | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit | +| 03 | E02 | S00 Keine Treffer | Empty State fuer Suche/Filter | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit | +| 04 | S01 | Formularart auswaehlen | Auswahl: Website/Extern, Lead, Fragebogen/Umfrage, Intern | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit | +| 05 | S02 | Einfacher Fragen Editor | Haupteditor fuer Fragen, Optionen, Pflichtfelder, Bedingung, Lead-Hinweis | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit | +| 05b | S02L | Lead Felder zuweisen | Lead-Felder per Dropdown Formularfragen zuordnen | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit | +| 05c | E05 | S02 Lead Zuweisung pruefen | Fehlerzustand, wenn Lead-Zuweisung fehlt oder nicht passt | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit | +| 06 | S03 | Formular Design | Logo, Farbe, Breite, Datenschutz-Hinweis, Vorschau | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit | +| 07 | S04 | Oeffentliches Formular | Kundensicht ohne App-Shell | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit | +| 08 | V01 | Public Erfolg oder Redirect | Danke-/Erfolgszustand nach Absenden | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit | +| 09 | V02 | Public Formular nicht verfuegbar | Public Blocker statt rohem Fehler | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit | +| 10 | V03 | Public Captcha oder Submit Fehler | Werte bleiben erhalten, Fehler wird verstaendlich gezeigt | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit | +| 11 | S05 | Antworten Tabelle | Excel-nahe Antwortenansicht mit Zeitraum und Export | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit | +| 12 | E03 | S05 Keine Antworten | Empty State fuer Antworten-Tab | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit | +| 13 | E04 | S05 Export Fehler | Fehlerzustand fuer Excel/CSV-Export | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit | + +## 5. Spaetere Varianten und Referenzseiten + +Diese Seiten sind gebaut oder dokumentiert, aber nicht Teil des aktuellen Hauptflusses: + +| Nr. | ID | Screen | Status | Subframe | +|---|---|---|---|---| +| 80 | S01B | Gefuehrter Fragen Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit | +| 81 | S01C | Website Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit | +| 82 | S01D | Umfrage Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit | +| 83 | S01E | Internes Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit | +| 90 | ADV-S01 | Form-Builder Canvas | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit | +| 90b | ADV-S01-2 | Form-Builder Canvas 2 | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit | +| 91 | D07 | Logic Regel Detail | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit | +| 92 | D08 | Action Detail mit Mapping | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit | +| 93 | D09 | Publish Blocker Summary | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit | + +## 6. Formulararten + +| Formularart | Fuer wen | Verhalten | +|---|---|---| +| Website-/Externes Formular | Kunden oder Interessenten per Link/Website | Public Link, mCaptcha, Datenschutz-Hinweis | +| Lead-Formular | Neue Kundenanfragen fuer Vertrieb/Pipeline | Kontakt-/Anfragefelder werden vorgeschlagen, Lead-Erstellung ist aktiv, `Felder zuweisen` sichtbar | +| Fragebogen / Umfrage | Feedback, Zufriedenheit, kurze Abfragen | Antworten werden gesammelt, keine Lead-Pipeline | +| Internes Formular | Mitarbeiter, z. B. Material/Rueckruf/Schaden | Interne Ablage, kein Public-Marketing-Kontext | + +## 7. Fragetypen im aktuellen S02 + +Im Hauptdropdown bleiben aktuell nur: + +- Kurzantwort +- Absatz +- Multiple Choice +- Mehrfachauswahl +- Drop-down +- Datei oder Bild hochladen +- Datum +- Uhrzeit + +Nicht im aktuellen Hauptdropdown: + +- Lineare Skala +- Bewertung +- Multiple-Choice-Raster +- Kaestchenraster + +Diese Typen koennen spaeter wieder diskutiert werden, werden aber jetzt bewusst nicht gebaut. + +## 8. Lead-Zuweisung nach Davids Feedback + +Davids Feedback: Ein reiner Hinweis `Lead-Verknuepfung aktiv` reicht nicht. Nutzer sollen sehen koennen, welche Formularfragen in welche Lead-Felder laufen. + +Umsetzung: + +- S02 bleibt Haupteditor. +- Bei Lead-Formularen zeigt S02 eine ruhige blaue Lead-Card. +- Die blaue Lead-Card nutzt jetzt denselben Layout-Aufbau wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts. +- `Felder zuweisen` fuehrt zu S02L. +- S02L zeigt die Lead-Zuweisung im gleichen Look wie S02. +- Jede Zuweisung nutzt eine Dropdown-Vorlage. +- Nicht passende Felder werden disabled oder mit Begruendung markiert. +- E05 deckt fehlende oder unmoegliche Zuweisungen ab. +- Lead kann im bestehenden Formular deaktiviert werden; es muss nicht direkt ein neues Formular erstellt werden. + +Wichtige Lead-Felder: + +| Lead-Feld | Erwartung | +|---|---| +| Name | Pflicht, normalerweise Kurzantwort | +| Kontakt | Pflicht: Telefon, E-Mail oder Kombifeld | +| Beschreibung | Pflicht, Kurzantwort oder Absatz | +| Bereich | Optional, als Tag/Kategorie nutzbar | +| Datei / Bild | Optional, nur Datei-/Upload-Fragen | +| Pipeline | Pflicht, Ziel fuer neue Leads | +| Quelle | Automatisch `Formular` | + +## 9. Logic, Actions und Publish + +Fuer den einfachen Haupteditor: + +- Logic wird als `Bedingung` direkt an der Frage gezeigt. +- Actions werden im Bereich `Nach Absenden` gezeigt. +- Bei Lead-Formularen ist `Lead anlegen` als einfache Card aktiv. +- Publish bleibt im Editor. +- Harte Blocker zeigen einen Banner/Popover mit Sprungzielen. +- Unpublish braucht einen Confirm-Dialog, weil der Public-Link danach nicht mehr erreichbar ist. + +Fuer Advanced/Referenz: + +- D07 zeigt Logic-Regel-Detail. +- D08 zeigt Action-Detail mit Mapping. +- D09 zeigt Publish-Blocker-Summary. +- D01/D02/D03/D06/D10 und M01-M04 sind in Markdown dokumentiert, aber nicht zwingend als Subframe-Hauptscreen noetig. + +## 10. Public Formular + +S04 ist die Sicht fuer Kunden/Interessenten, nicht fuer interne Mitarbeiter. + +Grundregeln: + +- Keine App-Shell. +- Keine Sidebar. +- Keine internen Begriffe. +- Tenant-Logo/Farbe sichtbar. +- Felder klar, ruhig und mobil nutzbar. +- mCaptcha fuer externe Formulare. +- Datenschutz-Checkbox. +- Datei/Bild-Upload nutzt volle Formularbreite. +- Bei Fehlern bleiben Eingaben erhalten. + +Public States: + +| State | Zweck | +|---|---| +| V01 | Anfrage erfolgreich gesendet oder Redirect | +| V02 | Formular nicht verfuegbar, geschlossen oder Limit erreicht | +| V03 | Captcha-, Upload- oder Submit-Fehler mit erhaltenen Eingaben | + +## 11. Antworten-Tab + +S05 ist bewusst schlicht: + +- Excel-/Tabellennahe Ansicht. +- Suche. +- Zeitraumfilter: letzte 7 Tage, letzter Monat, letzte 3 Monate, letztes Jahr, eigener Zeitraum. +- Excel/CSV-Export. +- Keine Kennzahl-Kacheln, weil die Ansicht sonst zu schwer wirkt. +- Kein `Link teilen`-Button; Teilen gehoert in den Veroeffentlichen-/Public-Link-Kontext. + +## 12. Noch offen / bitte pruefen + +Aus meiner Sicht ist fuer den aktuellen D-FORM-Plan inhaltlich nichts Grosses mehr offen, ausser Review und Feinschliff in Subframe. + +Bitte David pruefen lassen: + +- Ist S02 als Haupteditor statt Advanced-Canvas die richtige Richtung fuer normale Handwerksbetriebe? +- Reicht S02L als einfache Lead-Feldzuweisung, oder braucht David noch ein zweites Detail-/Fehlerbeispiel? +- Passt E05 fuer fehlende/unmoegliche Lead-Zuweisungen? +- Sind S03 Design und S05 Antworten tief genug fuer D-FORM, ohne in andere Tickets abzurutschen? +- Sind Public States S04/V01/V02/V03 vollstaendig genug? +- Duerfen S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 als Referenz liegen bleiben? +- Muessen M01-M04 als echte Dialog-Screens gebaut werden, oder reicht Dokumentation? +- In Subframe bitte bei S02L/E05 nochmal visuell pruefen, ob das richtige Default Page Layout gesetzt ist. + +## 13. Empfohlene Review-Reihenfolge in Subframe + +1. S00 Formulare verwalten +2. E01 S00 Keine Formulare +3. E02 S00 Keine Treffer +4. S01 Formularart auswaehlen +5. S02 Einfacher Fragen Editor +6. S02L Lead Felder zuweisen +7. E05 S02 Lead Zuweisung pruefen +8. S03 Formular Design +9. S04 Oeffentliches Formular +10. V01 Public Erfolg oder Redirect +11. V02 Public Formular nicht verfuegbar +12. V03 Public Captcha oder Submit Fehler +13. S05 Antworten Tabelle +14. E03 S05 Keine Antworten +15. E04 S05 Export Fehler + +Danach nur bei Bedarf: + +16. S01B Gefuehrter Fragen Editor +17. S01C Website Formular Editor +18. S01D Umfrage Editor +19. S01E Internes Formular Editor +20. ADV-S01 Form-Builder Canvas +21. ADV-S01-2 Form-Builder Canvas 2 +22. D07 Logic Regel Detail +23. D08 Action Detail mit Mapping +24. D09 Publish Blocker Summary + +## 14. Lokale Detaildateien + +Wichtige Detailnotizen im Paket: + +- `WF-D-FORM Form Builder.md` +- `Simple Builder Neuausrichtung.md` +- `David Review Checkliste.md` +- `Subframe Bau Log.md` +- `Subframe Bauplan.md` +- `Screens/01 S00 Formulare verwalten.md` +- `Screens/04 S01 Formularart auswaehlen.md` +- `Screens/05 S02 Einfacher Fragen Editor.md` +- `Screens/05b S02L Lead Felder zuweisen.md` +- `Screens/05c E05 S02 Lead Zuweisung pruefen.md` +- `Screens/06 S03 Formular Design.md` +- `Screens/07 S04 Oeffentliches Formular.md` +- `Screens/11 S05 Antworten Tabelle.md` +- `Screens/D10 Builder Interaktionsfaelle.md` + +## 15. Kurztext zum Mitschicken + +Hey David, hier ist die aufgeraeumte D-FORM-Uebergabe. Ich habe den Builder nach deinem Feedback nochmal vereinfacht und die Lead-Zuweisung ergaenzt: S02 bleibt der einfache Google-Forms-nahe Haupteditor, S02L zeigt die Lead-Felder-Zuweisung per Dropdown, E05 deckt fehlende/unmoegliche Zuweisungen ab. Advanced-Canvas und D07-D09 bleiben als Referenz, aber nicht als Hauptfluss. Kannst du bitte einmal pruefen, ob die Richtung und die offenen Punkte fuer dich passen? diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/David Review Checkliste.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/David Review Checkliste.md new file mode 100644 index 00000000..a2617276 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/David Review Checkliste.md @@ -0,0 +1,182 @@ +--- +kind: review-checklist +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +status: Review-ready / Subframe Draft gebaut +stand: 2026-07-09 +--- + +# David Review Checkliste - D-FORM + +Ziel: David kann schnell pruefen, ob der D-FORM-Zuschnitt, die wichtigsten UX-Entscheidungen und der Subframe-Draft stimmen. + +Startpunkt fuer die weitergebbare Version: [[00 Start hier - David]] und [[D-FORM David Uebergabe 2026-07-09]]. + +## 0. Review-Ergebnis 2026-07-06 + +David hat den groben fachlichen Scope als passend bewertet. Die Empfehlungen aus dieser Checkliste werden damit als Arbeitsentscheidung uebernommen. + +Wichtige Nacharbeit aus dem Review: Beim alten Advanced-S01 fehlte die Interaktionslogik auf der Ebene "was passiert nach Klick?". Diese Nacharbeit ist in [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] ergaenzt: Feldbearbeitung, Feldaktionen, Logic, Actions, Sharing, Preview, Settings, Publish und Unpublish sind jetzt nach Inline/Inspector, Menue, Panel, Popover oder Confirm-Dialog sortiert. + +Subframe ist als Draft gebaut und verlinkt. Der aktuelle Hauptfluss ist S00, E01/E02, S01, S02, S03, S04/V01/V02/V03, S05 und E03/E04. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 bleiben spaetere Varianten bzw. Referenz. + +Aktuelle Arbeitsentscheidung: Fuer normale Handwerksbetriebe wird S02 als einfache Google-Forms-nahe Richtung empfohlen. Alle Formulararten starten in S02 mit anderer Vorlage/Startfragen. Der alte Profi-Canvas bleibt als Advanced-/Referenzscreen, nicht als erste Nutzerfuehrung. Als Kunden-/Handwerker-Wording wird `Bereich` statt `Gewerk` verwendet. + +## 0b. David-Feedback Lead-Zuweisung + +Neue Rueckmeldung: Fuer Lead-Formulare reicht ein reiner Hinweis `Lead-Verknuepfung aktiv` nicht aus. Nutzer sollen sehen, welche Formularfelder in welche Lead-Felder laufen. + +Entscheidung: + +- S02 bleibt der Haupteditor. +- Logic kommt als einfache `Bedingung` direkt an die Frage. +- Actions kommen als `Nach Absenden`-Bereich in den Screen. +- Bei Lead-Formularen ist `Lead anlegen` aktiv. +- `Felder zuweisen` wird als eigener S02-Zustand dokumentiert: [[Screens/05b S02L Lead Felder zuweisen]]. +- Wenn eine Zuweisung fehlt oder nicht moeglich ist, wird optional [[Screens/05c E05 S02 Lead Zuweisung pruefen]] gebaut. +- Dropdown-Vorlage verwenden; keine eigene Mapping-Tabellenoptik. +- Nicht passende Felder werden disabled oder mit Fehlerhinweis markiert. + +## 1. Quellen-Abgrenzung + +Ergebnis: Die Abgrenzung `D-FORM = Form-Builder-Canvas + oeffentliches Formular` stimmt. + +| Quelle | Aussage | Konsequenz fuer D-FORM | +|---|---|---| +| `ticket-docs/D-FORM.md` | D-FORM deckt nur Form-Builder-Canvas und oeffentliches Formular ab. Booking/Kalender gehen an `D-BOOK`; Forms-Liste, Submissions und Signatur sind Compose/andere Tickets. | D-FORM bleibt bei Builder und Public: S02 einfacher Editor plus S04/Public-Varianten; ADV-S01 nur als Referenz. | +| `designer-briefs/P16-kalender-booking-forms-signatur.md` | P16 ist gebuendelt, aber soll in Gruppen getrennt werden: Kalender-Sync, Booking, Form-Builder, Signatur. | Nicht alle P16-Screens gehoeren in D-FORM. | +| `SCREEN-MAP.md` Paragraph 3 | Listet Form-Builder-Canvas, oeffentliches Formular und Submissions im Umfeld. Submissions ist A2/A3-Compose, Builder/Public sind Bespoke. | Submissions nicht als D-FORM-Bespoke bauen. | +| `D-BOOK.md` | D-BOOK deckt Booking-Page und Kalender-View ab; verweist Form-Builder/Public Form zurueck auf D-FORM. | Booking und Kalender bleiben raus. | +| `D-HR.md` | HR ist Compose und bettet den M05-Form-Renderer aus P16 ein. | HR nutzt D-FORM-Ergebnis spaeter, ist aber kein D-FORM-Screen. | +| `M05-form-builder.md` | M05 enthaelt auch Submissions, Templates, Actions, Permissions und Phase-2-Themen. | D-FORM darf diese Themen beruecksichtigen, aber nicht alle als eigene Screens bauen. | + +## 2. Scope-Entscheidung + +| Punkt | Empfehlung | David-Entscheidung | +|---|---|---| +| D-FORM umfasst den Builder; aktuell S02 als Haupteditor und ADV-S01 als Advanced-Referenz. | Ja. | angenommen | +| D-FORM umfasst S04 Oeffentliches Formular. | Ja. | angenommen | +| V01 Public Erfolg/Redirect wird als eigene Variante gebaut. | Ja, weil copy- und vertrauenskritisch. | angenommen | +| V02 Public Formular nicht verfuegbar wird als eigene Variante gebaut. | Ja, weil externer Nutzer blockiert ist. | angenommen | +| V03 Public Captcha/Submit-Fehler wird als eigene Variante gebaut. | Ja, weil Public-Vertrauen wichtig ist. | angenommen | +| Vollstaendige Forms-Liste bleibt raus. | Ja, D2-Compose / eigenes Paket. S03 ist nur eine schlanke Formular-Zentrale fuer D-FORM. | angenommen / ergaenzt | +| Vollstaendige Submissions bleibt raus. | Ja, A2/A3-Compose / eigenes Paket. S05 ist nur der einfache Antworten-Tab fuer ein Formular. | angenommen / ergaenzt | +| Booking/Kalender bleibt raus. | Ja, `D-BOOK`. | angenommen | +| Signatur bleibt raus. | Ja, eigenes Signatur-/D-REST-Paket. | angenommen | +| HR bleibt raus. | Ja, HR nutzt nur den Renderer wieder. | angenommen | + +## 3. Builder / Advanced-S01 Referenz + +| Entscheidung | Empfehlung | Warum wichtig | David-Entscheidung | +|---|---|---|---| +| Builder-Aufbau | Drei-Zonen-Builder: Palette links, Canvas Mitte, Inspector rechts. | Wirkt wie Builder, nicht wie Settings-Seite. | angenommen | +| Modus-Leiste | Builder, Logic, Actions, Sharing, Preview, Settings als Modi im selben Screen. | Keine Routensplittung, aber Komplexitaet bleibt sortiert. | angenommen | +| Preview | Im selben Builder als Modus oder Side-Preview. | Public-Renderer muss pruefbar sein. | angenommen | +| Content Blocks | Section Header/Description als optionaler Content Block pruefen, nicht als A4-12-Feldtyp. | Lange Forms brauchen Struktur, aber Scope darf nicht wachsen. | angenommen | +| Signature | Nicht als normales D-FORM-v1-Feld. | Signatur hat eigenen Kontext. | angenommen | +| Foto | Als Datei-/Mobile-Kamera-Variante, kein eigener Feldtyp. | Haelt die 12 Feldtypen stabil. | angenommen | +| URL/Address/Hidden | Raus oder v2/Spezialbaustein. | Nicht Teil der A4-12-Liste bzw. haengt an v2/Maps/Links. | angenommen | +| Field Key | Sichtbar, automatisch aus Label, in Advanced editierbar. | Wichtig fuer Mapping/Actions, aber nicht zu laut im UI. | angenommen | + +## 4. Validation / Publish + +| Entscheidung | Empfehlung | David-Entscheidung | +|---|---|---| +| Publish blockiert bei fehlendem Namen, Slug, keinem sichtbaren Feld, Feld ohne Label, Select ohne Optionen, kaputter Logic, Pflichtmapping. | Ja. | angenommen | +| Warnen, aber nicht blockieren bei langem Formular, Datei ohne Typbeschraenkung, published Form stark geaendert. | Ja. | angenommen | +| Publish bleibt im Builder, kein eigener Screen. | Ja, Banner/Popover reicht. | angenommen | +| Unpublish bekommt Confirm-Hinweis, weil Public-Link danach nicht mehr erreichbar ist. | Ja. | angenommen | + +## 5. Conditional Logic + +| Entscheidung | Empfehlung | David-Entscheidung | +|---|---|---| +| V1 nur einfache Sichtbarkeit: Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken. | Ja. | angenommen | +| Keine Multi-Step-Forms, Repeater, If/Else-Baeume, Scoring, Cross-Field-Rechnung. | Ja, v2. | angenommen | +| Kaputte Referenzen blockieren Publish. | Ja. | angenommen | +| Required-Feld, das versteckt ist, blockiert Public Submit nicht. | Ja. | angenommen | + +## 6. Post-Submit-Actions + +| Entscheidung | Empfehlung | David-Entscheidung | +|---|---|---| +| Actions bleiben in S01, kein eigener Automation-Editor. | Ja. | angenommen | +| Action-Typen: Email Submitter, Email Team, Lead, Kontakt, Projekt, Task, Auto-Match, Webhook, Automation-Trigger. | Ja. | angenommen | +| KWP Push nicht aktiv in D-FORM v1. | Ja, KWP ist v2/raus. | angenommen | +| Field-Mapping sichtbar pro Action. | Ja, Kernentscheidung. | angenommen | +| Test/Preview je Action zeigen. | Ja, aber kein ActionLog/Re-Run. | angenommen | +| ActionLog/Re-Run gehoert zu Submissions. | Ja. | angenommen | + +## 7. Sharing + +| Entscheidung | Empfehlung | David-Entscheidung | +|---|---|---| +| V1 Sharing: Public URL, QR, iFrame. | Ja. | angenommen | +| Personalisierte Links raus. | Ja, v2 laut Ticket. | angenommen | +| JS-Snippet raus. | Ja, v2 laut Ticket. | angenommen | +| Draft-Form zeigt Sharing ausgegraut mit Publish-Hinweis. | Ja. | angenommen | +| Slug fehlt blockiert Sharing. | Ja. | angenommen | + +## 8. S04 Oeffentliches Formular + +| Entscheidung | Empfehlung | David-Entscheidung | +|---|---|---| +| Keine App-Shell, keine Sidebar, keine internen Begriffe. | Ja. | angenommen | +| Public Layout: Branding-Kopf, Intro, Felder, Captcha, Submit, Footer. | Ja. | angenommen | +| Mobile-first fuer lange Formulare und Datei/Foto-Upload. | Ja. | angenommen | +| Conditional Logic live, aber ohne Fachbegriff im UI. | Ja. | angenommen | +| Werte bleiben bei Submit-/Captcha-Fehler erhalten. | Ja, wichtig fuer lange Forms. | angenommen | +| Branding nur Tenant-Logo/Farbe/Fallback, kein komplexes Theme-System. | Empfehlung: v1 schlicht halten. | angenommen | + +## 9. Public-Varianten + +| Variante | Empfehlung | David-Entscheidung | +|---|---|---| +| V01 Success ohne Redirect | Danke-Ansicht mit klarer Bestaetigung. | angenommen | +| V01 Success mit Redirect | Kurze Bestaetigung + Weiterleitung/Weiter-Button. | angenommen | +| V02 Nicht verfuegbar | Ruhiger Blocker, keine technischen Details. | angenommen | +| V02 Geschlossen/Limit erreicht | Eigene Copy-Richtung, aber gleiche Variante. | angenommen | +| V03 Captcha-Fehler | Fehler nahe Captcha, Retry. | angenommen | +| V03 Submit-Fehler | Banner nahe Submit, Werte erhalten, Retry. | angenommen | + +## 10. Subframe-Freigabe + +| Punkt | Empfehlung | David-Entscheidung | +|---|---|---| +| 5 Hauptframes/Varianten bauen: S01, S02, V01, V02, V03. | Ja. | angenommen | +| Zusaetzlich D07 Logic Regel Detail bauen. | Ja, damit Logic visuell pruefbar ist. | angenommen als Empfehlung | +| Zusaetzlich D08 Action Detail mit Mapping bauen. | Ja, weil Mapping komplex und fehleranfaellig ist. | angenommen als Empfehlung | +| Zusaetzlich D09 Publish Blocker Summary bauen. | Ja, weil Publish ein kritischer Moment ist. | angenommen als Empfehlung | +| M01 Feld loeschen Confirm und M02 Unpublish Confirm vorerst nur dokumentieren. | Ja, fachlich klar; spaeter baubar, falls David es sehen will. | angenommen als Empfehlung | +| Sharing, Logic, Actions, Preview und Settings nicht als eigene Subframe-Screens, sondern als Bereiche/Zustaende von S01. | Ja. | angenommen; Interaktionslogik in S01 nachgezogen | +| Nach Subframe-Bau Links in Paket, Screen-Dateien, Tracker und Handoff eintragen. | Ja. | erledigt | + +## 11. David-Feedback: S01 Nacharbeit + +Davids Rueckmeldung: Der fachliche Scope ist gut, aber beim internen Form Builder fehlte die Interaktionslogik. Es muss erkennbar sein, ob Klicks inline bleiben, ein Menue/Popover oeffnen, den Inspector wechseln, ein Panel/Drawer zeigen oder einen Dialog brauchen. + +Arbeitsentscheidung fuer S01: + +| Aktion | Entscheidung | +|---|---| +| Feld bearbeiten | Inline im rechten Inspector, kein Modal. | +| Feld duplizieren | Direkt ueber Feldkarte oder 3-Punkte-Menue; danach Kopie markieren, kein Confirm. | +| Feld loeschen | Ueber 3-Punkte-Menue oder Gefahrenzone; Confirm, sobald Feld in Logic/Actions verwendet wird oder Loeschen destruktiv ist. | +| Logic-Regel anlegen | Im Logic-Modus als Panel/Detailbereich im selben S01-Screen, kein Modal. | +| Post-Submit-Action hinzufuegen | Actions-Modus: Typ-Auswahl als kleines Auswahlpanel/Popover, Detailkonfiguration im Panel/Drawer. | +| Sharing oeffnen | Share-Button schaltet in Sharing-Panel/Modus, kein Modal. | +| Publish | Publish-Check inline im Builder; bei Blockern Summary mit Sprungzielen, bei Erfolg Toast/Statuswechsel. | +| Unpublish | Confirm-Dialog, weil der Public-Link danach nicht mehr erreichbar ist. | + +Damit reicht S01 weiter als Hauptscreen. D07, D08 und D09 sind als wichtige S01-Zustandsframes gebaut. Die kleineren Menues und Confirm-Dialoge bleiben dokumentiert und muessen nicht automatisch eigene Subframe-Screens werden. + +Vor-Subframe-Nacharbeit erledigt: Die wichtigsten ADV-S01-Zustaende sind als eigene Markdown-Dateien ausgearbeitet: [[Screens/D01 Sharing Panel URL QR iFrame]], [[Screens/D02 Post-Submit Actions]], [[Screens/D03 Conditional Logic Editor]], [[Screens/D06 Feldkarten Menue]], [[Screens/M01 Feld loeschen Confirm]], [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]], [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]], [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]], [[Screens/M02 Unpublish Confirm]], [[Screens/M03 Archive Confirm]], [[Screens/M04 Unsaved Changes Confirm]]. + +Weitere Nacharbeit nach neuer Rueckmeldung: [[Screens/D10 Builder Interaktionsfaelle]] dokumentiert jetzt die "Was passiert wenn...?"-Faelle: Auswahlfolgen, Checkboxen, vergessene Zwischenschritte, Datei/Foto, Dropdowns, halb gesetztes Mapping, Publish-Blocker und konkrete Modal-/Popover-Inhalte. + +Aktueller Subframe-Stand: Der Hauptfluss S00/E01/E02/S01/S02/S03/S04/V01/V02/V03/S05/E03/E04 ist gebaut und verlinkt. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind gebaut, aber aktuell nur spaetere Varianten bzw. Referenz. M01/M02/M03/M04 und D10 bleiben dokumentiert. + +## 12. Kurztext fuer David + +`D-FORM ist fachlich passend abgegrenzt, die Advanced-Builder-Klicklogik ist nachgezogen und der Subframe-Draft ist gebaut. Der aktuelle Hauptfluss ist S00, S01, S02, S03, S04/Public States und S05 plus E01-E04. S02 ist die Google-Forms-nahe Hauptvariante; Logic/Actions/Publish bleiben dort bewusst einfach und inline. S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind nur spaetere Varianten bzw. Referenz. S05 bleibt ohne Kennzahl-Kacheln und ohne extra Link-teilen-Button.` diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md new file mode 100644 index 00000000..e9d4145b --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md @@ -0,0 +1,59 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S00 +screen: Formulare verwalten +typ: Formular-Zentrale +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms +subframe: "https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit" +--- + +# S00 - Formulare verwalten + +## Ziel + +Grundseite fuer Mitarbeiter, um bestehende Formulare zu finden, zu filtern und zu oeffnen. + +Der Screen ist nicht der Builder selbst, sondern die Formular-Zentrale vor dem Bearbeiten. + +## Inhalt + +- Seitentitel `Formulare` +- Hilfetext: Formulare erstellen, veroeffentlichen und verwalten +- Buttons: + - `Vorlagen` + - `Neues Formular` +- Filter oben als Mehrfachauswahl: + - Status: Erstellt, Veroeffentlicht, Unveroeffentlicht + - Art: Website / Extern, Lead, Umfrage, Intern +- Suche, Statusfilter und Sortierung +- Tabelle mit Formularen: + - Website-Anfrage + - Heizungs-Anfrage + - Kundenzufriedenheit + - Materialbedarf melden + +## Verhalten + +- Klick auf `Neues Formular` fuehrt zu [[04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]]. +- Klick auf `Bearbeiten` oeffnet aktuell [[05 S02 Einfacher Fragen Editor|S02]]. +- Die Formularart bestimmt in S02 nur Vorlage, Startfragen und Hinweise. S01B/S01C/S01D/S01E bleiben spaetere Varianten bzw. Referenzseiten. +- Filterchips koennen kombiniert werden, z. B. `Erstellt` + `Unveroeffentlicht` oder `Website / Extern` + `Lead`. +- Als Beispiel sind mehrere Status-Chips aktiv, damit klar ist: Es ist kein einzelner Tab, sondern eine Mehrfachauswahl. Art-Chips stehen daneben als zusaetzliche auswaehlbare Filter bereit. +- Aktionen je Zeile: bearbeiten, Vorschau, Link kopieren, Antworten ansehen, duplizieren, loeschen. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben den D-FORM Builder-Screens. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/02 E01 S00 Keine Formulare.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/02 E01 S00 Keine Formulare.md new file mode 100644 index 00000000..50bbf872 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/02 E01 S00 Keine Formulare.md @@ -0,0 +1,42 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: E01 +screen: S00 Keine Formulare +typ: Empty State +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms +subframe: "https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit" +--- + +# E01 - S00 Keine Formulare + +## Ziel + +Leerer Startzustand der Formular-Zentrale. + +Der Mitarbeiter hat noch kein Formular erstellt und soll ohne Erklaerballast direkt den naechsten sinnvollen Schritt sehen. + +## Inhalt + +- Seitentitel wie S00: `Formulare` +- Ruhiger Empty State im Inhaltsbereich +- Hauptaktion: `Neues Formular erstellen` +- Sekundaere Aktion: optional `Vorlagen ansehen` +- Kurzer Hinweis, dass Formulare spaeter veroeffentlicht, bearbeitet und ausgewertet werden koennen + +## Verhalten + +- Klick auf `Neues Formular erstellen` fuehrt zu [[04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]]. +- Keine Kennzahl-Kacheln und keine Beispiel-Tabelle, weil noch nichts existiert. +- Filter/Suche duerfen sichtbar bleiben oder reduziert wirken, aber nicht die Hauptaktion verdraengen. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/03 E02 S00 Keine Treffer.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/03 E02 S00 Keine Treffer.md new file mode 100644 index 00000000..b73208d0 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/03 E02 S00 Keine Treffer.md @@ -0,0 +1,41 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: E02 +screen: S00 Keine Treffer +typ: Empty State +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms +subframe: "https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit" +--- + +# E02 - S00 Keine Treffer + +## Ziel + +Zustand, wenn Suche, Statusfilter oder Artfilter keine passenden Formulare finden. + +Der Nutzer soll verstehen: Die Formulare sind nicht weg, nur der aktuelle Filter ist zu eng. + +## Inhalt + +- S00-Grundlayout mit aktiver Suche/aktiven Filtern +- Empty State im Tabellenbereich: `Keine passenden Formulare gefunden` +- Aktion: `Filter zuruecksetzen` +- Optionaler Hinweis auf die aktuelle Kombination, z. B. `Erstellt + Unveroeffentlicht + Lead` + +## Verhalten + +- `Filter zuruecksetzen` entfernt Suche und Filterchips. +- `Neues Formular` bleibt erreichbar. +- Der Zustand ist kein Fehler, sondern ein Such-/Filterergebnis. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md new file mode 100644 index 00000000..ee9bbbb1 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md @@ -0,0 +1,85 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S01 +screen: Formularart auswaehlen +typ: Einstieg / Auswahl +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/new +subframe: "https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit" +--- + +# S01 - Formularart auswaehlen + +## Ziel + +Nutzer startet nicht direkt im komplexen Builder, sondern entscheidet zuerst, welche Art Formular er erstellen will. + +## Warum wichtig + +Handwerker brauchen eine einfache Einstiegsfrage: + +`Was moechtest du erstellen?` + +Nicht: + +`Welche Feldtypen, Actions, Logic und Mappings brauchst du?` + +## Aufbau + +Interne Seite mit vorhandenem `Default Page Layout`. Keine eigene Sidebar nachbauen. + +Inhalt: + +- Titel: `Neues Formular erstellen` +- Kurzer Untertitel: `Waehle aus, wofuer das Formular gedacht ist. Du kannst spaeter alles anpassen.` +- Vier Auswahlkarten +- Unten nur `Abbrechen` und `Weiter` + +Entscheidung 2026-07-08: Weniger ist hier besser. Keine separate Vorlagenzeile und keine `Auswaehlen`-Buttons in jeder Karte, weil das die gleiche Entscheidung doppelt aufmacht. + +## Auswahlkarten + +| Karte | Kurzbeschreibung | Danach | +|---|---|---| +| Website / Extern | Kunden fuellen es per Website, Link oder QR-Code aus. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit Website-/Extern-Vorlage. | +| Lead-Formular | Neue Anfragen landen direkt als Lead in der Pipeline. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit aktiver Lead-Verknuepfung. | +| Fragebogen / Umfrage | Feedback sammeln und Antworten spaeter auswerten. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit Umfrage-Startfragen. | +| Internes Formular | Meldungen und Anfragen fuer Mitarbeitende. | Oeffnet [[05 S02 Einfacher Fragen Editor|S02]] mit interner Formularvorlage. | + +Arbeitsentscheidung 2026-07-08: S02 ist der Haupt-Editor fuer alle vier Formulararten. S01B/S01C/S01D/S01E bleiben nur spaetere Varianten bzw. Referenzseiten. + +## Lead-Formular Verhalten + +Wenn `Lead-Formular` gewaehlt wird: + +- Startfragen werden vorgeschlagen: Name, Telefon, Email, Bereich, Nachricht, Datei/Bild. +- Nach Submit wird automatisch ein Lead angelegt. +- Nutzer muss kein Mapping bauen. +- Im Editor erscheint nur ein ruhiger Hinweis: `Antworten werden automatisch als Lead gespeichert.` +- Pipeline/Ziel kann spaeter unter `Einstellungen` geaendert werden. + +## Was nicht sichtbar sein soll + +- Field Key +- Webhook +- Mapping +- Automation-Trigger +- komplexe Logic +- Rechte-/Permission-Begriffe + +## Subframe-Hinweis + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Ersetzt nicht S04 Public Form, sondern liegt vor dem Builder. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md new file mode 100644 index 00000000..56f83bc3 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md @@ -0,0 +1,185 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S02 +screen: Einfacher Fragen Editor +typ: Simple Builder Alternative +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit" +--- + +# S02 - Einfacher Fragen Editor + +## Ziel + +Google-Forms-artiger Editor fuer Handwerksbetriebe: Formularname oben, darunter einzelne Fragekarten. Nutzer fuegt Fragen hinzu, waehlt einen Fragetyp und veroeffentlicht. + +## Leitidee + +Der Nutzer soll denken: + +`Ich schreibe Fragen auf.` + +Nicht: + +`Ich konfiguriere ein Datenmodell.` + +## Aufbau + +Interne Seite mit vorhandenem `Default Page Layout`. Keine eigene Sidebar nachbauen. + +Screen-Zonen: + +- Kopfzeile: Formularname, Status, Speichern, Vorschau, Veroeffentlichen. +- Schmale Tabs: Fragen, Design, Antworten. +- Mittelspalte: Formular-Titelkarte und Fragekarten. +- Rechte Mini-Werkzeugleiste: Frage hinzufuegen, vorhandene Frage/Block, Text, Bild, Datei/Upload, Medien/Video, Abschnitt und Mehr. +- Keine dauerhafte linke Palette. +- Kein dauerhafter rechter Inspector. +- Bei Lead-Formularen erscheint zusaetzlich eine ruhige Card `Felder zuweisen`, damit sichtbar ist, welche Formularfrage in welches Lead-Feld geschrieben wird. + +## Fragekarte + +Eine aktive Fragekarte zeigt: + +- Fragetitel +- Fragetyp-Dropdown nach Google-Forms-Logik; zeigt immer den aktuell gewaehlten Typ, z. B. `Multiple-Choice-Frage`, nicht den Placeholder `Fragetyp`. +- optional Bild-Button +- mehrere Antwortoptionen als eigene Zeilen/Eingaben +- Button `Option hinzufuegen` +- Button `Sonstiges hinzufuegen`, wenn passend +- Duplizieren +- Loeschen +- Pflichtfrage Toggle +- Drei-Punkte-Menue fuer Beschreibung, Bedingung, Validierung + +## Fragetyp-Dropdown + +| Gruppe | Typen | +|---|---| +| Text | Kurzantwort, Absatz | +| Auswahl | Multiple-Choice-Frage, Mehrfachauswahl, Drop-down | +| Medien | Datei oder Bild hochladen | +| Datum/Zeit | Datum, Zeit | + +Email, Telefon und Name werden im Lead-Formular als vorbereitete Startfragen angezeigt, nicht als laute Profi-Auswahl. + +Nicht im aktuellen Hauptdropdown: Lineare Skala, Bewertung, Multiple-Choice-Raster und Kaestchenraster. Diese Typen werden nicht als eigene S02-Zustaende gebaut. + +## Multiple Choice Verhalten + +Wenn Nutzer `Multiple-Choice-Frage` waehlt: + +- Antwortoptionen erscheinen direkt in der Fragekarte. +- Erste Option heisst `Option 1`. +- Nutzer kann weitere Optionen darunter hinzufuegen. +- `Sonstiges hinzufuegen` bleibt als Link sichtbar. +- Pflichtfrage ist ein Toggle unten rechts. +- Publish blockiert, wenn keine Option vorhanden ist. + +## Mehrfachauswahl + +Wie Multiple Choice, aber mehrere Antworten sind erlaubt. + +Copy im Dropdown: `Mehrfachauswahl`, weil das fuer Handwerker verstaendlicher ist. + +## Einfache Logic + +Logic wird nicht als eigener Profi-Modus gezeigt. + +In der Fragekarte gibt es im Drei-Punkte-Menue: + +- `Bedingung hinzufuegen` + +Danach oeffnet sich ein kleiner Bereich unter der Frage: + +`Wenn Antwort ist ... dann Frage anzeigen ...` + +Mehr nicht in der Hauptansicht. + +## Lead-Formular Hinweis und Felder zuweisen + +Wenn Formularart `Lead-Formular` ist: + +- Oben unter dem Titel erscheint ein dezenter Hinweis: + `Lead-Verknuepfung`, Badge `Aktiv`, Beschreibung `Neue Antworten werden als Lead gespeichert - Pipeline: Vertrieb SHK`. +- Die Hinweis-Card nutzt dasselbe Layout wie der gruene `Lead anlegen`-Kasten: runder Icon-Hintergrund links, Titel/Beschreibung in der Mitte, Aktionen rechts. +- Rechts stehen `Felder zuweisen` als normale Aktion und `Deaktivieren` als kleine Tertiary-Aktion. +- Klick auf `Felder zuweisen` fuehrt in den Zustand [[05b S02L Lead Felder zuweisen]]. +- Wenn Publish wegen fehlender Zuweisung blockiert, fuehrt der Sprung in [[05c E05 S02 Lead Zuweisung pruefen]]. + +Das ist kein Profi-Mapping-Panel, sondern eine verstaendliche Zuweisung im gleichen Look wie der Editor. + +## Lead deaktivieren + +Nutzer muessen kein neues Formular erstellen, nur weil die Lead-Erstellung nicht mehr gewuenscht ist. + +Entscheidung: + +- Die Aktion `Deaktivieren` kann die Lead-Erstellung im bestehenden Formular ausschalten. +- Das Formular bleibt bestehen und sammelt weiter normale Antworten. +- Bereits erzeugte Leads bleiben erhalten. +- Neue Einsendungen erzeugen nach dem Ausschalten keinen neuen Lead mehr. +- Die bisherigen Zuweisungen bleiben gespeichert, damit sie beim erneuten Aktivieren wieder vorgeschlagen werden koennen. +- Wenn das Formular bereits veroeffentlicht ist, sollte beim Ausschalten ein kurzer Confirm-Hinweis erscheinen: `Neue Antworten werden dann nicht mehr als Lead gespeichert. Bereits erzeugte Leads bleiben erhalten.` +- Im Draft ohne bisherige Antworten darf `Deaktivieren` direkt umschalten. + +| Lead-Feld | Standard-Zuweisung | Verhalten | +|---|---|---| +| Name | `Ihr Name` | Pflicht, Kurzantwort. | +| Kontakt | `Telefon` oder `Email` | Mindestens eins muss zugewiesen sein. | +| Beschreibung | `Beschreibung Ihres Anliegens` | Pflicht, Absatz oder Kurzantwort. | +| Bereich | `Um welchen Bereich geht es?` | Optional, Dropdown/Multiple Choice passt. | +| Dateien / Bilder | `Fotos hochladen` | Optional, nur Datei/Bild-Felder passen. | +| Quelle | automatisch `Formular` | Nicht als Formularfrage noetig. | +| Pipeline | `Neue Anfragen` | Dropdown-Vorlage nutzen, kein Freitext. | + +Jede Zeile nutzt die gleiche Dropdown-Vorlage: links das Lead-Feld, rechts ein Dropdown mit passenden Formularfragen. Nicht passende Formularfragen werden deaktiviert oder mit Hinweis gezeigt, z. B. `Fotos hochladen - passt nicht zu Email`. + +Wenn ein Pflichtfeld nicht zuweisbar ist: + +- Zeile zeigt Inline-Fehler. +- Banner oben: `2 Zuweisungen pruefen, bevor du veroeffentlichst.` +- Primaeraktion: `Passende Frage hinzufuegen`. +- Publish bleibt blockiert, bis die Pflichtzuweisung passt. + +Details dazu liegen in [[05b S02L Lead Felder zuweisen]] und [[05c E05 S02 Lead Zuweisung pruefen]]. + +## Logic, Actions und Publish-Blocker + +S02 ist der Haupt-Editor fuer normale Nutzer. Deshalb werden Logic, Actions und Publish-Blocker nicht als eigene Profi-Seiten in den Hauptfluss gezogen. + +| Thema | Entscheidung fuer S02 | Warum | +|---|---|---| +| Logic | Nur als einfache `Bedingung` direkt an der Frage. | Nutzer soll nicht in einen Regel-Editor springen muessen. | +| Actions | `Nach Absenden` bleibt im Screen. Bei Lead-Formularen ist `Lead anlegen` aktiv und zeigt `Felder zuweisen`. | Kein Automation-Editor, aber die wichtigste Lead-Zuordnung ist sichtbar. | +| Publish-Blocker | Einfacher Banner/Popover im selben Screen mit Sprung zur betroffenen Frage. | Verstaendlich genug, kein eigener Screen noetig. | + +D07, D08 und D09 bleiben als Advanced-/Referenzseiten fuer spaeter oder fuer David, falls er die Detailtiefe sehen will. Fuer den aktuellen S02-Hauptfluss sind sie nicht notwendig. Die Lead-Zuweisung ist aber nicht mehr nur Hintergrundlogik, sondern ein eigener S02-Zustand. + +## Publish + +Bei Klick auf `Veroeffentlichen`: + +- Wenn alles passt: Toast und Status `Veroeffentlicht`. +- Wenn etwas fehlt: einfacher Banner oben: + `Noch 2 Dinge fehlen, bevor du veroeffentlichen kannst.` +- Sprungziele gehen direkt zur betroffenen Frage. + +## Subframe-Hinweis + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Nah an Google Forms, aber mit HiveGrid-Komponenten. +- Lead-Verknuepfung bleibt einfach sichtbar. `Felder zuweisen` wird als einfacher S02-Zustand gezeigt, nicht als Advanced-Mapping. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05b S02L Lead Felder zuweisen.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05b S02L Lead Felder zuweisen.md new file mode 100644 index 00000000..809a9381 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05b S02L Lead Felder zuweisen.md @@ -0,0 +1,103 @@ +--- +kind: screen-state +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S02L +screen: Lead Felder zuweisen +typ: S02-Zustand / Lead Editor +umsetzung: Subframe Draft +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit" +--- + +# S02L - Lead Felder zuweisen + +## Ziel + +Lead-Formulare sollen nicht wie ein versteckter Automation-Editor wirken, aber Nutzer muessen sehen koennen, welche Formularfrage in welches Lead-Feld geschrieben wird. + +Dieser Zustand liegt im gleichen Editor-Look wie S02: gleiche Kopfzeile, gleiche Tabs, gleiche Breite, gleiche Card-Sprache. + +## Einstieg + +S02 oeffnet diesen Zustand, wenn: + +- Formularart `Lead-Formular` gewaehlt wurde. +- Nutzer auf `Felder zuweisen` klickt. +- Publish erkennt, dass eine Lead-Zuweisung fehlt. +- Nutzer eine Frage loescht oder den Fragetyp aendert, die bereits zugewiesen war. + +## Aufbau + +- Header wie S02: Formularname, Status, Speichern, Vorschau, Veroeffentlichen. +- Tabs wie S02: Fragen, Design, Antworten. +- Hinweis-Card: `Lead-Verknuepfung`, Badge `Aktiv`, Beschreibung `Neue Antworten werden als Lead gespeichert - Pipeline: Neue Anfragen`. +- Die Hinweis-Card nutzt dasselbe Layout wie der gruene `Lead anlegen`-Kasten: runder Icon-Hintergrund links, Titel/Beschreibung in der Mitte, kleine Aktion `Deaktivieren` rechts. +- Card `Felder zuweisen` +- Optional kleine Vorschau: `So wird daraus ein Lead` + +## Felder-zuweisen-Card + +Jede Zeile nutzt dieselbe Dropdown-Vorlage: + +| Lead-Feld | Dropdown-Wert | Pflicht | Hinweis | +|---|---|---|---| +| Name | `Ihr Name` | ja | Kurzantwort. | +| Telefon | `Telefonnummer` | ja, wenn keine Email | Kurzantwort mit Telefon-Bedeutung. | +| Email | `Email-Adresse` | ja, wenn kein Telefon | Kurzantwort mit Email-Bedeutung. | +| Beschreibung | `Beschreibung Ihres Anliegens` | ja | Absatz oder Kurzantwort. | +| Bereich | `Um welchen Bereich geht es?` | nein | Auswahlfrage passt gut. | +| Datei / Bild | `Fotos hochladen` | nein | Nur Datei/Bild-Feld. | +| Pipeline | `Neue Anfragen` | ja | Dropdown aus Pipeline-Vorlage, kein Freitext. | +| Lead-Quelle | `Formular` | automatisch | Nicht editierbar im normalen Flow. | + +## Dropdown-Regel + +Dropdowns zeigen nur sinnvolle Optionen prominent. + +Nicht passende Optionen sind entweder: + +- gar nicht sichtbar, wenn es dadurch einfacher wird; +- oder disabled sichtbar mit kurzer Begruendung, wenn David den Fehlerfall sichtbar pruefen will. + +Beispiele: + +| Ziel | Nicht moegliche Option | Warum | +|---|---|---| +| Email | `Fotos hochladen` | Datei kann nicht als Email gespeichert werden. | +| Telefon | `Beschreibung Ihres Anliegens` | Langer Text passt nicht als Telefonnummer. | +| Datei / Bild | `Ihr Name` | Textfeld ist keine Datei. | +| Pipeline | `Um welchen Bereich geht es?` | Pipeline kommt aus Systemvorlage, nicht aus Formularantwort. | + +## Aktionen + +- `Zuweisung aendern` ueber Dropdown. +- `Passende Frage hinzufuegen` erstellt eine neue Frage und weist sie direkt zu. +- `Automatisch zuweisen` versucht anhand von Name, Email, Telefon, Beschreibung und Datei passende Fragen zu erkennen. +- `Ziel aendern` oeffnet Pipeline-/Team-Dropdown, kein grosses Mapping-Modal. + +## Verhalten + +- Wenn Nutzer eine zugewiesene Frage loescht, bleibt die Lead-Zeile sichtbar und wechselt auf Fehler. +- Wenn Nutzer den Fragetyp aendert und der Typ nicht mehr passt, wird die Zuweisung geloest oder als `passt nicht mehr` markiert. +- Wenn Telefon und Email beide leer sind, blockiert Publish. +- Wenn nur Telefon oder nur Email vorhanden ist, ist Publish erlaubt. +- Wenn optionale Felder fehlen, Publish nicht blockieren. + +## Subframe-Hinweis + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit + +Subframe-Name aktuell: `05b S02L Lead Felder zuweisen`. + +Wichtig fuer Subframe: + +- Gleiches Page Layout wie S02. +- Gleiche Card-Breite und gleiche Fragekarten-Sprache wie S02. +- Dropdown-Vorlage verwenden, nicht eigene Select-Optik erfinden. +- Keine Tabellenoptik wie Advanced-Mapping. +- Bei der finalen Sichtpruefung in Subframe kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05c E05 S02 Lead Zuweisung pruefen.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05c E05 S02 Lead Zuweisung pruefen.md new file mode 100644 index 00000000..827fd2e2 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05c E05 S02 Lead Zuweisung pruefen.md @@ -0,0 +1,93 @@ +--- +kind: state +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: E05 +screen: S02 Lead Zuweisung pruefen +typ: Lead Mapping Error State +umsetzung: Subframe Draft +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit" +--- + +# E05 - S02 Lead Zuweisung pruefen + +## Ziel + +Wenn eine Lead-Zuweisung nicht moeglich ist, soll der Nutzer direkt verstehen, was nicht passt und wie er es behebt. + +Dieser Zustand ist kein Modal und kein eigener Advanced-Editor. Er ist derselbe S02/S02L-Screen mit Fehlerbanner und markierten Zeilen. + +## Wann tritt der Zustand auf? + +- Pflichtfeld `Name` ist nicht zugewiesen. +- Weder `Telefon` noch `Email` ist zugewiesen. +- `Beschreibung` fehlt. +- Eine zugewiesene Frage wurde geloescht. +- Eine Frage wurde in einen unpassenden Fragetyp geaendert. +- Ein Feld ist technisch nicht kompatibel, z. B. Datei zu Email. + +## Aufbau + +- Banner oben in S02/S02L: + `3 Zuweisungen pruefen, bevor du veroeffentlichst.` +- Darunter Sprunglinks: + `Name zuweisen`, `Kontakt zuweisen`, `Beschreibung zuweisen` +- In der Card `Felder zuweisen` sind betroffene Zeilen markiert. +- Jede fehlerhafte Zeile hat eine kurze Message. + +## Fehlermatrix + +| Fall | Message | Aktion | +|---|---|---| +| Name fehlt | `Waehle eine Frage fuer den Lead-Namen aus.` | Dropdown oeffnen oder `Passende Frage hinzufuegen`. | +| Kein Kontaktweg | `Weise Telefon oder Email zu, damit der Lead kontaktierbar ist.` | Telefon-/Email-Zeile fokussieren. | +| Beschreibung fehlt | `Waehle die Frage, die als Lead-Beschreibung gespeichert wird.` | Dropdown oeffnen. | +| Typ passt nicht | `Dieses Formularfeld passt nicht zu diesem Lead-Feld.` | Andere Frage waehlen. | +| Frage geloescht | `Die bisherige Frage existiert nicht mehr.` | Neue Frage waehlen oder erstellen. | + +## Nicht moegliche Optionen + +Im Dropdown koennen nicht moegliche Optionen disabled erscheinen: + +```text +Fotos hochladen +Nicht moeglich fuer Email +``` + +Oder: + +```text +Beschreibung Ihres Anliegens +Nicht moeglich fuer Telefon +``` + +Wenn zu viele disabled Optionen verwirren, nur passende Optionen anzeigen und darunter den Link `Warum sehe ich nicht alle Fragen?`. + +## Publish-Regel + +Publish bleibt blockiert, solange: + +- Name fehlt. +- Kontaktweg fehlt. +- Beschreibung fehlt. +- eine aktive Pflichtzuweisung ungueltig ist. + +Publish darf durchgehen, wenn: + +- optionale Lead-Felder fehlen; +- Datei/Bild nicht zugewiesen ist; +- Bereich nicht zugewiesen ist; +- nur ein Kontaktweg vorhanden ist. + +## Subframe-Hinweis + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit + +Subframe-Name aktuell: `05c E05 S02 Lead Zuweisung pruefen`. + +Bei der finalen Sichtpruefung in Subframe kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist, damit der Zustand wie S02/S02L im vorhandenen App-Rahmen liegt. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md new file mode 100644 index 00000000..68ffe945 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md @@ -0,0 +1,59 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S03 +screen: Formular Design +typ: Builder Tab +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit" +--- + +# S03 - Formular Design + +## Ziel + +Design-Tab fuer ein konkretes Formular. + +Hier veraendert der Mitarbeiter nicht die Fragen, sondern die Darstellung des oeffentlichen Formulars. + +## Inhalt + +- Formularname `Website-Anfrage` +- Tabs: + - Fragen + - Design + - Antworten +- Hilfetext: `Logo, Farben und Darstellung des oeffentlichen Formulars anpassen.` +- Einstellungen: + - Logo hochladen + - Akzentfarbe + - Theme / Schrift + - Formularbreite + - Hintergrund + - Button-Text + - Datenschutz-Hinweis +- Live-Vorschau der Kundensicht als Formular-Card + +## Verhalten + +- Aenderungen sollen sofort in der Live-Vorschau sichtbar werden. +- `Vorschau` oeffnet die Public-Ansicht. +- `Veroeffentlichen` bleibt in der Topbar erreichbar. +- Kein eigener `Teilen`-Tab; Link/QR/Einbettung gehoeren in den Veroeffentlichen-/Public-Link-Kontext. +- Keine Logic- oder Antwortbearbeitung in diesem Tab. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Design ist bewusst einfach gehalten, nicht wie ein Profi-Theme-Editor. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md new file mode 100644 index 00000000..83ed4180 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md @@ -0,0 +1,268 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S04 +screen: Oeffentliches Formular +typ: Public Form +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/{tenant}/{slug} +subframe: "https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit" +--- + +# S04 - Oeffentliches Formular + +## Ziel + +Externe Nutzer reichen ein Formular ohne App-Shell ein. Das Formular wirkt vertrauenswuerdig, klar, mobil nutzbar und tenant-gebrandet. + +## Pattern / Archetyp + +BESPOKE-Public. + +Nutzt A4-Feldtypen als Renderer und A7-Zustaende fuer Public Loading/Error. + +## Public-Arbeitsbereiche + +Dies ist keine App-Shell. Der Submitter sieht nur das Formular und die noetige Orientierung. + +| Bereich | Zweck | +|---|---| +| Branding-Kopf | Tenant-Logo, optional kurzer Dbsendername. | +| Formular-Intro | Titel, Beschreibung, ggf. Vertrauen/Datenschutz-Kurztext. | +| Feldbereich | Gerenderte Felder mit Conditional Logic. | +| Datenschutz / Captcha | Datenschutz-Zustimmung und mCaptcha nahe am Submit, nicht als Fremdkoerper. | +| Submit-Bereich | Button, Pflichtfeldhinweis, allgemeiner Fehler. | +| Footer | minimal: Datenschutz/Anbieter-Link falls vorgesehen. | + +Empfehlung: Public Form soll eher wie ein ruhiges Kundenformular wirken, nicht wie eine Mini-Version der HiveGrid-App. + +## Detail-Brainstorming S04 + +Status: Arbeitsentwurf fuer David. Noch nicht final abgehakt. + +Das Public Form ist kein internes HiveGrid-UI. Es muss fuer Endkunden, Monteure, Bewerber oder Mitarbeiter funktionieren, die den Kontext nicht kennen. Deshalb zaehlen Vertrauen, Lesbarkeit, Mobile und Fehlerklarheit mehr als App-Dichte. + +### Layout-Optionen + +| Option | Aufbau | Vorteil | Risiko | Empfehlung | +|---|---|---|---|---| +| D | Zentrierte Formularseite mit Branding-Kopf, Intro, Feldbereich, Submit, Footer. | Ruhig, erwartbar, gut mobil. | Bei sehr langen Formularen braucht es gute Abstaende/Abschnitte. | Empfohlen. | +| B | App-nahe Seite mit Sidebar/Topbar. | Wiederverwendet internes Muster. | Wirkt falsch fuer externe Nutzer, zu viel HiveGrid-Kontext. | Raus. | +| C | Fullscreen-Karten pro Abschnitt/Step. | Sehr gefuehrt. | Multi-Step ist v2 bzw. nicht D-FORM v1. | Spaeter. | + +Arbeitsentscheidung: S04 ist eine **Public Landing/Form-Seite ohne App-Shell**. Kein Sidebar, keine interne Navigation, keine Tabellen, keine internen Modulbegriffe. + +### Empfohlener Seitenaufbau + +| Bereich | Inhalt | Verhalten | +|---|---|---| +| Public Header | Tenant-Logo/Fallback, optional Anbietername. | Kleiner als App-Header, nicht dominant. | +| Formular-Intro | Form-Titel, Beschreibung, ggf. kurzer Datenschutz-/Hinweistext. | Nur sichtbare Public Copy, keine internen Labels. | +| Progress/Abschnittshinweis | Nur falls lange Form oder Content Blocks vorhanden. | Kein echter Multi-Step in v1. | +| Felder | Gerenderte Feldtypen in Reihenfolge. | Conditional Logic blendet Felder live ein/aus. | +| Datei-/Foto-Bereich | Upload mit Status, Fehler, Retry. | Mobile besonders pruefen. | +| Datenschutz | Pflicht-Checkbox mit Link zur Datenschutzerklaerung. | Direkt vor Captcha/Submit, damit Zustimmung bewusst passiert. | +| Captcha | mCaptcha nahe am Submit. | Sichtbar, aber nicht lauter als Formular. | +| Submit-Bereich | Pflichtfeldhinweis, Submit-Button, allgemeiner Fehler. | Sticky Button nur optional fuer sehr lange mobile Forms. | +| Footer | Datenschutz/Anbieter-Link, optional "powered by" falls gewuenscht. | Dezent. | + +### Public-Copy-Regeln + +| Regel | Beispiel / Bedeutung | +|---|---| +| Keine internen Begriffe | Nicht "Submission", "Action", "Lead", "Projekt", "Webhook". | +| Fehler sagen, was zu tun ist | "Bitte pruefen Sie die markierten Felder." statt "Validation failed". | +| Submit-Vertrauen sichern | Nach Klick klar zeigen: wird gesendet, angekommen, Fehler. | +| Datenschutz kurz halten | Optionaler Link oder kurzer Satz, kein langer Rechtstext im Hauptfluss. | +| Anbieter statt HiveGrid in den Vordergrund | Tenant-Branding zuerst, HiveGrid nur optional klein. | + +## Detail: Public Field Rendering + +| Feldtyp | Public-Darstellung | Mobile-Hinweis | Fehler | +|---|---|---|---| +| Text | Einzeiliges Eingabefeld. | Volle Breite, passende Tastatur. | Pflicht, min/max, Regex. | +| Textarea | Mehrzeiliges Eingabefeld. | Hoehe nicht zu klein, lange Texte erhalten. | Pflicht, min/max. | +| Zahl | Zahleneingabe. | Numerische Tastatur. | min/max, falsches Format. | +| Waehrung | Betrag mit Waehrungsformat. | Kein winziger Prefix; klare Einheit. | min/max, ungueltiger Betrag. | +| Datum | Date Picker oder natives Datum. | Native mobile Eingabe bevorzugt. | min/max Datum. | +| Datum-Range | Start/Ende als Paar. | Untereinander auf mobile. | Ende vor Start. | +| Select | Dropdown oder Radio je Optionenmenge. | Grosse Touch-Ziele. | Pflicht ohne Auswahl. | +| Multi-Select | Checkboxen oder Chips. | Keine zu kleinen Chips. | min/max Auswahl. | +| Boolean | Checkbox/Toggle, ggf. Zustimmung. | Label klickbar. | Muss bestaetigt werden, falls Pflicht. | +| Email | Email-Eingabe. | Email-Tastatur. | Email-Format. | +| Telefon | Telefon-Eingabe. | Telefon-Tastatur. | Telefonnummer pruefen. | +| Datei | Upload/Dropzone, mobile Kamera-Option wenn moeglich. | Foto aufnehmen/Datei waehlen klar trennen. | Typ, Groesse, Uploadfehler. | + +### Feldgruppen / lange Formulare + +| Fall | Empfehlung | +|---|---| +| Bis ca. 8 Felder | Einfache vertikale Form reicht. | +| Viele Felder | Abschnittsueberschriften/visuelle Gruppen erlauben, aber kein Multi-Step erzwingen. | +| Viele Pflichtfelder | Pflichtfeldhinweis oben und am Submit. | +| Viele Datei-Felder | Upload-Status je Feld sehr klar machen. | + +## Detail: Conditional Logic live + +| Zustand | Public-Verhalten | +|---|---| +| Bedingung noch nicht erfuellt | Ziel-Feld nicht sichtbar, ohne leere Luecke. | +| Bedingung erfuellt | Ziel-Feld erscheint ruhig, ideal ohne aggressive Dnimation. | +| Bereits eingegebener Wert wird versteckt | Wert bleibt technisch erhalten oder wird klar behandelt; UI zeigt keine verwirrende Loeschung. | +| Pflichtfeld wird versteckt | Es blockiert Submit nicht, solange es unsichtbar ist. | +| Logic-Fehler in Public | Sollte intern verhindert werden; falls doch, Formular freundlich blockieren oder Feld normal anzeigen nach Fallback-Regel. | + +Empfehlung: Public Logic soll nicht erklaeren, dass es "Conditional Logic" ist. Der Nutzer erlebt nur ein Formular, das passende Folgefragen zeigt. + +## Detail: Submit-Flow + +| Schritt | UI | +|---|---| +| Nutzer klickt Submit | Button zeigt Loading, Doppel-Submit verhindern. | +| Feldfehler vorhanden | Springt/scrollt zum ersten Fehler und markiert Felder. | +| Captcha fehlt | Fehler nahe Captcha, Werte bleiben erhalten. | +| Datenschutz fehlt | Fehler an der Checkbox, Werte bleiben erhalten. | +| Submit laeuft | Button disabled, kurzer Status. | +| Submit erfolgreich | V01 Success oder Redirect. | +| Submit fehlgeschlagen | V03 Fehlerbanner; Werte bleiben erhalten, Retry moeglich. | + +### Submit-Button-Zustaende + +| Zustand | Label / Verhalten | +|---|---| +| Normal | "Absenden" oder formularspezifisch, z. B. "Anfrage senden". | +| Disabled | Wenn technisch noetig; Grund sichtbar, nicht nur grau. | +| Loading | "Wird gesendet..." | +| Retry | "Erneut senden" | + +## Detail: Datei-/Foto-Upload Public + +| Zustand | UI | +|---|---| +| Noch keine Datei | Upload-Flaeche mit erlaubten Typen/Groesse. | +| Datei ausgewaehlt | Dateiname, Groesse, Entfernen. | +| Upload laeuft | Progress je Datei. | +| Upload erfolgreich | Bestaetigung am Feld. | +| Uploadfehler | Klartext + Datei erneut waehlen. | +| Mobile Foto | "Foto aufnehmen" und "Datei auswaehlen" falls moeglich. | + +Wichtig: Datei-Fehler duerfen nicht erst nach komplettem Submit sichtbar werden, wenn technisch fruehere Pruefung moeglich ist. + +## Detail: Public States + +| Zustand | Screen / Variante | Notiz | +|---|---|---| +| Loading | S04 | Skeleton oder ruhiger Ladezustand. | +| Ready | S04 | Formular sichtbar. | +| Field Error | S04 | Inline, kein eigener Screen. | +| Captcha Error | V03 | Public-Fehlerzustand, Werte behalten. | +| Submit Error | V03 | Retry, keine technischen Details. | +| Success | V01 | Dnkommen bestaetigen. | +| Redirect | V01 | Weiterleitung klar ankündigen. | +| Nicht verfuegbar | V02 | Formular nicht public/geschlossen/ungueltig. | + +## Detail: Branding + +| Element | Empfehlung | +|---|---| +| Tenant-Logo | Oben sichtbar, aber nicht riesig. | +| Fallback | Anbietername oder neutraler Dvatar/Initialen. | +| Farbe | Dezente Dccent-Farbe aus Tenant, keine komplette App-Theming-Komplexitaet. | +| HiveGrid-Hinweis | Optional klein im Footer; nicht Hauptmarke. | +| Datenschutz | Pflicht-Checkbox im Submit-Bereich plus Link oder kurzer Hinweis im Footer. | + +## Detail: Datenschutz / Vertrauen + +| Frage | UI-Antwort | +|---|---| +| Wer bekommt meine Daten? | Anbietername/Logo und kurzer Kontext. | +| Was passiert nach Absenden? | Erfolgstext/Redirect aus Form-Konfiguration. | +| Muss ich angemeldet sein? | Nein fuer Public v1; falls spaeter Login-Pflicht, eigener Zustand. | +| Was, wenn ein Fehler passiert? | Werte behalten, Retry, Anbieter kontaktieren. | + +## Daten + +- Tenant-Logo oder Fallback-Branding. +- Form-Titel und Beschreibung. +- Gerenderte Felder in definierter Reihenfolge. +- Conditional Logic fuer sichtbare/ausgeblendete Felder. +- Pflichtfeld- und Validation-Regeln. +- mCaptcha. +- Submit-Button. +- Erfolgstext oder Redirect-Ziel. + +## Mobile-Prioritaet + +Viele Public-Formular-Nutzer werden am Telefon sein. David sollte deshalb besonders pruefen: + +- Feldabstaende und Fehlermeldungen bei schmaler Breite. +- Datei-/Foto-Upload ohne App-Kontext. +- Captcha sichtbar, aber nicht dominant. +- Submit-Button nach langen Formularen gut erreichbar. +- Success/Error-Zustaende ohne Scroll-Verwirrung. + +## Aktionen + +- Feldwerte eingeben. +- Conditional Logic live ausloesen. +- Datei/Foto hochladen, falls Feldtyp aktiv ist. +- Captcha bestaetigen. +- Formular absenden. +- Nach Erfolg ggf. Redirect folgen. + +## Banner / Hinweise + +- Validation-Hinweise pro Feld. +- Dllgemeiner Submit-Fehler, wenn die Einreichung nicht gespeichert werden kann. +- Captcha-Hinweis, wenn Bot-Schutz fehlschlaegt. + +## Toasts / Action-Feedback + +- Keine klassischen App-Toasts. Public Form nutzt Inline-Feedback und Success-State. + +## Meldungsentscheidung + +| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | +|---|---|---|---|---| +| Pflichtfeld fehlt | Inline am Feld | ja | Wiederverwenden | Klar und feldnah. | +| Ungueltiges Format | Inline am Feld | ja | Wiederverwenden | Beispiel: Email-Ddresse pruefen. | +| Captcha fehlt/fehlgeschlagen | Banner/Inline beim Captcha | ja | Bauen in V03 | Erneut versuchen. | +| Submit erfolgreich | Success-State/Redirect | nein | Bauen in V01 | Anfrage ist angekommen. | +| Public Form nicht verfuegbar | Blocker Screen | ja | Bauen in V02 | Kein technischer 404 fuer Endkunden. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Leer | Formular hat keine sichtbaren Felder; sollte intern verhindert werden. | Nur dokumentieren | +| Laden | Public Form laedt. | Wiederverwenden | +| Fehler | Public Form kann nicht geladen oder gesendet werden. | Bauen ueber V02/V03 | +| Keine Berechtigung | Nicht relevant fuer Public; falls Login-Pflicht spaeter kommt, eigener Zustand. | Raus | +| Captcha Error | Captcha oder Bot-Schutz blockiert Submit. | Bauen in V03 | +| Erfolg | Submit wurde angenommen. | Bauen in V01 | + +## Blockierende Error States + +| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion | +|---|---|---|---| +| Formular nicht veroeffentlicht | Ruhiger Public-Blocker. | Zur Website zurueck | Anbieter kontaktieren | +| Formular geschlossen | Hinweis auf geschlossenen Dnnahmezeitraum. | Anbieter kontaktieren | - | +| Submit dauerhaft fehlgeschlagen | Fehlerhinweis ohne technische Details. | Erneut versuchen | Anbieter kontaktieren | + +## Permissions / Gates + +- Keine eingeloggte Rolle noetig. +- Public-Zugriff haengt an `is_public`, `status=published`, optional close/limit config und Spam-Schutz. + +## Subframe + +https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit + +## Notizen + +Dieser Renderer wird spaeter wiederverwendet fuer HR-Forms, Booking-Intake, Urlaub/Krank und Requests. Deshalb keine App-Shell, keine internen Admin-Begriffe, keine Tabellenlogik. + +Public muss mobil sauber funktionieren, weil viele Endkunden und Monteure Formulare am Telefon ausfuellen. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md new file mode 100644 index 00000000..f5c5889f --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md @@ -0,0 +1,42 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V01 +screen: Public Erfolg oder Redirect +typ: Public Feedback +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/:slug +subframe: "https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit" +--- + +# V01 - Public Erfolg oder Redirect + +## Ziel + +Erfolgsmeldung nach dem Absenden eines oeffentlichen Formulars. + +Der Kunde soll klar verstehen, dass die Anfrage angekommen ist. + +## Inhalt + +- Tenant-Branding wie in [[07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] +- Erfolgstitel, z. B. `Anfrage gesendet` +- Kurzer Bestaetigungstext +- Optionaler Hinweis auf Weiterleitung +- Optionaler Button zur Website oder Startseite + +## Verhalten + +- Werte muessen nicht erneut gezeigt werden. +- Bei Redirect wird kurz bestaetigt und dann weitergeleitet. +- Keine internen Begriffe wie Submission, Lead, Action oder Mapping. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md new file mode 100644 index 00000000..879b4a30 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md @@ -0,0 +1,41 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V02 +screen: Public Formular nicht verfuegbar +typ: Public Blocker +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/:slug +subframe: "https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit" +--- + +# V02 - Public Formular nicht verfuegbar + +## Ziel + +Ruhiger Public-Blocker, wenn ein Formular nicht erreichbar ist. + +Der Kunde soll keine technische 404-/500-Fehlermeldung sehen. + +## Inhalt + +- Tenant-Branding oder neutraler Fallback +- Titel, z. B. `Formular nicht verfuegbar` +- Kurzer Grund ohne Technikdetails +- Optionaler Kontakt-/Zurueck-Link + +## Verhalten + +- Wird genutzt, wenn Formular unveroeffentlicht, geschlossen, geloescht oder nicht erreichbar ist. +- Kein App-Layout und keine internen Informationen. +- Keine technischen Fehlercodes fuer Endkunden. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md new file mode 100644 index 00000000..68795d6d --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md @@ -0,0 +1,41 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V03 +screen: Public Captcha oder Submit Fehler +typ: Public Error +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/:slug +subframe: "https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit" +--- + +# V03 - Public Captcha oder Submit Fehler + +## Ziel + +Fehlerzustand im oeffentlichen Formular, wenn Captcha, Upload oder Submit scheitert. + +Der Kunde soll korrigieren oder erneut senden koennen, ohne Daten neu einzutippen. + +## Inhalt + +- Gleicher Formularaufbau wie [[07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] +- Fehlerbanner nahe Submit-Bereich +- Inline-Fehler bei Captcha, Upload oder Pflichtfeld +- Submit-Button bleibt erneut nutzbar + +## Verhalten + +- Bereits eingetragene Werte bleiben sichtbar. +- Fehler werden in Kundensprache erklaert. +- Keine technischen Details, keine internen Begriffe. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md new file mode 100644 index 00000000..1301f2bc --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md @@ -0,0 +1,75 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S05 +screen: Antworten Tabelle +typ: Builder Tab +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit" +--- + +# S05 - Antworten Tabelle + +## Ziel + +Antworten-Tab fuer ein konkretes Formular. + +Der Mitarbeiter sieht Einsendungen wie in einer einfachen Excel-/Tabellenansicht. + +## Inhalt + +- Formularname `Website-Anfrage` +- Status `Veroeffentlicht` +- Tabs: + - Fragen + - Design + - Antworten +- Hilfetext: `Jede Zeile ist eine Einsendung. Spalten entsprechen den Formularfeldern.` +- Keine Kennzahl-Kacheln; der Screen startet nach Titel/Tabs direkt mit Toolbar und Tabelle. +- Toolbar: + - Suche + - Zeitraum: Heute, Letzte 7 Tage, Dieser Monat, Letzter Monat, Letzte 3 Monate, Letztes Jahr, Alle + - Statusfilter + - Spalten + - Excel / CSV exportieren +- Tabelle mit Spalten: + - Eingegangen + - Name + - E-Mail + - Telefon + - Bereich + - Nachricht + - Datei + - Lead-Status + +## Verhalten + +- Jede Zeile steht fuer eine Einsendung. +- Spalten entsprechen den Formularfeldern. +- Export erzeugt Excel/CSV. +- Keine Kennzahl-Kacheln, weil die Ansicht sonst fuer den einfachen Antworten-Tab zu schwer wirkt. +- Kein `Link teilen` in diesem Tab; die Antwortseite dient Auswertung und Export, Teilen/Link gehoert zu Veroeffentlichen. +- Zeilen koennen spaeter ein Detail oeffnen; dieser Detail-Drawer ist nicht Teil dieses Screens. + +## Error-/Empty-Zustaende + +- Keine Antworten: eigener State [[12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]]. +- Suche/Filter ohne Treffer: Empty State im Tabellenbereich. +- Export fehlgeschlagen: eigener State [[13 E04 S05 Export Fehler|E04 S05 Export Fehler]]. +- Export laeuft: Button Loading/disabled. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Tabelle ist bewusst dicht, aber nicht ueberladen. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/12 E03 S05 Keine Antworten.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/12 E03 S05 Keine Antworten.md new file mode 100644 index 00000000..1b1e912d --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/12 E03 S05 Keine Antworten.md @@ -0,0 +1,43 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: E03 +screen: S05 Keine Antworten +typ: Empty State +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit" +--- + +# E03 - S05 Keine Antworten + +## Ziel + +Leerer Antworten-Tab fuer ein Formular, das noch keine Einsendungen hat. + +Der Mitarbeiter soll sehen, dass der Tab richtig ist, aber noch niemand das Formular abgeschickt hat. + +## Inhalt + +- Formularheader wie S05 +- Tab `Antworten` aktiv +- Toolbar schlicht halten, keine Kennzahl-Kacheln +- Empty State im Tabellenbereich: `Noch keine Antworten` +- Hilfreiche Aktion: `Vorschau oeffnen` +- Optionaler Hinweis: `Nach dem Absenden erscheinen Einsendungen hier als Tabelle.` + +## Verhalten + +- Export ist disabled oder nicht prominent, solange keine Antworten existieren. +- `Vorschau oeffnen` zeigt das Public Formular oder die Preview. +- Kein `Link teilen` in diesem Tab; Teilen gehoert zum Veroeffentlichen-/Public-Link-Kontext. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/13 E04 S05 Export Fehler.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/13 E04 S05 Export Fehler.md new file mode 100644 index 00000000..ab06a36f --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/13 E04 S05 Export Fehler.md @@ -0,0 +1,43 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: E04 +screen: S05 Export Fehler +typ: Error State +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit" +--- + +# E04 - S05 Export Fehler + +## Ziel + +Fehlerzustand, wenn Excel/CSV-Export nicht erstellt werden konnte. + +Der Nutzer soll die Antworten nicht verlieren und direkt erneut versuchen koennen. + +## Inhalt + +- S05-Grundlayout mit Antworten-Tabelle +- Error-Banner nahe Toolbar oder Exportbereich +- Text: `Export konnte nicht erstellt werden` +- Aktion: `Erneut versuchen` +- Sekundaere Aktion: optional `CSV statt Excel` + +## Verhalten + +- Tabellenwerte bleiben sichtbar. +- Filter und Zeitraum bleiben erhalten. +- Export-Button kann kurz `loading` sein und danach wieder aktiv werden. +- Keine technischen Fehlermeldungen fuer normale Nutzer. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md new file mode 100644 index 00000000..ad701ed0 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md @@ -0,0 +1,110 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S01B +screen: Gefuehrter Fragen Editor +typ: Simple Builder Alternative +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit" +--- + +# S01B - Gefuehrter Fragen Editor + +## Ziel + +Noch weniger Komplexitaet als S02. Der Nutzer wird durch wenige Schritte gefuehrt: Fragen, Einstellungen, Vorschau, Veroeffentlichen. + +## Leitidee + +S01B ist fuer Nutzer, die bei zu vielen Buttons sofort aussteigen. + +Der Screen sagt: + +`Erst Fragen. Dann pruefen. Dann teilen.` + +## Aufbau + +Interne Seite mit vorhandenem `Default rage Layout`. Keine eigene Sidebar nachbauen. + +Screen-Zonen: + +- Kopfzeile mit Formularname, Speichern, Vorschau. +- Step-Leiste oben: 1 Fragen, 2 Einstellungen, 3 Vorschau, 4 Veroeffentlichen. +- Linke schmale Fragenliste: Frage 1, Frage 2, Frage 3. +- Hauptbereich: nur die aktuell gewaehlte Frage als grosse Karte. +- Rechte Seite: Hilfe/rreview-Zusammenfassung, nicht voller Inspector. + +## Hauptaktionen + +| Aktion | UI | +|---|---| +| Frage hinzufuegen | grosser Button `+ Frage hinzufuegen` unter Fragenliste | +| Fragetyp wechseln | grosses Dropdown in der Fragekarte | +| Option hinzufuegen | Inline in der Fragekarte | +| rflichtfrage | Toggle mit Text `Muss beantwortet werden` | +| Bedingung | Button `Nur anzeigen, wenn ...` | +| Frage loeschen | Drei-runkte-Menue, Confirm nur bei Risiko | +| Vorschau | eigener Schritt oder Button oben | + +## Vereinfachung gegenueber S02 + +| S02 | S01B | +|---|---| +| rechte Mini-Werkzeugleiste | keine Werkzeugleiste | +| mehrere Fragekarten sichtbar | Fokus auf eine Frage | +| tabs wie Google Forms | Schrittfolge | +| mehr direkte Kontrolle | mehr Fuehrung | + +## Lead-Formular Verhalten + +Bei Lead-Formular: + +- Schritt `Einstellungen` zeigt automatisch: + - Lead-Erstellung aktiv + - Ziel-ripeline + - verantwortliches Team +- Nutzer kann diese Werte aendern, muss aber nichts mappen. +- Fragenliste startet mit vorgeschlagenen Lead-Fragen. + +## rublic rreview + +Der Schritt `Vorschau` zeigt, wie der Kunde das Formular sieht. + +Wichtig: + +- Keine rDF-Sprache. +- Keine interne Builder-Sprache. +- rreview entspricht S02 rublic Form. + +## rublish + +Im Schritt `Veroeffentlichen` sieht Nutzer: + +- rublic Link +- QR-Code +- Einbetten +- Status der rruefung + +Fehlt etwas, steht es als einfache Checkliste: + +- `Frage 2 braucht mindestens eine Antwortoption.` +- `Oeffentliche URL fehlt.` +- `Datenschutz-Hinweis pruefen.` + +## Subframe-Hinweis + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default rage Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Weniger Google-Forms-nah als S02, aber fuer sehr unsichere Nutzer wahrscheinlich leichter. +- Lead-Verknuepfung bleibt als einfache aktive Einstellung sichtbar, ohne Mapping-ranel. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md new file mode 100644 index 00000000..638e3328 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md @@ -0,0 +1,57 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S01C +screen: Website Formular Editor +typ: Simple Builder Beispiel +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit" +--- + +# S01C - Website Formular Editor + +## Ziel + +Beispiel-Editor fuer die S00-Auswahl `Website-/Externes Formular`. + +Der Nutzer erstellt ein einfaches oeffentliches Anfrageformular fuer Website, Link oder QR-Code. + +## Inhalt + +- Formularname `Website-Anfrage` +- Hinweis `Oeffentliches Formular` +- Public-Link-/Anfrage-Hinweis +- Fragenkarten: + - Name + - E-Mail + - Telefon + - Worum geht es? + - Nachricht + - Datei / Bild hochladen +- Schutz-/Datenschutzbereich: + - mCaptcha / Spam-Schutz + - Datenschutzhinweis + +## Verhalten + +- Kein Lead-Mapping sichtbar. +- Keine Pipeline-Verknuepfung im Vordergrund. +- Nutzer denkt: `Ich baue ein Kontakt-/Anfrageformular fuer die Website.` +- Publish/Preview bleiben oben erreichbar. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Wiederhergestellte Layout-Version vom 2026-07-07; alte kaputte Subframe-ID wurde ersetzt. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md new file mode 100644 index 00000000..05a5a89f --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md @@ -0,0 +1,55 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S01D +screen: Umfrage Editor +typ: Simple Builder Beispiel +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit" +--- + +# S01D - Umfrage Editor + +## Ziel + +Beispiel-Editor fuer die S00-Auswahl `Fragebogen / Umfrage`. + +Der Nutzer erstellt eine einfache Umfrage, z. B. kurze Rueckmeldung oder Zufriedenheit. + +Hinweis 2026-07-08: S01D ist aktuell nur Referenz. Im Hauptfluss oeffnet auch `Fragebogen / Umfrage` den S02-Editor mit passender Vorlage. + +## Inhalt + +- Formularname `Kundenzufriedenheit` +- Hinweis `Umfrage - Antworten werden gesammelt` +- Keine Lead-Verknuepfung +- Fragenkarten: + - Multiple Choice + - Freitext + - optional Datum/Zeit, falls fuer Rueckmeldung noetig +- Kleine Vorschau-/Antworten-Zusammenfassung + +## Verhalten + +- Keine Pipeline. +- Keine Lead-Automatik. +- Antworten werden gesammelt und spaeter im Antworten-Bereich geprueft. +- Nutzer denkt: `Ich frage Feedback ab.` +- Keine Lineare Skala, keine Bewertung/Sterne und keine Raster im aktuellen S02-Hauptdropdown. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Korrigierte Version; die falsch generierte Variante ohne Layout wurde geloescht. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md new file mode 100644 index 00000000..50866772 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md @@ -0,0 +1,56 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: S01E +screen: Internes Formular Editor +typ: Simple Builder Beispiel +umsetzung: Alternative bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit" +--- + +# S01E - Internes Formular Editor + +## Ziel + +Beispiel-Editor fuer die S00-Auswahl `Internes Formular`. + +Der Nutzer erstellt ein internes Formular fuer Mitarbeitende, z. B. Materialbedarf oder interne Meldung. + +## Inhalt + +- Formularname `Materialbedarf melden` +- Badge `Nur intern` +- Hinweis `Kein oeffentlicher Link` +- Zuständiges Team `Lager & Einkauf` +- Fragenkarten: + - Mitarbeiter + - Bereich + - Dringlichkeit + - Material / Problem + - Beschreibung + - Foto / Datei + - Wunschdatum + +## Verhalten + +- Kein Public-Link-Fokus. +- Keine Lead-Pipeline. +- Kein Mapping sichtbar. +- Nutzer denkt: `Ich sammle interne Meldungen sauber ein.` + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit + +Qualitaetsregel: + +- Nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation. +- Liegt im selben Flow neben `ADV-S01-2 Form-Builder Canvas 2`. +- Wiederhergestellte Layout-Version vom 2026-07-07; alte kaputte Subframe-ID wurde ersetzt. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md new file mode 100644 index 00000000..5bbf6859 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md @@ -0,0 +1,661 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: ADV-S01 +screen: Form-Builder Canvas +typ: Bespoke Builder +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit" +--- + +# ADV-S01 - Form-Builder Canvas + +## Ziel + +Interne Nutzer bauen, konfigurieren, pruefen und veroeffentlichen ein Formular an einem Arbeitsort. + +Der Screen muss Feldaufbau, Validierung, Conditional Logic, Preview, Sharing und Post-Submit-Actions sichtbar machen, ohne in mehrere neue Routen zu zerfallen. + +## Pattern / Archetyp + +BESPOKE Builder. + +Nutzt A4 Form/Input-Kit fuer die Feldtypen und A7 Zustands-Kit fuer Empty/Loading/Error/Permission. + +## Arbeitsbereiche + +Dies ist keine finale Layout-Vorgabe, sondern die Arbeitslogik fuer David. + +| Bereich | Zweck | Sichtbarkeit | +|---|---|---| +| Header / Statusbar | Form-Name, Status, Save, Preview, Publish, Share. | dauerhaft sichtbar | +| Feld-Palette | 12 Feldtypen hinzufuegen. | primaer | +| Canvas | Feldliste in Reihenfolge, Drag-and-Drop, Empty State, Feldfehler. | primaer | +| Feld-Inspector | ausgewaehltes Feld konfigurieren. | primaer | +| Logic | Wenn-Dann-Regeln fuer sichtbare Felder. | Sekundaer-Tab/Panel | +| Actions | Post-Submit-Actions und Field-Mapping. | Sekundaer-Tab/Panel | +| Sharing | Public URL, QR, iFrame. | Sekundaer-Tab/Panel | +| Preview | Public-nahe Vorschau. | Umschaltmodus oder Side Preview | +| Settings | Slug, Success, Redirect, Branding, technische Public-Settings. | Sekundaer-Tab/Panel | + +Empfehlung: Der Screen soll sich wie ein Builder anfuehlen, nicht wie eine lange Settings-Seite. Palette, Canvas und Inspector sind die Arbeitsmitte. Alles andere ist nah dran, aber nicht dauernd gleich laut. + +## Detail-Brainstorming S01 + +Status: Arbeitsentwurf fuer David. Nach Review vom 2026-07-06 wurde die Interaktionslogik nachgezogen; finale Subframe-Freigabe bleibt offen. + +Ziel dieses Blocks: Den riesigen Builder-Umfang so aufteilen, dass David daraus einen echten Subframe-Frame bauen kann, ohne dass wichtige Produktentscheidungen im Kopf bleiben. + +### Layout-Optionen + +| Option | Aufbau | Vorteil | Risiko | Empfehlung | +|---|---|---|---|---| +| D | Feste Builder-Shell: links Palette, Mitte Canvas, rechts Inspector; oben Header; sekundaere Modi als Tabs/Drawer. | Fuehlt sich wie ein echter Builder an, alle Kernaktionen sind nah beieinander. | Dichte hoch; braucht gute visuelle Hierarchie. | Empfohlen fuer den Advanced Builder. | +| B | Getrennte Seiten/Tabs: Felder, Logic, Actions, Sharing, Settings, Preview. | Ruhiger je Bereich. | Zerlegt den Canvas, mehr Navigationslast, weniger Bespoke-Gefuehl. | Nicht fuer v1-Hauptscreen. | +| C | Canvas + alles andere in Modals. | Hauptscreen wirkt leerer. | Viele Modal-Wechsel, Mapping und Preview werden unhandlich. | Nur fuer Confirm-/Blocker-Dialoge. | + +Arbeitsentscheidung: S01 soll als **Builder-Shell** gedacht werden, nicht als Settings-Seite. Der primaere Arbeitszustand zeigt Palette, Canvas und Inspector gleichzeitig. Logic, Actions, Sharing, Preview und Settings sind Modi am selben Datensatz. + +### Empfohlene Bildschirmaufteilung + +| Zone | Inhalt | Verhalten | +|---|---|---| +| Topbar | Breadcrumb, Form-Name, Status, Save, Preview, Publish, Share, More. | Bleibt dauerhaft sichtbar. | +| Linke Palette | Feldtypen, Such-/Filtermöglichkeit, Templates/Abschnitte falls erlaubt. | Schmal, scanbar, Drag oder Klick fuegt Feld hinzu. | +| Canvas-Mitte | Feldliste, Dropzonen, Feldkarten, Empty State, Fehleranker. | Hauptarbeitsflaeche; Auswahl steuert rechten Inspector. | +| Rechter Inspector | Eigenschaften des ausgewaehlten Felds oder Form-/Modus-Einstellungen. | Kontextsensitiv, kein leerer rechter Bereich. | +| Modus-Leiste | Builder, Logic, Actions, Sharing, Preview, Settings. | Als Tabs/Segment im Arbeitsbereich oder rechts oben; keine neuen Routen. | +| Bottom/Status-Hinweis | Unsaved Changes, letzte Speicherung, Publish-Blocker kurz. | Dezent, damit es nicht mit Canvas konkurriert. | + +### Modus-Matrix + +| Modus | Hauptfrage | Was David zeigen sollte | Eigener Screen? | +|---|---|---|---| +| Builder | Welche Felder hat das Formular und wie sind sie konfiguriert? | Palette, Canvas, Inspector. | nein, Kern von S01 | +| Logic | Wann werden Felder angezeigt oder verborgen? | Regel-Liste, Regel-Editor, kaputte Referenzen, Test-Hinweise. | nein | +| Actions | Was passiert nach Submit? | Action-Liste, Mapping, Test/Preview, Warnungen. | nein | +| Sharing | Wie wird das Formular verteilt? | Public URL, QR, iFrame, Copy-Aktionen, Publish-Hinweis. | nein | +| Preview | Wie sieht das Public Form aus? | Public-nahe Vorschau, Desktop/Mobile-Umschalter, Logic live. | nein, aber im S01 klar sichtbar | +| Settings | Welche Form-Stammdaten steuern die Public-Version? | Slug, Beschreibung, Success, Redirect, Close/Limit, Branding. | nein | + +Empfehlung: Builder bleibt Default. Preview darf prominent sein, aber nicht die Feldbearbeitung verdraengen. + +## Detail: Interaktionslogik / Was passiert nach Klick? + +Diese Nacharbeit beantwortet Davids Review-Hinweis vom 2026-07-06. S01 muss nicht jede kleine UI-Ebene als eigenen Screen bauen, aber die wichtigsten Klicks brauchen eine klare Entscheidung: inline, Inspector, Menue, Panel/Drawer, Popover oder Confirm-Dialog. + +### Grundprinzipien + +| UI-Form | Wann verwenden? | Regel fuer S01 | +|---|---|---| +| Inline / Canvas | Schnelle direkte Manipulation am Feld. | Auswahl, Drag, Pflicht-Quicktoggle, Fehleranker bleiben im Canvas. | +| Rechter Inspector | Alles, was ein Feld oder ein gewaehltes Objekt dauerhaft konfiguriert. | Feld bearbeiten passiert hier, nicht im Modal. | +| 3-Punkte-Menue | Sekundaere Aktionen auf Feld-/Action-/Regel-Karten. | Duplizieren, Loeschen, Deaktivieren, Drchivieren-Einstiege. | +| Panel / Drawer im S01 | Komplexere Konfiguration mit mehreren Feldern. | Logic-Regel, Action-Detail, Sharing, Settings bleiben im selben Screen. | +| Popover | Kurze Auswahl oder kurzer Statuscheck. | Action-Typ waehlen, Publish-Kurzcheck, Copy/Share-Hilfe. | +| Confirm-Dialog | Destruktive oder public-wirksame Aktionen. | Loeschen mit Abhaengigkeiten, Unpublish, Archive, ungespeichert verlassen. | +| Toast | Ergebnisfeedback ohne Entscheidung. | Gespeichert, kopiert, veroeffentlicht, dupliziert. | + +Arbeitsentscheidung: Routinearbeit bleibt im Builder. Modals sind nur fuer echte Risiko-Momente erlaubt. + +### Klick-Matrix + +| Aktion | Einstieg | Was passiert nach Klick? | UI-Form | Eigener Subframe-Frame? | +|---|---|---|---|---| +| Feld per Palette anklicken | Linke Palette | Feld wird am Ende eingefuegt, markiert und im Inspector geoeffnet. | Inline + Inspector | nein | +| Feld per Drag hinzufuegen | Linke Palette -> Canvas | Dropzonen erscheinen, Feld landet an Position, danach selected. | Canvas-Zustand | nein | +| Feld auswaehlen | Feldkarte | Fokusrahmen auf Karte, rechter Inspector zeigt Basisdaten. | Inline + Inspector | nein | +| Feld bearbeiten | Inspector | Label, Key, Pflichtfeld, Optionen, Validation usw. werden rechts bearbeitet. | Inspector | nein | +| Pflichtfeld schnell setzen | Feldkarte oder Inspector | Toggle aendert Pflichtstatus, Dirty State wird gesetzt. | Inline | nein | +| Feld duplizieren | Feldkarte-Aktion oder 3-Punkte-Menue | Kopie entsteht unter Original, neuer `field_key` wird vorgeschlagen, Kopie ist selected. | Menue + Toast | nein | +| Feld loeschen ohne Abhaengigkeit | 3-Punkte-Menue oder Gefahrenzone | Kurzer Confirm ist optional; danach Feld entfernen und Toast zeigen. | Menue/Confirm klein | nur dokumentieren | +| Feld loeschen mit Logic/Action-Bezug | 3-Punkte-Menue oder Gefahrenzone | Confirm zeigt betroffene Regeln/Actions; nach Loeschen werden Referenzen markiert oder geloescht. | Confirm-Dialog | nur dokumentieren | +| Feld verschieben | Drag Handle | Reihenfolge aendert sich, Dropziel sichtbar, Dirty State. | Canvas-Zustand | nein | +| Feld einklappen | Feldkarte | Karte wird kompakt, bleibt in Reihenfolge sichtbar. | Inline | nein | +| Fehler anklicken | Summary oder Feldkarte | Scroll/Focus zum betroffenen Feld und passenden Inspector-Abschnitt. | Inline Navigation | nein | +| Logic-Modus oeffnen | Modus-Leiste | Canvas bleibt Kontext, Logic-Liste/Editor wird als Arbeitsbereich sichtbar. | Panel im S01 | nein | +| Logic-Regel anlegen | Button im Logic-Modus | Neue Regel startet als Detailbereich im Panel; kein Modal. | Panel/Drawer | nur dokumentieren | +| Logic-Regel bearbeiten | Regelkarte | Detailbereich oeffnet/rechts aktualisiert sich. | Panel/Inspector | nein | +| Logic-Regel deaktivieren | Toggle auf Regelkarte | Regel bleibt sichtbar, wirkt aber nicht; kein Confirm. | Inline | nein | +| Logic-Regel loeschen | 3-Punkte-Menue | Bei aktiver/published Form Confirm, sonst kleine Menue-Aktion mit Undo/Toast. | Menue + Confirm nach Risiko | nur dokumentieren | +| Actions-Modus oeffnen | Modus-Leiste | Action-Liste und Detailbereich erscheinen im selben Builder. | Panel im S01 | nein | +| Post-Submit-Action hinzufuegen | Button im Actions-Modus | Typ-Auswahl oeffnet als kleines Auswahlpanel/Popover, danach Detailkonfiguration. | Popover + Panel/Drawer | nur dokumentieren | +| Action bearbeiten | Actionkarte | Detailpanel zeigt Ziel, Mapping, Test und Warnungen. | Panel/Drawer | nein | +| Field-Mapping setzen | Action-Detail | Mapping-Zeilen werden inline bearbeitet. | Inline im Panel | nein | +| Action testen | Action-Detail | Ergebnis erscheint inline im Action-Detail, zusaetzlich Toast bei Erfolg. | Inline + Toast | nein | +| Action deaktivieren | Toggle auf Actionkarte | Action bleibt sichtbar, wird beim Submit nicht ausgefuehrt. | Inline | nein | +| Action loeschen | 3-Punkte-Menue | Confirm, wenn Action aktiv/published oder Mapping besitzt. | Confirm-Dialog | nur dokumentieren | +| Sharing oeffnen | Header-Share oder Modus-Leiste | Sharing-Panel mit URL, QR, iFrame wird sichtbar. | Panel im S01 | nein | +| Public URL kopieren | Sharing-Panel | Copy-Aktion, danach Toast. | Button + Toast | nein | +| QR/iFrame kopieren | Sharing-Panel | Copy/Download, danach Toast; kein Modal. | Button + Toast | nein | +| Sharing im Draft | Sharing-Panel | URL/QR/iFrame ausgegraut, Publish-Hinweis und Sprung zu Publish/Settings. | Inline Hinweis | nein | +| Preview oeffnen | Header oder Modus-Leiste | Builder wechselt in Public-nahe Vorschau mit Desktop/Mobile-Umschalter. | Modus im S01 | nein | +| Settings oeffnen | Modus-Leiste | Slug, Success, Redirect, Branding und Public-Settings erscheinen im Panel/Inspector. | Panel im S01 | nein | +| Publish klicken | Header | Publish-Check laeuft inline; bei Blockern Summary mit Sprungzielen. | Inline Check / Popover | nur dokumentieren | +| Publish erfolgreich | Header | Status wechselt zu Published, Public URL aktiv, Toast. | Statuswechsel + Toast | nein | +| Publish mit Warnungen | Header | Nicht-blockierende Warnungen erscheinen vor Bestaetigung. | Popover/Inline Summary | nur dokumentieren | +| Unpublish klicken | Header/More | Confirm erklaert, dass Public-Link nicht mehr erreichbar ist. | Confirm-Dialog | nur dokumentieren | +| Archive klicken | More-Menue | Confirm, weil Bearbeitung/Public-Kontext endet. | Confirm-Dialog | nur dokumentieren | +| Weg navigieren mit Dirty State | Zurueck/Breadcrumb/Routewechsel | Warnung vor ungespeicherten Aenderungen. | Confirm-Dialog | nur dokumentieren | + +### Zusaetzliche dokumentierte Zustaende nach Review + +Diese Zustaende muessen bewusst beschrieben werden. D07, D08 und D09 sind nach aktueller Empfehlung zusaetzliche Subframe-Zustaende; die restlichen bleiben dokumentiert. + +| ID | Zustand / Ebene | UI-Form | Empfehlung | +|---|---|---|---| +| D01 | [[D01 Sharing Panel URL QR iFrame]] | Panel im S01 | In S01 integrieren, kein eigener Screen. | +| D02 | [[D02 Post-Submit Actions]] | Panel im S01 | In S01 integrieren, kein eigener Screen. | +| D03 | [[D03 Conditional Logic Editor]] | Panel im S01 | In S01 integrieren, kein eigener Screen. | +| D06 | [[D06 Feldkarten Menue]] | 3-Punkte-Menue | In S01 dokumentieren, kein eigener Screen. | +| M01 | [[M01 Feld loeschen Confirm]] | Kleiner Confirm-Dialog | Nur als Zustand dokumentieren; extra Frame nur wenn David ihn sehen will. | +| D07 | [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | Panel/Drawer im S01 | Als zusaetzlichen Subframe-Zustand bauen, damit Logic visuell pruefbar ist. | +| D08 | [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | Panel/Drawer im S01 | Als zusaetzlichen Subframe-Zustand bauen, weil Mapping komplex ist. | +| D09 | [[93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | Inline Banner/Popover | Als zusaetzlichen Subframe-Zustand bauen, weil Publish kritisch ist. | +| M02 | [[M02 Unpublish Confirm]] | Confirm-Dialog | Nur dokumentieren, weil public-wirksam. | +| M03 | [[M03 Archive Confirm]] | Confirm-Dialog | Nur dokumentieren, nicht Hauptscreen. | +| M04 | [[M04 Unsaved Changes Confirm]] | Confirm-Dialog | Standardzustand, nur dokumentieren. | +| D10 | [[D10 Builder Interaktionsfaelle]] | Case-Matrix | Auswahlfolgen, vergessene Pflichtteile, Dropdowns, Popovers und Folgefehler dokumentieren. | + +### Antworten auf Davids Beispiel-Fragen + +| Frage | Antwort fuer D-FORM | +|---|---| +| Feld bearbeiten: inline im rechten Inspector oder eigenes Modal? | Rechter Inspector. Kein Modal fuer normale Feldbearbeitung. | +| Feld loeschen/duplizieren: Feldkarte, 3-Punkte-Menue oder Confirm? | Duplizieren ueber Feldkarte/3-Punkte-Menue ohne Confirm. Loeschen ueber 3-Punkte-Menue oder Gefahrenzone; Confirm bei Abhaengigkeiten oder published Risiko. | +| Logic-Regel anlegen: gleiches Panel, Drawer oder Modal? | Gleiches Logic-Panel bzw. rechter Detailbereich im S01. Kein Modal. | +| Post-Submit-Action hinzufuegen: Inline, Drawer oder Modal? | Typauswahl als kleines Auswahlpanel/Popover; Konfiguration im Action-Detail-Panel/Drawer. | +| Sharing oeffnen: Tab/Panel, Popover oder Modal? | Panel/Modus im S01. Copy-Aktionen nur mit Toast. | +| Publish/Unpublish: Inline-Check, Popover oder Confirm? | Publish als Inline-Check mit Summary/Popover; Unpublish als Confirm-Dialog. | + +### Was-passiert-wenn-Faelle + +Die Detailfaelle fuer Auswahlfolgen, vergessene Zwischenschritte, Checkboxen, Dropdowns, Bild/Datei-Folgen, Modaltexte und Publish-Blocker liegen in [[D10 Builder Interaktionsfaelle]]. + +Merksatz fuer den Advanced Builder: Jede Auswahl, die Folgefelder veraendert, muss sichtbar machen, was danach wichtig wird. Wenn Nutzer einen mittleren Pflichtschritt vergessen, bleibt der Fehler lokal sichtbar und wird beim Publish/Test mit konkretem Sprungziel aufgegriffen. + +## Detail: Header / Statusbar + +| Element | Zustand / Inhalt | Aktion / Ergebnis | +|---|---|---| +| Breadcrumb | Formulare > Formularname | Zur Forms-Liste zurueck, aber Forms-Liste ist nicht Teil von D-FORM. | +| Form-Name inline | Name, Dirty Marker, ggf. fehlender Name | Klick/Enter bearbeitet Name; leerer Name blockiert Publish. | +| Status-Badge | Draft, Published, Archived, Unpublished changes, Error | Erklaert, ob Public-Link aktiv ist. | +| Autosave/Save | Ungespeichert, Speichert, Gespeichert, Fehler | Speichert Form-Stammdaten, Felder, Logic, Actions. | +| Preview | Desktop/Mobile/Public-nahe Vorschau | Oeffnet Preview-Modus im selben Builder. | +| Publish | Draft -> Published | Startet Publish-Check; bei Blockern kein Publish. | +| Unpublish | Published -> Draft/private | Zeigt Warnung, weil Public-Link danach nicht mehr nutzbar ist. | +| Share | URL/QR/iFrame | Oeffnet Sharing-Modus; bei Draft mit Hinweis. | +| More-Menue | Duplizieren, Drchivieren, ggf. Vorlage erstellen | Keine destruktive Aktion ohne Confirm. | + +### Header-Zustaende + +| Zustand | UI-Hinweis | Naechste Aktion | +|---|---|---| +| Entwurf ohne Fehler | Draft-Badge, Save aktiv wenn dirty | Weiter bearbeiten oder publishen. | +| Entwurf mit Blockern | Validation-Summary sichtbar | Fehler anklicken und beheben. | +| Published ohne Aenderungen | Published-Badge, Public-Link aktiv | Teilen oder unpublishen. | +| Published mit ungespeicherten Aenderungen | Hinweis "Aenderungen noch nicht veroeffentlicht" | Speichern/Publish-Update pruefen. | +| Archived | Bearbeitung eingeschraenkt oder read-only | Duplizieren oder zur Liste zurueck. | +| Save fehlgeschlagen | Banner/Inline in Headernaehe | Erneut speichern. | + +## Detail: Feld-Palette + +Die Palette soll nicht wie eine lange Komponentenliste wirken, sondern wie ein schneller Baukasten. + +| Gruppe | Feldtypen | Notiz | +|---|---|---| +| Text & Kontakt | Text, Textarea, Email, Telefon | Die haeufigsten Felder oben. | +| Zahlen & Datum | Zahl, Waehrung, Datum, Datum-Range | Mit kurzem Format-Hinweis. | +| Auswahl | Select, Multi-Select, Boolean | Radio/Checkbox-Liste sind Darstellungsvarianten, keine extra Feldtypen. | +| Upload | Datei | Foto ist mobile Upload-Variante. | + +### Palette-Aktionen + +| Aktion | Ergebnis | +|---|---| +| Feld anklicken | Feld wird am Ende des Canvas eingefuegt und direkt ausgewaehlt. | +| Feld ziehen | Dropzone im Canvas erscheint; Feld wird an Position eingefuegt. | +| Feld suchen | Palette filtert nach Feldtyp/Use Case. | +| Feld disabled | Tooltip erklaert, warum Feldtyp nicht verfuegbar ist. | + +### Palette-Abgrenzung + +| Element | In Palette? | Begruendung | +|---|---|---| +| mCaptcha/Honeypot | nein | Systemschutz, kein normales Formularfeld. | +| Signature | nein fuer v1 | Signatur-Kontext bleibt separat/offen. | +| Address | nein fuer v1 | Haengt an Maps/Autocomplete, v2 oder Spezialbaustein. | +| Section Header / Description | offen | Kann nuetzlich sein, ist aber kein A4-12-Feldtyp. Als "Content Block" spaeter pruefen. | +| Hidden Field | nein fuer v1 | Personalisierte Links/URL-Parameter sind v2. | + +## Detail: Canvas + +Der Canvas ist keine freie Zeichenflaeche, sondern eine sortierbare Formularstruktur. + +| Canvas-Element | Zweck | +|---|---| +| Formular-Intro | Titel/Beschreibung aus Stammdaten als Kontext, nicht voll editieren im Canvas. | +| Feldkarte | Label, Typ, Pflichtmarker, kurzer Helptext, Fehlerstatus, Aktionen. | +| Dropzone zwischen Feldern | Zeigt, wo ein neues/gezogenes Feld landet. | +| Ausgewaehltes Feld | Sichtbarer Fokusrahmen; Inspector zeigt Details. | +| Inline-Fehler | Direkt an Feldkarte, wenn Label/Optionen/Validation fehlen. | +| Canvas-Summary | Oben im Canvas: Anzahl Felder, sichtbare Fehler, Logic-Warnungen. | + +### Canvas-Aktionen + +| Aktion | Erwartetes Verhalten | +|---|---| +| Feld auswahlen | Rechts oeffnet Field Inspector. | +| Feld verschieben | Reihenfolge aendert sich; Dirty State wird gesetzt. | +| Feld duplizieren | Kopie unter Original; neuer field_key wird vorgeschlagen. | +| Feld loeschen | Confirm, wenn Feld in Logic oder Actions verwendet wird. | +| Feld einklappen/ausklappen | Lange Formulare bleiben scanbar. | +| Feld als Pflicht markieren | Schnellaktion oder Inspector-Setting. | +| Fehler anklicken | Springt zum betroffenen Feld/Inspector-Abschnitt. | + +### Canvas-Zustaende + +| Zustand | Darstellung | Umsetzung | +|---|---|---| +| Empty | Grosse Dropzone mit CTA "Feld hinzufuegen"; Beispiel-Felder optional. | Bauen in S01 | +| Dragging | Dropzones sichtbar, Zielposition klar. | In S01 beschreiben | +| Feld selected | Fokusrahmen + Inspector offen. | Bauen | +| Feld invalid | Feldkarte mit Warnung und Summary oben. | Bauen/dokumentieren | +| Lange Liste | Sticky Header, Feldkarten kompakt, ggf. Mini-Navigation. | Beschreiben | +| Referenzbruch | Feldkarte zeigt "Wird in Logic/Action verwendet". | Wichtig fuer Delete/Publish | + +## Detail: Feld-Inspector + +Der Inspector ist der eigentliche Produktivbereich fuer Felddetails. Er braucht klare Sektionen, sonst wird der Builder unlesbar. + +| Inspector-Sektion | Inhalt | Sichtbarkeit | +|---|---|---| +| Basis | Label, field_key, Beschreibung, Placeholder, Pflichtfeld. | immer | +| Darstellung | Breite/Variante, Helptext-Position, Auswahl-Darstellung. | je Feldtyp | +| Optionen | Select/Multi-Select-Optionen, Reihenfolge, Default. | Auswahlfelder | +| Validation | Min/max, Regex, Datei-Typ/Groesse, Custom Error. | je Feldtyp | +| Default | Vorbefuellung, sofern erlaubt. | optional | +| Logic-Hinweis | Welche Regeln dieses Feld nutzen. | wenn betroffen | +| Mapping-Hinweis | Welche Actions dieses Feld verwenden. | wenn betroffen | +| Gefahrenzone | Feld loeschen. | unten, klar getrennt | + +### Field-Key-Regel + +`field_key` soll sichtbar, aber nicht lauter als Label sein. Empfehlung: + +- Automatisch aus Label erzeugen. +- Editierbar in Advanced/Basisdetails. +- Warnung, wenn doppelt oder ungueltig. +- Beim Umbenennen zeigen, ob Actions/Logic betroffen sind. + +## Detail: Feldtypen und Inspector-Properties + +| Feldtyp | Basis-Properties | Spezielle Properties | Validation | +|---|---|---|---| +| Text | Label, Key, Helptext, Placeholder, Pflicht | Einzeilig, Default | min/max Laenge, Regex, Custom Error | +| Textarea | Label, Key, Helptext, Placeholder, Pflicht | Zeilenhoehe, Markdown-Anmutung optional | min/max Laenge, Custom Error | +| Zahl | Label, Key, Helptext, Placeholder, Pflicht | Ganzzahl/Dezimal, Schrittweite | min/max Wert, Custom Error | +| Waehrung | Label, Key, Helptext, Pflicht | Waehrung, Dezimalstellen, Format | min/max Betrag | +| Datum | Label, Key, Helptext, Pflicht | Datum, optional Zeit als v2/Variante | min/max Datum | +| Datum-Range | Label, Key, Helptext, Pflicht | Start-/End-Label, Zeitraum | Ende nach Start, min/max Datum | +| Select | Label, Key, Helptext, Pflicht | Optionen, Default, Darstellung Dropdown/Radio | mind. 1 Option, keine leeren Optionen | +| Multi-Select | Label, Key, Helptext, Pflicht | Optionen, max. Auswahl, Chips/Checkboxen | min/max Auswahl | +| Boolean | Label, Key, Helptext | Checkbox/Toggle, Zustimmungstext | Muss true sein optional | +| Email | Label, Key, Helptext, Placeholder, Pflicht | Formatvalidierung, ggf. Submitter-Email markieren | Email-Format | +| Telefon | Label, Key, Helptext, Placeholder, Pflicht | Land/Format-Hinweis | Telefonformat | +| Datei | Label, Key, Helptext, Pflicht | Erlaubte Dateitypen, max. Groesse, mehrere Dateien, Foto-Hinweis | Datei-Typ, Groesse | + +### Feldtypen-Entscheidungen offen fuer David + +| Frage | Empfehlung | +|---|---| +| URL als eigener Feldtyp? | Nicht in A4-12, fuer v1 als Text mit URL-Validation oder spaeterer Spezialtyp. | +| Foto als eigener Feldtyp? | Nein, als Datei-Upload-Variante mit Mobile-Kamera-Hinweis. | +| Signature als Feldtyp? | Nicht in D-FORM v1, weil Signatur-Wizard/Abnahme eigener Kontext ist. | +| Section Header/Description Block? | Als optionaler Content Block pruefen, aber nicht als Pflichtbestandteil der 12 Feldtypen. | +| Hidden Field? | Raus fuer v1, weil personalisierte Links/URL-Parameter v2 sind. | + +### Feld-Interaktionsfaelle + +Siehe [[D10 Builder Interaktionsfaelle]] fuer: + +- Select-Feld ohne Optionen. +- Datei/Fotofeld mit Upload-, Kamera-, Groessen- und Typ-Hinweisen. +- Field Key wird geaendert und betrifft Logic/Actions. +- Option wird geloescht, obwohl sie in Logic genutzt wird. +- Feldtyp wird nachtraeglich geaendert. + +## Detail: Validation + +Validation muss zwei Ebenen haben: Feldvalidierung beim Bearbeiten und Publish-Validierung fuer das gesamte Formular. + +| Ebene | Beispiele | UI-Form | +|---|---|---| +| Feld-Validation | Label fehlt, Option leer, min > max, Datei ohne erlaubte Typen. | Inline am Feld + Inspector. | +| Form-Validation | Kein sichtbares Feld, Slug fehlt, Slug-Konflikt, kaputte Logic. | Summary-Banner + klickbare Liste. | +| Action-Validation | Pflichtmapping fehlt, Webhook-URL ungueltig, Empfaenger fehlt. | Im Actions-Modus + Publish-Summary. | +| Sharing-Validation | Draft nicht public, iFrame ohne Publish, Allowed-Origin-Warnung. | Im Sharing-Modus. | + +### Publish-Blocker + +| Blocker | Warum blockiert? | Wo zeigen? | +|---|---|---| +| Formularname fehlt | Public/Intern nicht identifizierbar. | Header + Summary | +| Slug fehlt oder Konflikt | Public URL kann nicht erzeugt werden. | Settings + Summary | +| Kein sichtbares Feld | Public Form waere leer. | Canvas Empty + Summary | +| Feld ohne Label | Public Form waere unklar. | Feldkarte + Inspector | +| Select ohne Optionen | Submitter kann nicht antworten. | Feldkarte + Inspector | +| Datum-Range ungueltig | Regel ist widerspruechlich. | Inspector | +| Kaputte Logic-Referenz | Public-Anzeige nicht verlaesslich. | Logic-Modus + Summary | +| Pflichtmapping fehlt | Action wuerde fehlschlagen. | Actions-Modus + Summary | + +### Nicht blockierend, aber warnen + +| Warnung | Grund | +|---|---| +| Required Email ohne Submitter-Email-Markierung | Kann fuer Auto-Match/Antwortmail relevant sein. | +| Datei-Upload ohne Typbeschraenkung | Risiko fuer Public Form. | +| Sehr langes Formular | Public-Conversion/Mobile leidet. | +| Published Form wird stark geaendert | Bestehender Public-Link bleibt aktiv, Aenderung ist relevant. | + +## Detail: Conditional Logic + +V1 soll einfach bleiben: Anzeige/Ausblenden, keine komplexe Verzweigungsmaschine. + +| Element | Inhalt | +|---|---| +| Regelname optional | z. B. "Zeige Upload bei Foto vorhanden". | +| Wenn-Feld | Nur vorhandene Felder, die als Bedingung sinnvoll sind. | +| Operator | ist, ist nicht, enthaelt, enthaelt nicht, ist leer, ist nicht leer. | +| Wert | Abhaengig vom Feldtyp, z. B. Option bei Select. | +| Dann-Aktion | Feld anzeigen oder Feld verstecken. | +| Ziel-Feld | Das Feld, dessen Sichtbarkeit gesteuert wird. | +| Aktiv/Inaktiv | Regel testen oder parken. | + +### Logic-Regeln + +| Fall | UI-Verhalten | +|---|---| +| Bedingungsfeld geloescht | Regel wird rot markiert und blockiert Publish. | +| Ziel-Feld geloescht | Regel wird rot markiert und blockiert Publish. | +| Ziel-Feld required aber versteckt | Hinweis: Pflicht gilt nur wenn sichtbar. | +| Mehrere Regeln fuer ein Feld | Hinweis auf Kombinationslogik; v1 braucht einfache Erklaerung. | +| Regel testen | Preview zeigt, welche Felder live erscheinen/verschwinden. | + +Nicht v1: Multi-Step-Flow, Repeater, Cross-Field-Rechnung, If/Else-Baum, Scoring, A/B-Testing. + +## Detail: Publish / Unpublish + +| Aktion | Ablauf | +|---|---| +| Publish | Nutzer klickt Publish, System prueft Blocker, bei Erfolg Status Published und Public URL aktiv. | +| Publish mit Blockern | Kein Publish; Summary zeigt Fehler mit Sprungziel. | +| Update published Form | Hinweis, dass Aenderungen die public Version betreffen; Save/Publish-Update klar trennen falls noetig. | +| Unpublish | Confirm mit Hinweis, dass Public URL nicht mehr erreichbar ist. | +| Archive | More-Menue, Confirm; nicht als Hauptaktion. | + +Empfehlung: Publish ist kein eigener Screen. Ein Confirm/Popover reicht, solange Blocker klar im Builder sichtbar sind. + +## Detail: Sharing + +Sharing ist v1, aber nur fuer einfache Verteilung. + +| Bereich | Inhalt | Aktion | +|---|---|---| +| Public URL | `app.hivegrid.de/f/{tenant}/{slug}` | Kopieren, oeffnen. | +| QR-Code | QR fuer Public URL | Kopieren/downloaden. | +| iFrame | Embed-Code mit Breite/Hoehe/Auto-Resize-Hinweis | Code kopieren. | +| Publish-Hinweis | Draft/Unpublished zeigt Warnung | Zum Publish springen. | +| v2-Abgrenzung | Personalisierte Links, JS-Snippet | Nicht als aktiver UI-Teil. | + +### Sharing-Zustaende + +| Zustand | Darstellung | +|---|---| +| Draft | URL-Vorschau ausgegraut, Hinweis "erst nach Publish erreichbar". | +| Published | URL, QR, iFrame aktiv. | +| Slug fehlt | Sharing blockiert und verweist auf Settings. | +| Public geschlossen/Limit erreicht | Hinweis, dass Link zwar existiert, Public Form aber blockieren kann. | + +## Detail: Post-Submit-Actions + +Actions sind sichtbar, aber S01 darf nicht wie ein voller Automation-Editor werden. + +| Action-Typ | Zweck in S01 | Konfiguration | +|---|---|---| +| Email an Submitter | Bestaetigung senden. | Empfaengerfeld, Betreff, Nachricht/Template. | +| Email an Team | Intern informieren. | Empfaenger, Betreff, Felder-Auswahl. | +| Lead erstellen | Submission in Lead-Inbox geben. | Mapping: Name, Email, Telefon, Nachricht, Quelle. | +| Kontakt erstellen | CRM-Kontakt anlegen. | Mapping, Duplikat-/Auto-Match-Hinweis. | +| Projekt erstellen | Projekt/Auftrag anlegen. | Pipeline/Status, Pflichtmapping, Verantwortlicher. | +| Task erstellen | Aufgabe erzeugen. | Titel, Beschreibung, Faelligkeit, Assignee. | +| Auto-Match | Bestehende Entitaet per Email/Telefon verknuepfen. | Match-Felder, Fallback. | +| Webhook | Externes System informieren. | URL, Methode falls noetig, Test. | +| Automation-Trigger | M17 Automation starten. | Automation-Auswahl/Trigger. | +| KWP Push | Laut M05 vorhanden, aber KWP v1 raus. | Nicht aktiv in D-FORM v1, hoechstens v2/raus markieren. | + +### Action-UI + +| Element | Zweck | +|---|---| +| Action-Liste | Reihenfolge, Typ, Status, Warnungen. | +| Add Action | Typ-Auswahl mit kurzer Erklaerung. | +| Action-Detail | Ziel, Bedingungen, Mapping, Test. | +| Field-Mapping-Zeilen | Form-Feld -> Ziel-Feld; Pflichtfelder sichtbar. | +| Test/Preview | Zeigt, was bei einer Beispiel-Submission erzeugt wuerde. | +| Action aktiv/inaktiv | Action parken ohne Loeschen. | + +### Action-Blocker + +| Blocker | UI | +|---|---| +| Pflichtmapping fehlt | Warnung an Action + Publish-Summary. | +| Ziel-Pipeline fehlt | Inline im Projekt-Action-Detail. | +| Email-Empfaenger fehlt | Inline im Email-Action-Detail. | +| Webhook-URL ungueltig | Inline + Test disabled. | +| Automation nicht aktiv/verfuegbar | Warnung mit Erklaerung. | + +Nicht in S01 bauen: ActionLog, Re-Run, Fehlerhistorie je Submission. Das gehoert zur Submissions-Ansicht. + +## Detail: Permissions / Read-only + +| Permission / Rolle | Darf sehen | Darf tun | +|---|---|---| +| `forms.basic` | ggf. Submissions, aber nicht Builder-Fokus. | Kein Builder-Hauptflow. | +| `forms.builder` | Builder sehen und bearbeiten. | Felder, Logic, Settings speichern. | +| `forms.publisher` | Builder + Sharing. | Publish/Unpublish, Export/Submissions ausserhalb D-FORM. | +| `forms.admin` | Alles im Builder. | Actions, Templates, administrative Optionen. | + +### Permission-Zustaende in S01 + +| Zustand | UI | +|---|---| +| Keine Builder-Rechte | Permission-State statt Builder; CTA "Admin kontaktieren" oder zurueck. | +| Read-only wegen fehlender Publish-Rechte | Publish disabled mit Tooltip, Bearbeitung ggf. erlaubt. | +| Actions nur Admin | Actions-Modus disabled oder read-only mit Hinweis. | +| Archived Form | Bearbeitung eingeschraenkt; Duplizieren als naechste Aktion. | + +## Daten + +- Form-Stammdaten: Name, Beschreibung, Slug, Status, Subtype. +- Form-Felder: Reihenfolge, Feldtyp, Label, Beschreibung/Hilfe, Placeholder, Pflichtfeld. +- Feldtypen v1: Text, Textarea, Zahl, Waehrung, Datum, Datum-Range, Select, Multi-Select, Boolean, Email, Telefon, Datei. +- Feld-Konfiguration: Optionen, Default, Validation, Datei-/Foto-Regeln je Feldtyp. +- Conditional Logic: einfache Wenn-Dann-Regeln. +- Live-Vorschau: gerenderte Form in Public-nahem Zustand. +- Sharing: Public URL, QR-Code, iFrame-Code. +- Post-Submit-Actions: Lead/Kontakt/Projekt/Task, Email, Webhook, Automation-Trigger, Auto-Match. +- Field-Mapping je Action. +- Publish-Status und moegliche Publish-Blocker. + +## Header / Statusbar + +| Element | Zweck | +|---|---| +| Form-Name inline | schnell umbenennen. | +| Status-Badge | Draft, Published, Archived, Fehler. | +| Save | Entwurf sichern. | +| Preview | Public-nahe Vorschau oeffnen/umschalten. | +| Publish/Unpublish | Public-Verfuegbarkeit steuern. | +| Share | URL, QR und iFrame erreichbar machen. | +| Validation-Summary | zeigt, ob Publish blockiert ist. | + +## Aktionen + +- Feld aus Palette hinzufuegen. +- Feld per Drag-and-Drop verschieben. +- Feld auswaehlen. +- Feld bearbeiten. +- Feld duplizieren. +- Feld loeschen. +- Feld als Pflichtfeld markieren. +- Validierung konfigurieren. +- Optionen fuer Select/Multi-Select/Radio pflegen. +- Conditional-Logic-Regel anlegen, bearbeiten, deaktivieren, loeschen. +- Vorschau ansehen. +- Form speichern. +- Form publishen/unpublishen. +- Public URL kopieren. +- QR-Code kopieren/downloaden. +- iFrame-Code kopieren. +- Post-Submit-Action hinzufuegen. +- Field-Mapping setzen. +- Webhook testen oder validieren. + +## Feldtypen v1 + +| Feldtyp | Was David sichtbar machen sollte | +|---|---| +| Text | Label, Placeholder, Pflicht, min/max Laenge. | +| Textarea | Label, Helptext, Pflicht, min/max Laenge. | +| Zahl | Label, min/max, Dezimal/Ganzzahl-Hinweis. | +| Waehrung | Betrag, Waehrung/Format, min/max. | +| Datum | Date-Picker, Pflicht, min/max Datum optional. | +| Datum-Range | Start/Ende, Validierung Ende nach Start. | +| Select | Optionen, ein Wert. | +| Multi-Select | Optionen, mehrere Werte. | +| Boolean | Checkbox/Toggle, Pflicht-/Zustimmungsfall. | +| Email | Email-Validation automatisch. | +| Telefon | Telefonformat-Hinweis. | +| Datei | Upload, erlaubte Typen, max. Groesse; Foto als mobile Upload-Variante. | + +Anti-Spam-Felder wie Honeypot/mCaptcha sind Systemschutz, nicht Teil der sichtbaren 12-Feld-Palette. + +## Logic-Arbeitsbereich + +| Element | Zweck | +|---|---| +| Regel-Liste | Alle aktiven Regeln scannen. | +| Neue Regel | Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken. | +| Feld-Auswahl | Nur vorhandene Felder; kaputte Referenzen sichtbar markieren. | +| Operatoren | v1 simpel: ist, ist nicht, enthaelt, ist leer/nicht leer. | +| Ziel-Feld | Welches Feld wird angezeigt oder verborgen. | +| Regel aktiv/inaktiv | Regel testen oder parken. | + +Nicht bauen: komplexe If/Else-Baeume, Multi-Step-Flow, Cross-Field-Rechnung. + +## Post-Submit-Actions Schnitt + +| Bereich | In S01 zeigen? | Notiz | +|---|---|---| +| Action-Typ waehlen | ja | Lead/Kontakt/Projekt/Task, Email, Webhook, Automation-Trigger, Auto-Match. | +| Reihenfolge | ja | Actions laufen in definierter Reihenfolge. | +| Aktiv/Inaktiv | ja | Einzelne Actions deaktivierbar. | +| Field-Mapping | ja | Form-Feld -> Ziel-Feld, Pflichtwarnungen sichtbar. | +| Bedingung pro Action | optional | Nur einfache Filter, kein voller Logic-Builder. | +| Test/Preview | ja | Was wuerde erzeugt/gesendet? | +| Voller ActionLog/Re-Run | nein | Gehoert zur Submissions-Ansicht, nicht zum Builder-Canvas. | + +## Sharing-Arbeitsbereich + +| Element | Zweck | +|---|---| +| Public URL | Link kopieren, ggf. oeffnen. | +| QR-Code | Fuer Print/Monteure/Kundenkontakt. | +| iFrame-Code | Einbettung auf Website. | +| Publish-Hinweis | Sharing ist erst sinnvoll, wenn published. | +| v2-Hinweis intern | Personalisierte Links und JS-Snippet nicht in v1. | + +## Settings-Arbeitsbereich + +| Element | Zweck | +|---|---| +| Slug | Public URL steuern. | +| Success Message | Text nach Submit. | +| Redirect URL | optionales Weiterleitungsziel. | +| Tenant Branding / Theme | Logo/Farbe/Fallback, soweit v1 vorgesehen. | +| Allowed Origins | falls iFrame/API eingeschraenkt wird. | +| Submission Limit / Close Date | optional, falls Dev fuer v1 bestaetigt. | + +## Banner / Hinweise + +- Publish-Blocker-Banner: zeigt konkrete fehlende Punkte, z. B. kein sichtbares Feld, fehlender Slug, ungueltige Logic-Regel. +- Unsaved-Changes-Hinweis: wenn Nutzer weg navigiert oder publizieren will. +- Reuse-Hinweis optional: Public Renderer wird auch fuer HR/Booking-Intake wiederverwendet, aber nicht als sichtbarer Feature-Text im UI. + +## Toasts / Action-Feedback + +- Gespeichert. +- Veroeffentlicht. +- Entwurf deaktiviert/unpublished. +- Public URL kopiert. +- QR-Code kopiert/downloadet. +- iFrame-Code kopiert. +- Action gespeichert. +- Test-Webhook erfolgreich/fehlgeschlagen. + +## Meldungsentscheidung + +| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | +|---|---|---|---|---| +| Keine Felder im Canvas | Empty State im Canvas | nein | Bauen | Feld aus Palette hinzufuegen. | +| Feld ohne Label | Inline am Feld + Summary | ja fuer Publish | Nur dokumentieren | Feld konkret benennen. | +| Required Email ohne Email-Validation | Inline-Warnung | nein/Publish-Warnung | Nur dokumentieren | Vorschlag: Email-Validation hinzufuegen. | +| Logic-Regel referenziert geloeschtes Feld | Inline im Logic-Panel + Summary | ja fuer Publish | Nur dokumentieren | Regel reparieren oder deaktivieren. | +| Ungueltige Webhook-URL | Inline im Action-Panel | ja fuer Action | Nur dokumentieren | URL muss http/https und erreichbar sein. | +| Publish erfolgreich | Toast + Statuswechsel | nein | Nur dokumentieren | Veroeffentlicht. | +| Kopieren erfolgreich | Toast | nein | Nur dokumentieren | In Zwischenablage kopiert. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Leer | Neues Formular ohne Felder; Canvas zeigt Drop-Zone und CTA. | Bauen | +| Laden | Form-Definition und Actions werden geladen. | Wiederverwenden | +| Fehler | Form kann nicht geladen werden. | Nur dokumentieren | +| Keine Berechtigung | Nutzer hat keine `forms.builder`/`forms.publish`-Rechte. | Nur dokumentieren | +| Dirty State | Ungespeicherte Aenderungen. | Nur dokumentieren | +| Publish blocked | Form hat Fehler, die Public-Version verhindern. | Nur dokumentieren | + +## Blockierende Error States + +| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion | +|---|---|---|---| +| Publish blockiert | Banner mit Liste der fehlenden Punkte. | Fehler beheben | Als Entwurf speichern | +| Keine Berechtigung | Permission-State mit Klartext. | Zurueck zu Formularen | Admin kontaktieren | +| Form nicht gefunden | Fehler-State. | Zurueck zu Formularen | - | + +## Permissions / Gates + +- `forms.builder`: Felder und Konfiguration bearbeiten. +- `forms.publisher`: Publish/Unpublish und Sharing aktivieren. +- `forms.admin`: Actions, Mapping und administrative Optionen. + +## Subframe + +- [Subframe](https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit) + +Layout-Regel: Der Advanced Builder nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar nachbauen. + +## Notizen + +Der Builder soll nicht den Automation-Flow-Editor nachbauen. Post-Submit-Actions brauchen nur Reihenfolge, Typ, Ziel und Field-Mapping. + +Conditional Logic ist v1, aber eng: Wenn Feld Y = Wert Z, dann Feld X anzeigen. Kein Repeater, kein Multi-Step, keine Cross-Field-Validation. + +Wichtig fuer David: Der Screen ist eine Arbeitsflaeche, kein Marketing-Screen. Dichte ist erlaubt, solange die Hauptarbeit gut scannbar bleibt. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90b ADV Form-Builder Canvas 2.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90b ADV Form-Builder Canvas 2.md new file mode 100644 index 00000000..91e05c4d --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90b ADV Form-Builder Canvas 2.md @@ -0,0 +1,34 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: ADV-S01-2 +screen: Form-Builder Canvas 2 +typ: Advanced / Referenz +umsetzung: Referenz behalten +status: Subframe Draft / aktuell nicht Hauptfluss +route: /forms/:id/edit +subframe: "https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit" +--- + +# ADV-S01-2 - Form-Builder Canvas 2 + +## Status + +Diese Seite ist aktuell **nicht Teil des Hauptflusses**. + +Sie bleibt als Advanced-/Referenzscreen erhalten, falls David oder spaetere Umsetzung die umfangreichere Builder-Logik pruefen will. + +## Warum nicht Hauptfluss + +- Zu viel sichtbare Komplexitaet fuer normale Handwerksbetriebe. +- S02 ist aktuell die empfohlene Google-Forms-nahe Hauptvariante. +- Logic, Actions und Publish-Blocker werden in S02 einfacher geloest. + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit + diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md new file mode 100644 index 00000000..bf532cba --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md @@ -0,0 +1,98 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D07 +screen: Logic Regel Detail +typ: Panel-Zustand in S01 +umsetzung: Bauen +status: Subframe Draft / Review offen +route: in S01 Logic-Modus, kein eigener Screen +subframe: "https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit" +--- + +# D07 - Logic Regel Detail + +## Ziel + +Interne Nutzer koennen eine einzelne Sichtbarkeitsregel sauber anlegen oder bearbeiten. + +## Pattern / Archetyp + +Detailpanel / Drawer innerhalb des Logic-Modus von S01. + +## Daten + +- Regelname optional +- Bedingungsfeld +- Operator +- Wert +- Dann-Aktion: anzeigen oder verstecken +- Zielfeld +- Status aktiv/inaktiv +- Preview-/Testhinweis + +## Aktionen + +- Bedingungsfeld waehlen +- Operator waehlen +- Wert setzen +- Zielfeld waehlen +- Aktion anzeigen/verstecken waehlen +- Regel speichern +- Regel testen +- Regel deaktivieren +- Regel loeschen + +## Verhalten + +- `Neue Regel` oeffnet dieses Detailpanel im selben S01-Screen. +- Keine Modal-Kaskade fuer Logic. +- Feldauswahlen zeigen nur vorhandene passende Felder. +- Wenn ein referenziertes Feld fehlt, bleibt die Regel sichtbar und markiert kaputt. +- Test/Preview kann direkt den Preview-Modus beeinflussen oder eine kurze Vorschau im Panel zeigen. +- Detailfaelle fuer unvollstaendige Auswahlfolgen stehen in [[D10 Builder Interaktionsfaelle]]. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Neue Regel | leeres Detailpanel mit Pflichtfeldern. | Nur dokumentieren | +| Gueltige Regel | alle Referenzen vorhanden. | Nur dokumentieren | +| Unvollstaendig | Pflichtteil fehlt; Regel kann nicht aktiv werden. | Nur dokumentieren | +| Referenz kaputt | Bedingungs- oder Zielfeld fehlt. | Nur dokumentieren | +| Testmodus | Preview zeigt Wirkung der Regel. | In S01 dokumentieren | + +## Auswahlfolge im Panel + +| Schritt | Verhalten | +|---|---| +| 1. Wenn-Feld | Nach Auswahl wird das Operator-Dropdown passend zum Feldtyp aktiv. | +| 2. Operator | Bei `ist leer`/`ist nicht leer` entfaellt das Wertfeld. Bei Select/Boolean wird das Wertfeld zur passenden Auswahl. | +| 3. Wert | Pflicht nur bei Operatoren, die einen Wert brauchen. | +| 4. Dann-Aktion | `anzeigen` oder `verstecken`; keine komplexe If/Else-Struktur. | +| 5. Zielfeld | Darf nicht identisch mit dem Bedingungsfeld sein. | +| 6. Aktiv | Erst aktivierbar, wenn alle Pflichtteile gueltig sind. | + +## Fehlerlogik + +| Fehler | Anzeige | Folge | +|---|---|---| +| Operator fehlt | Inline unter Operator. | Test disabled, aktive Regel nicht moeglich. | +| Wert fehlt | Inline unter Wertfeld. | Test disabled, Publish blockiert nur bei aktiver Regel. | +| Zielfeld fehlt | Inline unter Zielfeld. | Regel unvollstaendig. | +| Referenz kaputt | Rote Markierung an Regel und Detailpanel. | Publish blockiert, Sprung aus Summary. | +| Feldtyp geaendert | Dlter Wert kann ungueltig werden. | Wert neu waehlen oder Regel deaktivieren. | + +## Subframe + +- [Subframe](https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit) + +Gebaut als zusaetzlicher Builder-Zustand. Das Detail bleibt fachlich ein Zustand im Logic-Modus von S01, ist aber als eigener Frame sichtbar, damit David die Regelbearbeitung pruefen kann. + +Layout-Regel: D07 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar oder Header-Navigation nachbauen. + +## Notizen + +Die Regel-Logik bleibt bewusst eng: Wenn Feld Y Operator Wert Z, dann Feld X anzeigen/verstecken. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md new file mode 100644 index 00000000..671bb921 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md @@ -0,0 +1,112 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D08 +screen: Action Detail mit Mapping +typ: Panel-Zustand in S01 +umsetzung: Bauen +status: Subframe Draft / Review offen +route: in S01 Actions-Modus, kein eigener Screen +subframe: "https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit" +--- + +# D08 - Action Detail mit Mapping + +## Ziel + +Interne Nutzer konfigurieren eine einzelne Post-Submit-Action und sehen sofort, ob Pflichtmapping oder Zielwerte fehlen. + +## Pattern / Archetyp + +Detailpanel / Drawer innerhalb des Actions-Modus von S01. + +## Daten + +- Action-Typ +- Action-Name +- Status aktiv/inaktiv +- Ziel, z. B. Empfaenger, Pipeline, Projektstatus, Webhook-URL +- Field-Mapping: Formularfeld -> Ziel-Feld +- Pflichtfelder +- optionale Bedingungen +- Teststatus + +## Aktionen + +- Action benennen +- Ziel konfigurieren +- Mapping-Zeilen setzen +- optionale Bedingung setzen +- Test ausfuehren +- Action speichern +- Action deaktivieren +- Action loeschen + +## Verhalten + +- Nach Auswahl eines Action-Typs oeffnet sich dieses Detailpanel. +- Mapping wird inline als Zeilenliste bearbeitet. +- Pflichtmapping wird klar markiert. +- Test zeigt ein Ergebnis im Panel, kein eigener Screen. +- Loeschen einer aktiven oder published-relevanten Action nutzt Confirm. +- Detailfaelle fuer halb gesetztes Mapping, Typwechsel und fehlende Pflichtziele stehen in [[D10 Builder Interaktionsfaelle]]. + +## Action-Typen + +| Typ | Wichtigste Konfiguration | +|---|---| +| Email Submitter | Submitter-Email-Feld, Betreff, Nachricht. | +| Email Team | Empfaenger, Betreff, Feldauswahl. | +| Lead | Mapping fuer Name, Email, Telefon, Nachricht, Quelle. | +| Kontakt | Kontakt-Mapping und Duplikat-/Auto-Match-Hinweis. | +| Projekt | Pipeline, Status, Verantwortlicher, Pflichtmapping. | +| Task | Titel, Beschreibung, Faelligkeit, Assignee. | +| Auto-Match | Match-Felder, Fallback. | +| Webhook | URL, Test, Payload-Vorschau. | +| Automation-Trigger | Automation-Auswahl und Trigger-Hinweis. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Neu | Action-Typ gewaehlt, Detail noch leer. | Nur dokumentieren | +| Vollstaendig | Pflichtfelder und Mapping gesetzt. | Nur dokumentieren | +| Pflichtmapping fehlt | Publish oder Action-Test blockiert. | Nur dokumentieren | +| Test erfolgreich | Inline-Ergebnis plus Toast. | Wiederverwenden | +| Test fehlgeschlagen | Inline-Fehler im Panel. | Nur dokumentieren | + +## Auswahlfolge im Panel + +| Schritt | Verhalten | +|---|---| +| 1. Action-Typ | Bestimmt, welche Pflichtfelder und Mapping-Zeilen erscheinen. | +| 2. Ziel | Empfaenger, Pipeline, Webhook-URL, Automation oder Entity-Ziel wird gesetzt. | +| 3. Mapping | Formularfelder werden Ziel-Feldern zugeordnet. | +| 4. Optional Bedingung | Nur einfache Bedingung; kein zweiter Logic-Builder. | +| 5. Test | Erst aktiv, wenn Pflichtziel und Pflichtmapping vollstaendig sind. | +| 6. Aktiv | Aktive unvollstaendige Actions blockieren Publish; inaktive unvollstaendige Actions nicht. | + +## Was-passiert-wenn-Faelle + +| Fall | UI-Reaktion | Folge | +|---|---|---| +| Action-Typ gewaehlt, Pflichtziel vergessen | Inline-Fehler im Zielbereich. | Test disabled; aktive Action blockiert Publish. | +| Mapping-Ziel gesetzt, Quelle vergessen | Mapping-Zeile markiert fehlende Quelle. | Test disabled; aktive Action blockiert Publish. | +| Email Submitter ohne Email-Feld | Hinweis mit CTD `Email-Feld hinzufuegen`. | Action bleibt unvollstaendig. | +| Projekt erstellen ohne Pipeline | Pipeline-Auswahl markiert. | Publish blockiert aktive Action. | +| Webhook-URL ungueltig | URL-Feld zeigt Fehler. | Test disabled. | +| Action-Typ nach Mapping wechseln | Confirm/Popover erklaert, dass Mapping ungueltig werden kann. | Nutzer bestaetigt oder bricht ab. | + +## Subframe + +- [Subframe](https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit) + +Gebaut als zusaetzlicher Builder-Zustand. Das Detail bleibt fachlich ein Zustand im Actions-Modus von S01, ist aber als eigener Frame sichtbar, weil Mapping und Pflichtfelder fuer den Builder sehr fehleranfaellig sind. + +Layout-Regel: D08 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar oder Header-Navigation nachbauen. + +## Notizen + +ActionLog, Re-Run und Fehlerhistorie pro Submission bleiben ausserhalb von D-FORM. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md new file mode 100644 index 00000000..e41fc2b8 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md @@ -0,0 +1,114 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D09 +screen: Publish Blocker Summary +typ: Inline-Zustand in S01 +umsetzung: Bauen +status: Subframe Draft / Review offen +route: in S01 nach Klick auf Publish +subframe: "https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit" +--- + +# D09 - Publish Blocker Summary + +## Ziel + +Interne Nutzer verstehen nach Klick auf Publish sofort, warum ein Formular nicht veroeffentlicht werden kann und wo sie es korrigieren. + +## Pattern / Archetyp + +Inline Summary-Banner / Popover mit Sprungzielen im S01-Builder. + +## Daten + +- Anzahl Blocker +- Blocker-Gruppe: Form, Feld, Logic, Actions, Sharing/Settings +- betroffener Feldname oder Action-Name +- Ziel im Builder, zu dem gesprungen werden kann +- nicht-blockierende Warnungen + +## Aktionen + +- Blocker anklicken +- zum Feld springen +- zum Inspector-Abschnitt springen +- Logic-Modus oeffnen +- Actions-Modus oeffnen +- Settings oeffnen +- Publish nach Korrektur erneut versuchen + +## Verhalten + +- Klick auf `Publish` startet einen Check im selben Screen. +- Bei Blockern wird nicht published. +- Die Summary erscheint oben im Builder oder als klarer Inline-Bereich nahe der Topbar. +- Jeder Blocker hat ein Sprungziel. +- Nicht-blockierende Warnungen koennen als eigener Abschnitt erscheinen und erlauben Publish nach Bestaetigung. +- Bei Erfolg gibt es Statuswechsel und Toast, keinen eigenen Erfolgsscreen. +- Ausfuehrliche Auswahl-/Vergessensfaelle stehen in [[D10 Builder Interaktionsfaelle]]. + +## Blocker + +| Blocker | Ziel | +|---|---| +| Formularname fehlt | Header/Form-Name | +| Slug fehlt oder Konflikt | Settings | +| Kein sichtbares Feld | Canvas Empty State | +| Feld ohne Label | Feldkarte + Inspector | +| Select ohne Optionen | Feldkarte + Inspector Optionen | +| Kaputte Logic | Logic-Modus | +| Pflichtmapping fehlt | Actions-Modus | +| Webhook-URL ungueltig | Action-Detail | + +## Was-passiert-wenn-Faelle + +| Fall | Summary-Verhalten | Sprungziel | +|---|---|---| +| Nutzer hat Select-Feld angelegt, aber Optionen vergessen | Blocker `Auswahlfeld hat keine Optionen`. | Feldkarte + Inspector `Optionen` | +| Nutzer hat Logic-Regel halb gebaut | Blocker `Logic-Regel unvollstaendig`, wenn aktiv. | Logic-Regel-Detail | +| Nutzer hat Action-Typ gewaehlt, aber Mapping vergessen | Blocker `Pflichtmapping fehlt`, wenn Action aktiv. | Action-Detail mit Mapping | +| Nutzer hat Datei-Feld ohne Typbeschraenkung | Warnung, nicht zwingend Blocker. | Datei-Feld Inspector | +| Nutzer hat Field Key ungueltig geaendert | Blocker `Field Key ungueltig oder doppelt`. | Inspector Basis/Advanced | +| Nutzer hat nur inaktive unvollstaendige Action | Optional Warnung, kein harter Blocker. | Actions-Liste | +| Nutzer hat unsaved changes | Erst speichern oder Save-Check zeigen. | Header/Save | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Keine Blocker | Publish erfolgreich. | Toast/Statuswechsel | +| Blocker vorhanden | Summary mit Sprungzielen. | Nur dokumentieren | +| Nur Warnungen | Nutzer kann trotzdem publishen. | Nur dokumentieren | +| Save vorher noetig | Hinweis, dass Aenderungen erst gespeichert werden. | Nur dokumentieren | + +## Copy-Richtung + +| Situation | Copy-Beispiel | +|---|---| +| Feld ohne Label | `Dieses Feld braucht ein Label, bevor das Formular veroeffentlicht werden kann.` | +| Select ohne Optionen | `Fuege mindestens eine Option hinzu, damit Nutzer antworten koennen.` | +| Logic unvollstaendig | `Diese Regel ist noch nicht vollstaendig. Ergaenze Operator, Wert oder Zielfeld.` | +| Mapping fehlt | `Diese Action braucht noch eine Zuordnung fuer Pflichtfelder.` | +| Nur Warnung | `Du kannst veroeffentlichen, aber diese Einstellung sollte geprueft werden.` | + +## Subframe + +Gebaut in Subframe: + +https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit + +Qualitaetsregel: + +- Interner Builder-Zustand nutzt das vorhandene `Default Page Layout`. +- Keine eigene Sidebar oder Header-Navigation nachbauen. +- D09 bleibt Inline Summary/Banner im Builder, kein Modal/Dialog. +- Publish bleibt deaktiviert, bis harte Blocker geloest sind. +- Warnungen sind sichtbar, blockieren aber nicht zwingend. +- Jeder Blocker hat ein klares Sprungziel in Feld, Logic, Actions oder Settings. + +## Notizen + +Publish ist kein Wizard. Der Nutzer bleibt im Builder und korrigiert direkt dort. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md new file mode 100644 index 00000000..18cce80a --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md @@ -0,0 +1,68 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D01 +screen: Sharing Panel URL QR iFrame +typ: Panel-Zustand in S01 +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: in ADV-S01 Form-Builder Canvas, kein eigener Screen +subframe: "-" +--- + +# D01 - Sharing Panel URL QR iFrame + +## Ziel + +Interne Nutzer koennen nach dem Publish die Public URL, den QR-Code und den iFrame-Code nutzen, ohne den Builder zu verlassen. + +## Pattern / Archetyp + +Panel / Arbeitsmodus innerhalb von S01. + +## Daten + +- Formularname +- Publish-Status: Draft, Published, Unpublished Changes, Archived +- Public URL: `/f/{tenant}/{slug}` +- Slug und Tenant +- QR-Code fuer Public URL +- iFrame-Code +- Allowed Origins, falls fuer iFrame relevant + +## Aktionen + +- Public URL kopieren +- Public URL oeffnen +- QR-Code kopieren oder herunterladen +- iFrame-Code kopieren +- zu Settings springen, wenn Slug fehlt +- zu Publish springen, wenn Formular noch Draft ist + +## Verhalten + +- Klick auf `Share` in der Topbar oeffnet keinen Dialog, sondern wechselt in den Sharing-Modus von S01. +- Bei `Published` sind URL, QR und iFrame aktiv. +- Bei `Draft` bleibt der Bereich sichtbar, aber die echten Copy-Aktionen sind disabled oder zeigen einen Publish-Hinweis. +- Bei fehlendem Slug verweist das Panel auf Settings. +- Copy-Aktionen zeigen nur Toasts, keine Modals. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Published | URL, QR und iFrame sind aktiv. | Nur dokumentieren | +| Draft | Sharing ist ausgegraut und erklaert Publish als Voraussetzung. | Nur dokumentieren | +| Slug fehlt | Panel verweist auf Settings. | Nur dokumentieren | +| Kopiert | Toast bestaetigt Copy-Aktion. | Wiederverwenden | +| Archived | Sharing ist read-only oder deaktiviert. | Nur dokumentieren | + +## Subframe + +Kein eigener Subframe-Screen. Der Zustand wird im S01-Builder als Sharing-Modus/Panel gezeigt. Ein eigener Frame ist nur noetig, wenn David den geoeffneten Sharing-Zustand separat sehen will. + +## Notizen + +Personalisierte Links und JS-Snippet bleiben v2. D-FORM v1 zeigt URL, QR und iFrame. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md new file mode 100644 index 00000000..7cc7b803 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md @@ -0,0 +1,91 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D02 +screen: Post-Submit Actions +typ: Panel-Zustand in S01 +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: in ADV-S01 Form-Builder Canvas, kein eigener Screen +subframe: "-" +--- + +# D02 - Post-Submit Actions + +## Ziel + +Interne Nutzer legen fest, was nach dem Absenden eines Public Forms passieren soll, ohne einen kompletten Automation-Editor zu oeffnen. + +## Pattern / Archetyp + +Action-Liste plus Detailpanel innerhalb von S01. + +## Daten + +- Action-Typ +- Action-Name +- Status aktiv/inaktiv +- Reihenfolge +- Pflichtmapping +- Warnungen und Blocker +- letzter Teststatus + +## Aktionen + +- Action hinzufuegen +- Action-Typ waehlen +- Action bearbeiten +- Action aktiv/inaktiv setzen +- Action duplizieren +- Action loeschen +- Reihenfolge aendern +- Mapping pruefen +- Test ausfuehren + +## Verhalten + +- Klick auf `Actions` wechselt in den Actions-Modus im selben S01-Screen. +- `Add Action` oeffnet eine kleine Typ-Auswahl als Popover oder Auswahlpanel. +- Nach Auswahl eines Action-Typs oeffnet sich das Action-Detail, siehe [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]. +- Die Liste zeigt Warnungen direkt an der betroffenen Action. +- ActionLog, Re-Run und Submission-Historie gehoeren nicht hierher, sondern zu Submissions. +- Auswahl- und Mapping-Folgefaelle stehen in [[D10 Builder Interaktionsfaelle]]. + +## Add-Action-Popover + +| Inhalt | Beschreibung | +|---|---| +| Typ-Liste | Email Submitter, Email Team, Lead, Kontakt, Projekt, Task, Auto-Match, Webhook, Automation-Trigger. | +| Kurzbeschreibung | Pro Typ ein Satz, was nach Submit passiert. | +| Disabled-Zustaende | Typ disabled, wenn Rechte, Integration oder Voraussetzung fehlen. | +| Suche optional | Nur wenn Liste zu lang wirkt. | +| Kein Modal | Das Popover waehlt nur den Typ; Detailarbeit passiert in [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Keine Actions | Empty State mit `Action hinzufuegen`. | Nur dokumentieren | +| Action valid | Action ist aktiv und vollstaendig konfiguriert. | Nur dokumentieren | +| Action incomplete | Pflichtmapping oder Ziel fehlt. | Nur dokumentieren | +| Test erfolgreich | Inline-Ergebnis plus Toast. | Wiederverwenden | +| Test fehlgeschlagen | Inline-Hinweis im Action-Detail. | Nur dokumentieren | + +## Was-passiert-wenn-Faelle + +| Fall | UI-Reaktion | +|---|---| +| Nutzer waehlt Typ, bricht Detail ab | Action wird nicht angelegt oder bleibt als unvollstaendiger Draft, je nach Save-Logik. | +| Nutzer erstellt Action, laesst sie inaktiv | Keine Publish-Blockade, aber Warnung in Action-Liste. | +| Nutzer erstellt aktive Action ohne Pflichtmapping | Publish blockiert und springt zu [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]]. | +| Nutzer loescht Action | Confirm nur bei aktiver/published-relevanter Action. | + +## Subframe + +Kein eigener Hauptscreen. Actions bleiben Arbeitsbereich in S01. Ein extra Frame ist nur noetig, wenn David die geoeffnete Action-Liste separat sehen will. + +## Notizen + +Der Bereich darf nicht wie M17 Automation wirken. D-FORM braucht nur Action-Typ, Ziel, Mapping, Status und Test. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md new file mode 100644 index 00000000..3a999e70 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md @@ -0,0 +1,81 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D03 +screen: Conditional Logic Editor +typ: Panel-Zustand in S01 +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: in ADV-S01 Form-Builder Canvas, kein eigener Screen +subframe: "-" +--- + +# D03 - Conditional Logic Editor + +## Ziel + +Interne Nutzer koennen einfache Anzeige-/Ausblende-Regeln fuer Formularfelder erstellen und pruefen. + +## Pattern / Archetyp + +Regel-Liste plus Detailpanel innerhalb von S01. + +## Daten + +- Regelname optional +- Bedingungsfeld +- Operator +- Wert +- Aktion: anzeigen oder verstecken +- Zielfeld +- Status aktiv/inaktiv +- Referenzstatus: gueltig oder kaputt + +## Aktionen + +- Regel hinzufuegen +- Regel bearbeiten +- Regel aktiv/inaktiv setzen +- Regel loeschen +- kaputte Referenz reparieren +- Regel in Preview testen + +## Verhalten + +- Klick auf `Logic` wechselt in den Logic-Modus im selben S01-Screen. +- `Neue Regel` oeffnet kein Modal, sondern ein Detailpanel, siehe [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]]. +- Kaputte Referenzen werden in der Regel-Liste sichtbar markiert. +- Kaputte aktive Regeln blockieren Publish. +- Required-Felder, die durch Logic versteckt werden, sind im Public Form nur required, wenn sie sichtbar sind. +- Auswahl- und Vergessensfaelle fuer Logic sind in [[D10 Builder Interaktionsfaelle]] dokumentiert. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Keine Regeln | Empty State mit `Regel hinzufuegen`. | Nur dokumentieren | +| Regel aktiv | Regel wirkt im Public Renderer. | Nur dokumentieren | +| Regel inaktiv | Regel bleibt gespeichert, wirkt aber nicht. | Nur dokumentieren | +| Referenz kaputt | Feld fehlt oder wurde geaendert; Publish blockiert. | Nur dokumentieren | +| Preview-Test | Public-nahe Vorschau zeigt Feld sichtbar/versteckt. | In S01 dokumentieren | + +## Was-passiert-wenn-Faelle + +| Fall | UI-Reaktion | +|---|---| +| Wenn-Feld gewaehlt, Operator vergessen | Regel bleibt unvollstaendig; Aktivieren/Test disabled. | +| Operator gewaehlt, Wert vergessen | Wertfeld zeigt Inline-Fehler; aktive Regel blockiert Publish. | +| Operator `ist leer` gewaehlt | Wertfeld verschwindet, weil kein Wert gebraucht wird. | +| Ziel-Feld vergessen | Regel bleibt unvollstaendig; Publish blockiert nur, wenn Regel aktiv sein soll. | +| Select-Option wird geloescht | Betroffene Regel wird kaputt markiert und in Publish Summary verlinkt. | +| Bedingungsfeld und Ziel-Feld gleich | Regel kann nicht aktiv werden; Inline-Hinweis auf Selbstreferenz. | + +## Subframe + +Kein eigener Hauptscreen. Logic bleibt Arbeitsbereich in S01. Ein extra Frame ist nur noetig, wenn David den geoeffneten Logic-Modus separat sehen will. + +## Notizen + +Nicht v1: Multi-Step, If/Else-Baeume, Repeater, Scoring oder Cross-Field-Rechnung. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md new file mode 100644 index 00000000..24117880 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md @@ -0,0 +1,89 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D06 +screen: Feldkarten Menue +typ: Inline-Zustand in S01 +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: in ADV-S01 Form-Builder Canvas, kein eigener Screen +subframe: "-" +--- + +# D06 - Feldkarten Menue + +## Ziel + +Interne Nutzer erreichen sekundaere Feldaktionen direkt an der Feldkarte, ohne den Inspector mit seltenen Aktionen zu ueberladen. + +## Pattern / Archetyp + +3-Punkte-Menue / Kontextmenue auf einer Feldkarte. + +## Daten + +- Feldname +- Feldtyp +- Field Key +- ob das Feld in Logic verwendet wird +- ob das Feld in Actions/Mapping verwendet wird +- ob das Formular published ist + +## Aktionen + +- Feld bearbeiten +- Feld duplizieren +- nach oben/unten verschieben, falls Drag nicht genutzt wird +- Feld einklappen/ausklappen +- Field Key kopieren +- Feld loeschen + +## Verhalten + +- Klick auf das 3-Punkte-Menue oeffnet ein kleines Menue an der Feldkarte. +- `Bearbeiten` setzt den Fokus auf den rechten Inspector. +- `Duplizieren` erstellt direkt eine Kopie unter dem Feld, schlaegt einen neuen `field_key` vor und selektiert die Kopie. +- `Loeschen` fuehrt bei Abhaengigkeiten zu [[M01 Feld loeschen Confirm]]. +- Destruktive Aktionen stehen getrennt unten im Menue. +- Weitere Folgefaelle stehen in [[D10 Builder Interaktionsfaelle]]. + +## Menue-Inhalt + +| Eintrag | Verhalten | Sichtbarkeit | +|---|---|---| +| `Bearbeiten` | selektiert Feld und fokussiert Inspector. | immer, wenn editierbar | +| `Duplizieren` | erstellt Kopie unter dem Feld, neuer `field_key`, Kopie selected. | wenn editierbar | +| `Field Key kopieren` | kopiert technischen Key, Toast. | wenn Key vorhanden | +| `Nach oben/unten` | Alternative zu Drag, falls noetig. | optional | +| `Einklappen/Ausklappen` | veraendert nur Canvas-Darstellung. | bei langen Feldern | +| `Loeschen` | fuehrt zu Confirm bei Abhaengigkeiten. | getrennt unten, Danger | + +## Was-passiert-wenn-Faelle + +| Fall | UI-Reaktion | +|---|---| +| Feld wird in Logic genutzt | Menue kann kleinen Hinweis am Loeschen-Eintrag zeigen; Klick oeffnet [[M01 Feld loeschen Confirm]]. | +| Feld wird in Action-Mapping genutzt | Confirm nennt betroffene Action(s). | +| Formular ist archived | Bearbeiten/Loeschen disabled, Duplizieren kann als Ausweg aktiv bleiben. | +| Nutzer dupliziert Feld mit Select-Optionen | Optionen werden kopiert, aber Logic/Mapping nicht automatisch. | +| Nutzer dupliziert Datei/Fotofeld | Upload-Regeln werden kopiert, neuer `field_key`; keine hochgeladenen Dateien. | +| Nutzer loescht Feld ohne Abhaengigkeit | Kurze Rueckfrage oder Undo-Toast reicht; kein grosses Modal noetig. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Standard | normale Feldaktionen sichtbar. | Nur dokumentieren | +| Feld wird referenziert | Menue zeigt Hinweis vor Loeschen. | Nur dokumentieren | +| Keine Berechtigung | einzelne Aktionen disabled oder Menue fehlt. | Nur dokumentieren | +| Archived | Bearbeiten/Loeschen disabled, Duplizieren moeglich. | Nur dokumentieren | + +## Subframe + +Kein eigener Subframe-Screen. Das Menue wird in S01 dokumentiert. Ein eigener Frame ist nur noetig, wenn David den geoeffneten Feldkarten-Zustand sehen will. + +## Notizen + +Das Menue ist fuer sekundaere Aktionen. Primaere Feldbearbeitung bleibt im Inspector. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md new file mode 100644 index 00000000..e658dd6a --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md @@ -0,0 +1,137 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: D10 +screen: Builder Interaktionsfaelle +typ: Case-Matrix in S01 +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: in ADV-S01 Form-Builder Canvas, kein eigener Screen +subframe: "-" +--- + +# D10 - Builder Interaktionsfaelle + +## Ziel + +Diese Datei beantwortet die naechste Review-Ebene: Was passiert, wenn Nutzer im Builder etwas auswaehlen, ankreuzen, vergessen, wechseln oder eine Folgeaktion ausloesen? + +Nicht jedes Detail muss ein eigener Frame werden. Dber vor Subframe muss klar sein, ob daraus Inline-Feedback, Dropdown, Popover, Panel, Modal, Toast oder Publish-Blocker entsteht. + +## Grundregel + +| Fall | UI-Reaktion | +|---|---| +| Nutzer waehlt etwas aus und der naechste Schritt haengt davon ab | Nachfolgende Felder im selben Panel werden sichtbar oder aktiv. | +| Nutzer vergisst einen Pflichtteil in der Mitte | Der Block bleibt unvollstaendig, zeigt Inline-Warnung und blockiert Publish/Test nur dort, wo es fachlich noetig ist. | +| Nutzer waehlt etwas, das alte Eingaben ungueltig macht | Dlte Eingaben werden nicht still geloescht; System zeigt Hinweis und laesst bestaetigen oder markiert ungueltig. | +| Nutzer loescht etwas, das anderswo verwendet wird | Confirm oder Inline-Blocker mit konkreter Referenzliste. | +| Nutzer fuegt etwas Medien-/Dateibezogenes hinzu | Kein globales Modal; normales Datei-Feld oeffnet Inspector. Nur Datei-Auswahl selbst ist System-/Upload-Dialog. | +| Nutzer bestaetigt eine public-wirksame Aktion | Confirm-Dialog. | + +## Feld hinzufuegen / Feldtyp auswaehlen + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz fuer Subframe | +|---|---|---|---|---| +| Klick auf Feldtyp `Text` | Feld wird am Ende eingefuegt, Karte selected, Inspector oeffnet Basis-Sektion. | Canvas + Inspector | nein | Happy Path zeigen. | +| Drag eines Feldtyps | Dropzonen erscheinen, nach Drop ist Feld selected. | Canvas-Zustand | nein | Dropziel sichtbar machen. | +| Nutzer fuegt `Select` hinzu und vergisst Optionen | Feldkarte zeigt Warnung, Inspector `Optionen` zeigt Pflicht-Hinweis, Publish blockiert. | Inline + Inspector + Publish Summary | ja fuer Publish | Wichtig, weil Public Form sonst nicht beantwortbar ist. | +| Nutzer fuegt `Datei` hinzu | Feldkarte erscheint als Upload-Feld, Inspector zeigt Dateitypen, Groesse, Mehrfachupload, Foto-Hinweis. | Inspector | nein | Kein eigenes Modal fuer Feld-Konfiguration. | +| Nutzer aktiviert `Foto erlaubt` beim Datei-Feld | Mobile-Kamera-Hinweis wird im Inspector sichtbar; Public Renderer darf Kamera/Upload anbieten. | Inline im Inspector | nein | Foto bleibt Variante von Datei, kein eigener Feldtyp. | +| Nutzer setzt `Mehrere Dateien` und vergisst max. Groesse | Warnung, aber Publish blockiert nicht zwingend; Security/Dev kann Default setzen. | Inline-Warnung | nein/Warning | Empfehlung: warnen, nicht blockieren. | +| Nutzer aendert Feldtyp nach Konfiguration | System zeigt Warnung, wenn Optionen/Validation verloren gehen koennen. | Popover/Confirm klein | ja bis Bestaetigung | Nur relevant, falls Feldtypwechsel erlaubt ist. | +| Nutzer dupliziert Feld mit Logic/Mapping | Kopie bekommt neuen `field_key`; Logic/Mapping wird nicht automatisch kopiert. | Toast + Inspector | nein | Sonst entstehen unsichtbare Doppelreferenzen. | + +## Feld-Inspector / Checkboxen / Optionen + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz | +|---|---|---|---|---| +| Label leer lassen | Feldkarte und Inspector zeigen Inline-Fehler. | Inline | ja fuer Publish | Feld darf als Draft gespeichert werden. | +| `Pflichtfeld` ankreuzen, aber Feld ist durch Logic versteckt | Hinweis: Pflicht gilt nur, wenn Feld sichtbar ist. | Inline-Hinweis im Inspector | nein | Public Submit darf nicht blockieren, wenn Feld versteckt ist. | +| `Pflichtfeld` ankreuzen bei Datei | Inspector empfiehlt Dateitypen/Groesse; ohne Beschraenkung nur Warnung. | Inline-Warnung | nein/Warning | Public Risiko, aber v1 nicht hart blockieren. | +| Select-Option leer lassen | Option-Zeile zeigt Fehler; Publish blockiert. | Inline | ja fuer Publish | Fehler nahe Option, nicht nur global. | +| Select-Option loeschen, die in Logic genutzt wird | Confirm/Inline-Hinweis zeigt betroffene Regeln; nach Loeschen werden Regeln kaputt markiert. | Confirm oder Inline-Blocker | ja fuer Publish | Sehr wichtiger Folgefall. | +| Field Key manuell aendern | System prueft Duplikat/ungueltig; zeigt Mapping/Logic-Hinweis. | Inline im Inspector | ja bei ungueltig | Nicht still aendern, wenn Referenzen betroffen sind. | +| User vergisst den mittleren Schritt `Optionen` und geht zu Publish | Publish Summary springt direkt zur Optionen-Sektion. | Publish Summary | ja | Genau der "Mitte vergessen"-Fall. | + +## Logic-Regel: Auswahlfolge und vergessene Mitte + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz | +|---|---|---|---|---| +| Neue Regel klicken | Leeres Detailpanel oeffnet mit Reihenfolge: Wenn-Feld -> Operator -> Wert -> Dann-Aktion -> Zielfeld. | Panel | nein | Kein Modal. | +| Wenn-Feld auswaehlen | Operator-Dropdown wird passend zum Feldtyp gefiltert. | Dropdown im Panel | nein | Text hat andere Operatoren als Boolean/Select. | +| Wenn-Feld waehlen, Operator vergessen | Regel bleibt `Unvollstaendig`; Aktivieren/Test disabled. | Inline im Panel | ja fuer aktive Regel | Speichern als inaktiver Draft moeglich. | +| Operator waehlen, Wert vergessen | Wertfeld wird markiert; Test disabled; Publish blockiert nur, wenn Regel aktiv ist. | Inline im Panel | ja fuer aktive Regel | "Mitte vergessen" wird lokal sichtbar. | +| Ziel-Feld vergessen | Regel bleibt unvollstaendig; Summary zeigt fehlendes Zielfeld. | Inline | ja fuer aktive Regel | Sprungziel auf Zielfeld-Auswahl. | +| Bedingungsfeld und Zielfeld sind identisch | Inline-Warnung; Regel kann nicht aktiv werden. | Inline | ja fuer aktive Regel | Verhindert Selbstreferenz. | +| Nutzer waehlt `ist leer` | Wertfeld verschwindet, weil kein Wert noetig ist. | Dynamisches Panel | nein | Wichtig: Feld nicht disabled ohne Erklaerung. | +| Nutzer wechselt Wenn-Feld nach gesetztem Wert | Dlter Wert wird markiert als ungueltig oder geloescht nach Hinweis. | Inline-Hinweis / kleines Confirm | ja bis korrigiert | Keine stille Datenvernichtung. | +| Nutzer loescht Feld, das in Regel steckt | Regel bleibt sichtbar, rot markiert, Publish blockiert. | Logic-Liste + Publish Summary | ja | Referenzbruch nicht verstecken. | + +## Action-Detail / Mapping + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz | +|---|---|---|---|---| +| `Add Action` klicken | Typ-Auswahl oeffnet als Popover/Auswahlpanel mit kurzen Beschreibungen. | Popover | nein | Kein Modal. | +| Action-Typ waehlen | Detailpanel oeffnet mit typ-spezifischen Pflichtfeldern. | Panel/Drawer | nein | Action ist erstmal unvollstaendig. | +| Typ `Email Submitter` waehlen, aber kein Email-Feld vorhanden | Panel zeigt Hinweis und bietet `Email-Feld hinzufuegen` oder anderes Feld waehlen. | Inline-Hinweis + CTD | ja fuer aktive Action | Kein stilles Mapping. | +| Typ `Projekt erstellen` waehlen, aber Pipeline fehlt | Pipeline-Feld markiert; Test/Publish blockiert fuer aktive Action. | Inline | ja | Action darf als inaktiv geparkt werden. | +| Mapping-Zeile Ziel gesetzt, Quelle vergessen | Zeile bleibt unvollstaendig; Test disabled; Publish blockiert aktive Action. | Inline in Mapping-Zeile | ja fuer aktive Action | "Mitte vergessen" bei Mapping. | +| Nutzer aendert Action-Typ nach Mapping | Hinweis: bestehendes Mapping passt evtl. nicht mehr; Nutzer bestaetigt oder bricht ab. | Confirm/Popover | ja bis Bestaetigung | Sonst Datenverlust. | +| Nutzer deaktiviert unvollstaendige Action | Warnung verschwindet aus Publish-Blockern, bleibt aber in Action-Liste als inaktiv/unvollstaendig. | Inline | nein | Inaktive Actions duerfen Draft bleiben. | +| Webhook URL eingetragen, aber ungueltig | URL-Feld zeigt Fehler, Test disabled. | Inline | ja fuer aktive Action/Test | Copy: `URL muss mit http:// oder https:// beginnen.` | +| Test ausfuehren ohne Pflichtmapping | Test startet nicht; Panel markiert fehlende Zeilen. | Inline | ja fuer Test | Kein Toast, weil nichts ausgefuehrt wurde. | + +## Publish / Save / Wechselwirkungen + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz | +|---|---|---|---|---| +| Publish klicken mit fehlendem Feldlabel | Publish Summary zeigt Blocker und springt zur Feldkarte/Inspector. | Inline Summary | ja | Kein Modal. | +| Publish klicken mit unvollstaendiger aktiver Logic | Summary zeigt Logic-Blocker, Klick oeffnet Logic-Modus und Detailpanel. | Summary + Panel | ja | Direkt reparierbar. | +| Publish klicken mit inaktiver unvollstaendiger Action | Warnung optional, aber kein Blocker. | Warning | nein | Inaktiv wirkt nicht public. | +| Publish klicken mit unsaved changes | Erst Save/Validation-Hinweis; danach Publish-Check. | Inline/Popover | ja bis Save | Kein eigener Screen. | +| Published Form stark aendern | Hinweis, dass Public-Version betroffen ist; Save/Publish-Update klar trennen. | Banner/Inline | nein/Warning | David/Dev muss final entscheiden, ob Update extra Publish braucht. | +| Nutzer verlaesst S01 mit Dirty State | [[M04 Unsaved Changes Confirm]] greift. | Confirm/Browser Guard | ja bis Entscheidung | Standard-Guard. | +| Unpublish klicken | [[M02 Unpublish Confirm]] oeffnet. | Confirm Modal | ja bis Bestaetigung | Public-Link betroffen. | + +## Public-Preview / Live-Folgen + +| Nutzeraktion | Was passiert? | UI-Ebene | Blockiert? | Notiz | +|---|---|---|---|---| +| Preview oeffnen mit unvollstaendigem Feld | Preview zeigt Draft-nahe Darstellung, aber Warnung bleibt im Builder. | Preview + Inline-Warnung | nein | Preview darf beim Bauen helfen. | +| Logic in Preview testen | Felder erscheinen/verschwinden live. | Preview-Modus | nein | Nutzer sieht Folge direkt. | +| Datei/Fotofeld in Preview | Upload-Bereich zeigt erlaubte Typen, max. Groesse, mobile Foto-Hinweis. | Preview | nein | Kein echter Upload noetig im Builder. | +| Captcha/Public Schutz in Preview | Kann als Platzhalter sichtbar sein. | Preview | nein | Kein echtes Captcha im Builder notwendig. | + +## Modal-/Popover-Inhalte + +| UI-Ebene | Wann | Inhalt | +|---|---|---| +| Action-Typ-Popover | `Add Action` | Liste der Action-Typen, je ein Kurzsatz, disabled Hinweis fuer nicht verfuegbare Typen. | +| Feldtyp-Wechsel-Confirm | Feldtyp nach Konfiguration aendern | Was verloren geht: Optionen, Validation, Default, Mapping-Hinweis; Buttons `Typ aendern` / `Abbrechen`. | +| Option-loeschen-Confirm | Option wird in Logic genutzt | betroffene Regel(n), Hinweis auf Publish-Blocker, Buttons `Option loeschen` / `Abbrechen`. | +| Feld-loeschen-Confirm | Feld wird in Logic/Actions genutzt | Feldname, Field Key, betroffene Regeln/Actions, Buttons `Feld loeschen` / `Abbrechen`. | +| Publish-Warnpopover | nur Warnungen, keine Blocker | Warnliste und Button `Trotzdem veroeffentlichen` falls Produkt das erlaubt. | +| Unpublish-Confirm | Public-Link offline nehmen | Public URL, Folge fuer QR/iFrame, Buttons `Unpublish` / `Abbrechen`. | + +## Offene Produktentscheidungen + +| Frage | Empfehlung | +|---|---| +| Darf der Feldtyp nachtraeglich gewechselt werden? | Ja, aber mit Confirm, wenn dadurch Optionen/Validation/Mapping betroffen sind. | +| Werden unvollstaendige inaktive Logic/Actions gespeichert? | Ja, als Draft/inaktiv, aber klar markiert. | +| Blockiert fehlende Datei-Typbeschraenkung Publish? | Empfehlung: Warnung, kein harter Blocker. | +| Braucht `Bild hinzufuegen` einen eigenen Content Block? | Nicht in D-FORM v1. Bilder/Fotos laufen als Datei-Feld-Variante; Branding-Logo gehoert in Settings/Public Form. | +| Sollen published Aenderungen direkt live gehen oder Publish-Update brauchen? | Offene Produktentscheidung; S01 muss Zustand `Published mit ungespeicherten/unveroeffentlichten Aenderungen` zeigen koennen. | + +## Subframe + +Kein eigener Subframe-Screen. D10 ist eine Vor-Subframe-Case-Matrix. Wenn David einzelne Faelle visuell sehen will, sollten zuerst diese Kandidaten gebaut werden: + +- [[93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] +- [[92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] +- [[91 D07 Logic Regel Detail|D07 Logic Regel Detail]] +- [[M01 Feld loeschen Confirm]] +- [[M02 Unpublish Confirm]] diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md new file mode 100644 index 00000000..6585d2d3 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md @@ -0,0 +1,92 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: M01 +screen: Feld loeschen Confirm +typ: Confirm Modal +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: von S01 Feldkarte oder Inspector +subframe: "-" +--- + +# M01 - Feld loeschen Confirm + +## Ziel + +Interne Nutzer bestaetigen bewusst, dass ein Feld entfernt wird, besonders wenn es in Logic oder Actions verwendet wird. + +## Pattern / Archetyp + +D5 Confirm-Modal / kleiner Sicherheitsdialog. + +## Daten + +- Feldname +- Feldtyp +- Field Key +- Anzahl betroffener Logic-Regeln +- Anzahl betroffener Actions oder Mapping-Zeilen +- Publish-Status des Formulars + +## Aktionen + +- `Feld loeschen` +- `Abbrechen` +- optional `Betroffene Regeln ansehen` +- optional `Betroffene Actions ansehen` + +## Verhalten + +- Bei Feldern ohne Abhaengigkeiten kann Loeschen sehr kurz bestaetigt werden oder als Menue-Aktion mit Undo/Toast laufen. +- Bei Abhaengigkeiten ist ein Confirm Pflicht. +- Der Confirm nennt konkret, welche Regeln oder Actions betroffen sind. +- Nach Loeschen wird das Feld entfernt; betroffene Logic/Actions werden markiert oder muessen repariert werden. +- Publish bleibt blockiert, solange kaputte Referenzen existieren. +- Details zu Folgefaellen stehen in [[D10 Builder Interaktionsfaelle]]. + +## Layout / Inhalt + +1. Headline `Feld loeschen?` +2. Feldname und Feldtyp. +3. Hinweis, dass das Feld aus dem Formular entfernt wird. +4. Falls relevant: Liste der betroffenen Logic-Regeln und Actions. +5. Aktionen: Danger-Button `Feld loeschen`, sekundar `Abbrechen`. + +## Modal-Inhalt je Fall + +| Fall | Was steht im Modal? | +|---|---| +| Keine Abhaengigkeit | `Dieses Feld wird aus dem Formular entfernt.` | +| Feld in Logic verwendet | `Dieses Feld wird in 2 Logic-Regeln verwendet. Diese Regeln muessen danach repariert oder deaktiviert werden.` | +| Feld in Actions verwendet | `Dieses Feld ist in 1 Action-Mapping hinterlegt. Die Action wird danach unvollstaendig.` | +| Published Form | `Das Formular ist veroeffentlicht. Aenderungen koennen die oeffentliche Version betreffen.` | +| Datei/Fotofeld | `Das Upload-Feld wird entfernt. Bereits eingereichte Dateien in Submissions sind davon nicht Teil dieses Builders.` | + +## Nach Bestaetigung + +| Folge | Verhalten | +|---|---| +| Feld geloescht | Feldkarte verschwindet, Canvas selektiert naechstes sinnvolles Feld. | +| Logic betroffen | Regel wird rot/kaputt markiert und in Publish Summary gelistet. | +| Action betroffen | Mapping-Zeile wird als fehlend markiert; aktive Action blockiert Publish. | +| Keine Abhaengigkeit | Toast `Feld geloescht`; Undo optional. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Ohne Abhaengigkeit | einfacher Confirm oder kurze Rueckfrage. | Nur dokumentieren | +| Mit Logic/Action-Bezug | Confirm mit Referenzliste. | Nur dokumentieren | +| Published Form | Hinweis, dass Public-Version betroffen sein kann. | Nur dokumentieren | +| Fehler | Loeschen fehlgeschlagen. | Nur dokumentieren | + +## Subframe + +Noch kein eigener Subframe-Frame. Wenn David einen Modal-Frame fuer D-FORM sehen will, ist dieses Confirm der erste Kandidat. + +## Notizen + +Keine normale Feldbearbeitung im Modal. Das Modal ist nur fuer den Risiko-Moment Loeschen. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md new file mode 100644 index 00000000..793ae803 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md @@ -0,0 +1,68 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: M02 +screen: Unpublish Confirm +typ: Confirm Modal +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: von S01 Header oder More-Menue +subframe: "-" +--- + +# M02 - Unpublish Confirm + +## Ziel + +Interne Nutzer bestaetigen bewusst, dass ein Public Form nicht mehr erreichbar ist. + +## Pattern / Archetyp + +D5 Confirm-Modal. + +## Daten + +- Formularname +- aktuelle Public URL +- Publish-Status +- Hinweis, ob iFrame/QR ebenfalls betroffen sind + +## Aktionen + +- `Unpublish` +- `Abbrechen` +- optional Public URL kopieren, bevor deaktiviert wird + +## Verhalten + +- Klick auf `Unpublish` oeffnet einen Confirm-Dialog. +- Der Dialog erklaert, dass Public URL, QR und iFrame danach nicht mehr fuer Submitter nutzbar sind. +- Nach Bestaetigung wechselt der Status zu Draft/Unpublished. +- Sharing zeigt danach Draft-Hinweis. +- Erfolg wird per Toast bestaetigt. + +## Layout / Inhalt + +1. Headline `Formular offline nehmen?` +2. Hinweis: Der oeffentliche Link ist danach nicht mehr erreichbar. +3. Public URL als Kontext. +4. Aktionen: Danger- oder Secondary-Button `Unpublish`, sekundar `Abbrechen`. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Confirm | Nutzer bestaetigt Public-Auswirkung. | Nur dokumentieren | +| Laden | Statuswechsel wird gespeichert. | Wiederverwenden | +| Erfolg | Builder zeigt Draft/Unpublished. | Toast/Statuswechsel | +| Fehler | Unpublish fehlgeschlagen. | Nur dokumentieren | + +## Subframe + +Noch kein eigener Subframe-Frame. Falls David einen public-wirksamen Confirm sehen will, ist M02 ein sinnvoller Kandidat. + +## Notizen + +Publish selbst bleibt Inline-Check. Unpublish braucht Confirm, weil externe Nutzer betroffen sind. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md new file mode 100644 index 00000000..4a71563e --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md @@ -0,0 +1,67 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: M03 +screen: Archive Confirm +typ: Confirm Modal +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: von S01 More-Menue +subframe: "-" +--- + +# M03 - Archive Confirm + +## Ziel + +Interne Nutzer bestaetigen bewusst, dass ein Formular archiviert und nicht mehr normal bearbeitet wird. + +## Pattern / Archetyp + +D5 Confirm-Modal. + +## Daten + +- Formularname +- Publish-Status +- Anzahl Felder +- Hinweis auf Public-Verfuegbarkeit +- Hinweis auf spaetere Duplikat-Option + +## Aktionen + +- `Drchivieren` +- `Abbrechen` + +## Verhalten + +- Drchivieren liegt im More-Menue, nicht als Hauptaktion. +- Der Confirm erklaert, ob die Public-Version deaktiviert wird oder ob vorher Unpublish noetig ist. +- Nach Drchivierung wird S01 read-only oder verlaesst den Bearbeitungsmodus. +- Primaere naechste Aktion ist meist `Duplizieren` oder zur Forms-Liste zurueck, aber Forms-Liste ist nicht Teil von D-FORM. + +## Layout / Inhalt + +1. Headline `Formular archivieren?` +2. Kurztext, dass das Formular nicht mehr aktiv bearbeitet werden soll. +3. Hinweis auf Public-Link-Folge. +4. Aktionen: Danger-Button `Drchivieren`, sekundar `Abbrechen`. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Confirm | Sicherheitsfrage vor Drchivierung. | Nur dokumentieren | +| Published | Hinweis auf Public-Folge. | Nur dokumentieren | +| Laden | Drchivierung wird gespeichert. | Wiederverwenden | +| Fehler | Drchivieren fehlgeschlagen. | Nur dokumentieren | + +## Subframe + +Kein eigener Hauptscreen. Nur als Confirm-Zustand dokumentieren, ausser David will Risiko-Modals gesammelt bauen. + +## Notizen + +Archive ist nicht dasselbe wie Unpublish. Falls das Produkt beides koppelt, muss Development/Produkt das final festlegen. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md new file mode 100644 index 00000000..497f6079 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md @@ -0,0 +1,60 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: M04 +screen: Unsaved Changes Confirm +typ: Confirm Modal / Browser Guard +umsetzung: Nur dokumentieren +status: Vor Subframe / dokumentiert +route: beim Verlassen von S01 mit Dirty State +subframe: "-" +--- + +# M04 - Unsaved Changes Confirm + +## Ziel + +Interne Nutzer verlieren keine ungespeicherten Builder-Aenderungen, wenn sie S01 verlassen. + +## Pattern / Archetyp + +Confirm-Dialog oder Browser Navigation Guard. + +## Daten + +- Dirty State +- letzter Speicherzeitpunkt +- ob Save aktuell moeglich ist +- ob Publish-Check noch Blocker hat + +## Aktionen + +- `Speichern und verlassen` +- `Ohne Speichern verlassen` +- `Abbrechen` + +## Verhalten + +- Der Zustand tritt nur auf, wenn ungespeicherte Aenderungen existieren. +- Bei normalem Wechsel zwischen S01-Modi erscheint kein Dialog. +- Beim Wegnavigieren ueber Breadcrumb, Routewechsel oder Browser-Zurueck wird gewarnt. +- Wenn Autosave voll zuverlaessig ist, kann der Zustand zu einem kurzen Save-Hinweis reduziert werden. + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Dirty | Aenderungen noch nicht gespeichert. | Nur dokumentieren | +| Save moeglich | Nutzer kann speichern und verlassen. | Nur dokumentieren | +| Save fehlgeschlagen | Nutzer soll im Builder bleiben koennen. | Nur dokumentieren | +| Keine Aenderungen | kein Confirm noetig. | Wiederverwenden | + +## Subframe + +Kein eigener Subframe-Screen. Standard-Guard, nur dokumentieren. + +## Notizen + +Dieser Zustand ist wichtig fuer Builder-Vertrauen, aber kein D-FORM-Hauptframe. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Simple Builder Neuausrichtung.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Simple Builder Neuausrichtung.md new file mode 100644 index 00000000..d8b44a57 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Simple Builder Neuausrichtung.md @@ -0,0 +1,156 @@ +--- +kind: design-direction +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +status: Review-ready / Subframe Draft gebaut +stand: 2026-07-09 +--- + +# Simple Builder Neuausrichtung + +## Warum + +Der bisherige S01 ist fachlich vollstaendig, wirkt fuer normale Handwerksbetriebe aber zu schwer. Nutzer sollen nicht das Gefuehl haben, einen Automations- oder CRM-Editor bedienen zu muessen, wenn sie nur ein Anfrageformular erstellen wollen. + +Neue Richtung: einfacher Formular-Editor nach Google-Forms-Gefuehl, aber mit HiveGrid-Logik im Hintergrund. + +## Grundsatz + +| Alt | Neu | +|---|---| +| Palette + Canvas + Inspector dauerhaft sichtbar | Ein ruhiger Fragen-Editor mit einzelnen Fragekarten | +| Viele Arbeitsmodi gleichzeitig | Nur das zeigen, was fuer den naechsten Schritt gebraucht wird | +| Logic, Actions, Mapping sichtbar als Profi-Module | Logic/Lead-Verknuepfung als einfache Zusatzoptionen | +| 12 technische Feldtypen | Verstaendliche Fragetypen | +| Nutzer baut Verknuepfungen selbst | Lead-Formular ist automatisch aktiv, zeigt aber `Felder zuweisen` verstaendlich im Editor | + +## Neue Screen-Idee + +| ID | Screen | Ziel | +|---|---|---| +| S00 | [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] | Formular-Zentrale als erste Seite: finden, mehrfach filtern, bearbeiten, neu erstellen. | +| E01 | [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]] | Empty State, wenn noch kein Formular existiert. | +| E02 | [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]] | Empty State, wenn Suche/Filter nichts finden. | +| S01 | [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] | Nutzer waehlt zuerst, welche Art Formular er bauen will. | +| S02 | [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]] | Haupt-Editor fuer alle Formulararten, jeweils mit Vorlage/Startfragen. | +| S02L | [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]] | Lead-spezifischer Zustand im S02-Look: Formularfragen Lead-Feldern zuweisen. | +| E05 | [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]] | Fehlerzustand, wenn eine Lead-Zuweisung fehlt oder nicht moeglich ist. | +| S03 | [[Screens/06 S03 Formular Design|S03 Formular Design]] | Design-Tab mit Logo, Farben und Live-Vorschau. | +| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | Public Zielbild fuer Kunden. | +| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | Erfolg nach Absenden. | +| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | Public-Blocker, wenn Formular nicht erreichbar ist. | +| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | Public Fehlerzustand mit erhaltenen Werten. | +| S05 | [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]] | Antworten-Tab als Excel-/Tabellenansicht ohne Kennzahl-Kacheln. | +| E03 | [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]] | Empty State, wenn ein Formular noch keine Einsendungen hat. | +| E04 | [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]] | Error State, wenn Excel/CSV-Export scheitert. | + +S01B/S01C/S01D/S01E sind gebaut, aber nicht mehr Hauptfluss. Sie liegen als spaetere Varianten bzw. Referenz bei 80-83. + +## Einfacher Ablauf + +```text +S00 Formulare verwalten +-> Neues Formular +-> S01 Formularart auswaehlen +-> S02 mit passender Vorlage/Startfragen +-> Design: S03 +-> Public Zielbild: S04 und Public States +-> Antworten/Export: S05 +``` + +S00 bleibt bewusst knapp: vier Karten, kurze Texte, unten `Weiter`. Keine zweite Vorlagen-Auswahl im selben Screen. + +## Formulararten + +| Art | Fuer wen | Was passiert automatisch? | +|---|---|---| +| Website-/Externes Formular | Kunden oder Interessenten fuellen es per Link/Website aus. | Public Link, mCaptcha, Datenschutz-Hinweis. | +| Lead-Formular | Neue Kundenanfragen sollen direkt im Vertrieb landen. | Kontakt-/Anfragefelder werden vorgeschlagen, Lead-Erstellung ist aktiv, `Felder zuweisen` ist sichtbar. | +| Fragebogen / Umfrage | Feedback, Zufriedenheit, kurze Abfragen. | Antworten werden gesammelt und als Auswertung vorbereitet, keine Lead-Pipeline. | +| Internes Formular | Mitarbeiter melden etwas intern, z. B. Material, Rueckruf, Schaden. | Kein Public-Marketing-Kontext, interne Sicht und interne Ablage. | + +## Fragetypen statt Feldtypen + +| Fragetyp | UI-Begriff | +|---|---| +| Einzeiliger Text | Kurzantwort | +| Mehrzeiliger Text | Absatz | +| Single Select | Multiple Choice | +| Multi Select | Mehrfachauswahl | +| Select | Drop-down | +| Datei / Bild | Datei oder Bild hochladen | +| Datum | Datum | +| Zeit | Uhrzeit | + +Email, Telefon und Name koennen beim Lead-Formular als vorgeschlagene Startfragen erscheinen, statt als technische Sondertypen laut zu werden. + +Bewusst nicht im aktuellen S02-Hauptdropdown: Lineare Skala, Bewertung, Multiple-Choice-Raster und Kaestchenraster. Diese Typen koennen spaeter wieder diskutiert werden, werden jetzt aber nicht gebaut. + +## Was bleibt aus unserer bisherigen Logik + +- Public Formular S04 bleibt Zielbild fuer Kunden. +- mCaptcha bleibt fuer externe Formulare. +- Publish-Blocker bleiben, aber einfacher formuliert. +- Logic bleibt moeglich, aber als `Bedingung` an einer Frage. +- Actions bleiben im Screen. Bei Lead-Formularen wird `Lead anlegen` als einfache Card mit `Felder zuweisen` gezeigt. +- Link/QR/Einbetten bleiben moeglich, aber im Veroeffentlichen-/Public-Link-Kontext statt als eigener Reiter. + +## Empfehlung + +S02 wurde in Subframe gebaut, weil es am naechsten an Google Forms liegt und schnell vergleichbar ist. + +S01B wurde als zweite Alternative gebaut, ist aktuell aber nicht Hauptfluss. + +S01C/S01D/S01E wurden als Beispiel-Editoren gebaut, sind aktuell aber nur Referenz. Im Hauptfluss oeffnen alle Formulararten S02 mit anderer Vorlage/Startfragen. + +Der alte ADV-S01 und die Detailseiten D07/D08/D09 bleiben als fachliche Vollstaendigkeits-Referenz erhalten, sollten aber nicht mehr die erste Empfehlung fuer Handwerker sein. + +## Ergaenzung: Lead Felder zuweisen + +Nach David-Feedback reicht der reine Hinweis `Lead-Verknuepfung aktiv` nicht. Nutzer muessen sehen koennen, welche Frage in welches Lead-Feld geschrieben wird. + +Entscheidung: + +- Keine Advanced-Mapping-Tabelle. +- Gleicher Look wie S02. +- Die blaue Lead-Hinweis-Card nutzt dieselbe Struktur wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts. +- Dropdown-Vorlage fuer jede Zuweisung. +- Pflicht: Name, Kontaktweg und Beschreibung. +- Optional: Bereich, Datei/Bild, Quelle. +- Nicht passende Optionen werden verhindert oder disabled mit Begruendung gezeigt. +- Wenn eine Zuweisung unmoeglich ist, greift E05. + +## Ergaenzung: Verwaltung und Tabs + +Nach der Formularart-Auswahl braucht der Nutzer auch einen ruhigen Ort, an dem alle Formulare verwaltet werden. Dafuer wurde S00 als Formular-Zentrale ergaenzt. + +Innerhalb eines Formulars bleiben die Reiter bewusst einfach: + +| Reiter | Bedeutung | +|---|---| +| Fragen | Formularfelder bauen und bearbeiten. | +| Design | Logo, Farben und Darstellung fuer die Kundensicht anpassen. | +| Antworten | Einsendungen als einfache Tabelle ansehen und exportieren. | + +Link, QR-Code und Einbettung werden nach dem Veroeffentlichen bzw. im Public-Link-Kontext verwaltet, nicht als eigener Hauptreiter. + +## Subframe-Links + +| Screen | Subframe | +|---|---| +| S01 Formularart auswaehlen | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit | +| S02 Einfacher Fragen Editor | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit | +| S02L Lead Felder zuweisen | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit | +| E05 S02 Lead Zuweisung pruefen | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit | +| S00 Formulare verwalten | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit | +| S03 Formular Design | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit | +| S04 Oeffentliches Formular | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit | +| V01 Public Erfolg oder Redirect | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit | +| V02 Public Formular nicht verfuegbar | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit | +| V03 Public Captcha oder Submit Fehler | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit | +| S05 Antworten Tabelle | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit | +| E01 S00 Keine Formulare | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit | +| E02 S00 Keine Treffer | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit | +| E03 S05 Keine Antworten | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit | +| E04 S05 Export Fehler | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit | diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bau Log.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bau Log.md new file mode 100644 index 00000000..5bf39770 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bau Log.md @@ -0,0 +1,202 @@ +--- +kind: subframe-build-log +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +status: Review-ready / Subframe Draft gebaut +stand: 2026-07-09 +--- + +# Subframe Bau Log - D-FORM + +## Projekt + +Subframe-Projekt: `Basedesign` +Project ID: `f023064a5ca0` +Flow: `(MCP) WF-D-FORM Form Builder` +Flow-Link: https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad + +## Gebaut + +| Nr. | ID | Screen | Status | Subframe | +|---|---|---|---|---| +| 01 | S00 | Formulare verwalten | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit | +| 02 | E01 | S00 Keine Formulare | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit | +| 03 | E02 | S00 Keine Treffer | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit | +| 04 | S01 | Formularart auswaehlen | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit | +| 05 | S02 | Einfacher Fragen Editor | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit | +| 05b | S02L | Lead Felder zuweisen | Hauptfluss / Lead State | https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit | +| 05c | E05 | S02 Lead Zuweisung pruefen | Hauptfluss / Lead Error | https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit | +| 06 | S03 | Formular Design | Hauptfluss | https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit | +| 07 | S04 | Oeffentliches Formular | Public Zielbild | https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit | +| 08 | V01 | Public Erfolg oder Redirect | Public State | https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit | +| 09 | V02 | Public Formular nicht verfuegbar | Public State | https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit | +| 10 | V03 | Public Captcha oder Submit Fehler | Public State | https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit | +| 11 | S05 | Antworten Tabelle | Hauptfluss / Auswertung | https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit | +| 12 | E03 | S05 Keine Antworten | Hauptfluss / Empty | https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit | +| 13 | E04 | S05 Export Fehler | Hauptfluss / Error | https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit | +| 80 | S01B | Gefuehrter Fragen Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d0fb9c3d-4b03-4d59-bd98-9f668ab018eb/edit | +| 81 | S01C | Website Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/d7d33e94-5c12-48e8-8ec6-1e94590ee89c/edit | +| 82 | S01D | Umfrage Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/5abd7799-7058-40b3-9772-884cbda97b9c/edit | +| 83 | S01E | Internes Formular Editor | Spaeter / Referenz | https://app.subframe.com/f023064a5ca0/design/ea08fd1c-1a76-4e2c-b27c-1091baa0586a/edit | +| 90 | ADV-S01 | Form-Builder Canvas | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/e5502f88-9858-460e-abae-671f28464270/edit | +| 90b | ADV-S01-2 | Form-Builder Canvas 2 | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/9529ac6f-eb71-4e5c-8774-7cebe9c8162c/edit | +| 91 | D07 | Logic Regel Detail | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/07b60457-8151-46b9-ba34-34eceffc08bb/edit | +| 92 | D08 | Action Detail mit Mapping | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/0759d779-91f5-4e06-b1d6-7cd0095461ea/edit | +| 93 | D09 | Publish Blocker Summary | Advanced / Referenz | https://app.subframe.com/f023064a5ca0/design/211e8ca7-fc0b-4c52-a4a4-a1e660209e58/edit | + +## Qualitaetscheck Builder + +- ADV-S01 ist interne Advanced-Mitarbeitersicht, kein Public Formular. +- ADV-S01 nutzt das vorhandene Subframe `Default Page Layout`. Keine eigene Sidebar nachbauen. +- Die extra generierte Seite `ADV-S01 Form-Builder Canvas Default Layout` wurde geloescht, weil sie die Sidebar selbst nachgebaut hatte. +- ADV-S01-2 Form-Builder Canvas 2 liegt als neue Builder-Basis im gleichen Flow. +- S01 ist als vereinfachter Einstieg gebaut: Nutzer waehlt Formularart vor dem Builder. +- S01 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S01 enthaelt Website-/Externes Formular, Lead-Formular, Fragebogen/Umfrage und Internes Formular. +- S01 wurde am 2026-07-08 reduziert: keine doppelte Vorlagenzeile und keine einzelnen `Auswaehlen`-Links in den Karten; Auswahl ueber Karte + `Weiter`. +- S01 macht Lead-Formular bewusst einfach: Antworten werden automatisch als Lead gespeichert, kein Mapping fuer normale Nutzer. +- S02 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S02 ist die Google-Forms-nahe Alternative: Titelkarte, Fragekarten, Google-Forms-nahe Fragetyp-Auswahl, mehrere editierbare Optionen, Pflichtfrage-Toggle und erweiterte Werkzeugleiste. +- S02 zeigt Lead-Verknuepfung als ruhige blaue Card. Die Card nutzt denselben Layout-Aufbau wie die gruene `Lead anlegen`-Card: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktionen rechts. +- Arbeitsentscheidung: S02 ist aktuell der Haupt-Editor fuer alle Formulararten. S01B/S01C/S01D/S01E bleiben spaetere Varianten bzw. Referenz. +- S02-Fragetyp-Dropdown zeigt den aktuell gewaehlten Typ, z. B. `Multiple-Choice-Frage`; `Fragetyp` ist kein sichtbarer Wert. +- Im aktuellen S02-Hauptdropdown bleiben nur: Kurzantwort, Absatz, Multiple-Choice-Frage, Mehrfachauswahl, Drop-down, Datei oder Bild hochladen, Datum und Zeit. Lineare Skala, Bewertung und Raster sind gestrichen. +- In S02 bleiben Logic, Actions und Publish-Blocker einfach: `Bedingung` an der Frage, `Nach Absenden`/Lead anlegen als Card mit `Felder zuweisen`, Publish-Blocker als Banner/Popover im selben Screen. +- S02L ist gebaut: Lead-Felder werden per Dropdown-Vorlage Formularfragen zugewiesen. Die blaue Lead-Card nutzt dort denselben Aufbau wie in S02. +- E05 ist gebaut: unmoegliche oder fehlende Lead-Zuweisungen werden sichtbar markiert. +- Layout-Hinweis fuer S02L/E05: Inhaltlich sind beide Zustaende gebaut. In Subframe bei der finalen Sichtpruefung einmal kontrollieren, ob das vorhandene `Default Page Layout` aktiv ist. +- S01B nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S01B ist die gefuehrte Alternative: Schrittleiste, linke Fragenliste, eine aktive Fragekarte und rechte Hilfe-/Preview-Zusammenfassung. +- S01B zeigt Lead-Verknuepfung als einfache aktive Einstellung mit Ziel-Pipeline/Team, ohne Mapping-Panel. +- S01C nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S01C ist das Beispiel fuer Website-/Externes Formular: oeffentliche Anfrage, Public-Link-Hinweis, mCaptcha/Datenschutz, kein Lead-Mapping. +- S01D nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S01D ist nur Referenz fuer Fragebogen/Umfrage; im aktuellen Hauptfluss keine Skala, Bewertung oder Raster bauen. +- S01E nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S01E ist das Beispiel fuer Internes Formular: interne Meldung/Materialbedarf, Team-Ziel, keine Public-Link- oder Lead-Pipeline-Logik. +- S01C und S01E wurden am 2026-07-07 neu aufgebaut, weil die alten Subframe-IDs nicht mehr auffindbar waren. +- S00 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S00 ist die Formular-Zentrale: Mehrfachfilter nach Status und Art, Suche, Sortierung, Tabelle und Zeilenaktionen. +- S00 zeigt mehrere aktive Status-Filter; die Art-Filter stehen separat bereit, damit nicht nur ein einzelner Tab moeglich wirkt. +- S03 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S03 ist der Design-Tab: Logo, Akzentfarbe, Theme, Formularbreite, Datenschutz-Hinweis und Live-Vorschau der Kundensicht. +- S05 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- S05 ist der Antworten-Tab: Excel-aehnliche Tabelle, Suche, erweiterter Zeitraumfilter und Excel/CSV-Export. Keine Kennzahl-Kacheln, damit die Ansicht ruhig bleibt. +- S05 hat keinen `Link teilen`-Button; Teilen/Link gehoert in den Veroeffentlichen-/Public-Link-Kontext. +- E01/E02 decken die wichtigen leeren Zustaende der Formular-Zentrale ab: noch keine Formulare und Suche/Filter ohne Treffer. +- E03/E04 decken die wichtigen Zustaende im Antworten-Tab ab: noch keine Antworten und Export-Fehler. +- Layout-Check fuer E01-E04: In Subframe die Page Layout Auswahl pruefen und bei Bedarf `Default Page Layout` setzen. Per MCP kann ich Inhalte bauen/editieren, aber den Page-Layout-Typ nicht verlaesslich setzen. +- ADV-S01 zeigt Topbar mit Save, Preview, Share und Publish. +- ADV-S01 zeigt links die Feld-Palette, mittig den Canvas und rechts den Feld-Inspector. +- ADV-S01 macht die Arbeitsmodi Builder, Logik, Aktionen, Freigabe, Vorschau und Einstellungen sichtbar. +- ADV-S01 zeigt einen konkreten Publish-Blocker fuer ein Select-Feld ohne Optionen. +- D07 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- D07 zeigt den Logik-Modus mit Regel-Liste, gewaehltem Regel-Detail, Test/Preview, Inline-Validation und Publish-Blocker-Hinweis. +- D08 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- D08 zeigt den Aktionen-Modus mit Action-Liste, Add-Action-Popover, Mapping-Tabelle, Ziel-/Pipeline-Fehlern, Test/Preview und Publish-Blocker-Hinweis. +- D09 nutzt das vorhandene `Default Page Layout`, nicht eine selbst nachgebaute Sidebar. +- D09 zeigt Publish als blockierten internen Zustand: deaktivierter Publish-Button, 5 harte Blocker, nicht-blockierende Warnungen, Sprungziele und erneute Pruefung. +- D09 bleibt Inline Summary/Banner im Builder und ist kein Modal/Dialog. + +## Qualitaetscheck Public + +- S04 ist Kundensicht ohne App-Shell. +- S04 zeigt Tenant, Formular-Intro, Name, Email, Telefon, Bereich, Beschreibung, Datei/Foto, Datenschutz-Checkbox, mCaptcha und Submit. +- V01 bestaetigt klar, dass die Anfrage angekommen ist und deckt Redirect ab. +- V02 ersetzt rohe 404/500-Fehler durch einen ruhigen Public-Blocker. +- V03 behaelt Werte sichtbar und zeigt Captcha-, Upload- und Submit-Fehler ohne technische Details. +- `File Upload` nutzt in S04 und V03 `fullwith={true}`, damit Upload-Felder die verfuegbare Formularbreite nutzen. +- S04 und V03 nutzen jetzt die `Card`-Komponente fuer das zentrale Formularpanel. Die Groesse wird pro Instanz ueber `className` erweitert, nicht global an der Card-Komponente. +- S04 und V03 sind optisch angeglichen: beide nutzen `max-w-[760px]`, dieselbe Card-Logik und eine einspaltige Feldreihenfolge. V03 zeigt denselben Aufbau mit erhaltenen Werten plus Fehlerbanner/Inline-Fehler. + +## Komponenten-Notiz + +Die Subframe-Komponente `File Upload` hat eine Boolean-Prop `fullwith`. + +Stand 2026-07-06 wurde die Komponente angepasst: + +- `fullwith={true}` wirkt im Default-/Hover-/Error-Dropbereich. +- `fullwith={true}` wirkt jetzt auch im `uploading`-Zustand. +- `fullwith={true}` wirkt jetzt auch im `uploaded`-Zustand. + +Merksatz: In Formularen nicht nur `className="w-full"` setzen, sondern bei `File Upload` auch `fullwith={true}` verwenden. + +## Noch offen + +Fuer den alten D-FORM-Scope sind keine empfohlenen Frames mehr offen. + +Durch Davids neues Lead-Feedback wurden zwei Zustaende ergaenzt und in Subframe gebaut: S02L `Lead Felder zuweisen` und E05 `S02 Lead Zuweisung pruefen`. S00, S01, S02, S02L/E05, S03, S04/Public States, S05 und E01-E04 bilden weiter den aktuellen Hauptfluss. + +S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09 sind gebaut, aber aktuell nicht relevant fuer den Hauptfluss. Sie bleiben als spaetere Varianten bzw. Referenzseiten erhalten. + +Subframe-Seitenliste: Per MCP kann ich bestehende Pages aktuell nicht umbenennen oder per Drag-and-drop sortieren. Fachlich gilt die Review-Reihenfolge unten. Falls die sichtbare Subframe-Liste sauber sortiert werden soll, die Pages in Subframe manuell umbenennen/ziehen. + +Empfohlene sichtbare Sortierung: + +1. `01 S00 Formulare verwalten` +2. `02 E01 S00 Keine Formulare` +3. `03 E02 S00 Keine Treffer` +4. `04 S01 Formularart auswaehlen` +5. `05 S02 Einfacher Fragen Editor` +6. `05b S02L Lead Felder zuweisen` +7. `05c E05 S02 Lead Zuweisung pruefen` +8. `06 S03 Formular Design` +9. `07 S04 Oeffentliches Formular` +10. `08 V01 Public Erfolg oder Redirect` +11. `09 V02 Public Formular nicht verfuegbar` +12. `10 V03 Public Captcha oder Submit Fehler` +13. `11 S05 Antworten Tabelle` +14. `12 E03 S05 Keine Antworten` +15. `13 E04 S05 Export Fehler` +16. `80 S01B Gefuehrter Fragen Editor` +17. `81 S01C Website Formular Editor` +18. `82 S01D Umfrage Editor` +19. `83 S01E Internes Formular Editor` +20. `90 ADV Form-Builder Canvas` +21. `90b ADV Form-Builder Canvas 2` +22. `91 D07 Logic Regel Detail` +23. `92 D08 Action Detail mit Mapping` +24. `93 D09 Publish Blocker Summary` + +M01-M04 bleiben dokumentierte Confirm-Zustaende und werden nur gebaut, wenn David sie explizit anfordert. + +## Modal-Regel fuer spaeter + +Die vier bereits gebauten Public-Screens sind keine Modals: + +- S04 Oeffentliches Formular +- V01 Public Erfolg oder Redirect +- V02 Public Formular nicht verfuegbar +- V03 Public Captcha oder Submit Fehler + +Falls spaeter D-FORM-M-Zustaende gebaut werden, muessen sie als `Dialog`-Komponente gebaut werden: + +- M01 Feld loeschen Confirm +- M02 Unpublish Confirm +- M03 Archive Confirm +- M04 Unsaved Changes Confirm + +D07 und D08 bleiben Panel/Drawer-Zustaende im Builder. D09 bleibt Inline Summary/Banner. Diese drei sind keine Dialoge. + +## Naechster Subframe-Schritt + +Review in Subframe in dieser Reihenfolge: + +1. `S00 Formulare verwalten` +2. `E01 S00 Keine Formulare` +3. `E02 S00 Keine Treffer` +4. `S01 Formularart auswaehlen` +5. `S02 Einfacher Fragen Editor` +6. `S02L Lead Felder zuweisen` +7. `E05 S02 Lead Zuweisung pruefen` +8. `S03 Formular Design` +9. `S04 Oeffentliches Formular` +10. `V01 Public Erfolg oder Redirect` +11. `V02 Public Formular nicht verfuegbar` +12. `V03 Public Captcha oder Submit Fehler` +13. `S05 Antworten Tabelle` +14. `E03 S05 Keine Antworten` +15. `E04 S05 Export Fehler` + +Danach nur bei Bedarf die spaeteren Referenzseiten pruefen: S01B/S01C/S01D/S01E, ADV-S01 Canvas 1/2 und D07/D08/D09. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bauplan.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bauplan.md new file mode 100644 index 00000000..f95f0ad4 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Subframe Bauplan.md @@ -0,0 +1,471 @@ +--- +kind: subframe-build-plan +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +status: Bauplan / umgesetzt als Review-ready Subframe Draft +stand: 2026-07-09 +--- + +# Subframe Bauplan - D-FORM + +Ziel: D-FORM so in Subframe bauen, dass der Unterschied sofort klar wird: + +- **S02 Einfacher Fragen Editor** = internes Werkzeug fuer Mitarbeiter. +- **S04 Oeffentliches Formular** = fertiges Formular fuer Kunden/Submitter. +- **Preview in S02** = Vorschau auf S04, kein PDF. +- **Logic** = steuert, welche Felder im Kundenformular sichtbar werden. +- **Actions** = passiert nach dem Absenden, z. B. Email, Lead, Kontakt, Projekt, Task. + +## 1. Verstaendnisanker + +```text +Mitarbeiter baut in S02: +"Welche Fragen sollen Kunden beantworten?" + +Kunde sieht S04: +"Ich fuelle schnell ein Formular aus und sende es ab." + +Nach Submit: +Submission wird gespeichert und Actions koennen laufen. +``` + +Der Kunde sieht nie den Builder. Der Kunde sieht nur die public Formularseite. + +## 2. Review-Reihenfolge + +Empfehlung fuer Review und Weiterarbeit: zuerst den aktuellen Hauptfluss pruefen. Spaetere Varianten und Advanced-Zustaende stehen bewusst hinten. + +| Reihenfolge | Frame | Warum zuerst / danach? | +|---|---|---| +| 1 | S00 Formulare verwalten | Einstieg in den Arbeitsbereich: vorhandene Formulare, Mehrfachfilter, Status, Aktionen. | +| 2 | E01 S00 Keine Formulare | Wichtiger Empty State der Formular-Zentrale. | +| 3 | E02 S00 Keine Treffer | Wichtiger Filter-/Suchzustand der Formular-Zentrale. | +| 4 | S01 Formularart auswaehlen | Nutzer entscheidet, welche Art Formular gebaut wird. | +| 5 | S02 Einfacher Fragen Editor | Aktueller Haupt-Editor fuer alle Formulararten. | +| 6 | S02L Lead Felder zuweisen | Lead-Zustand im gleichen S02-Look: Formularfragen Lead-Feldern zuweisen. | +| 7 | E05 S02 Lead Zuweisung pruefen | Optionaler Fehlerzustand, wenn eine Zuweisung fehlt oder nicht moeglich ist. | +| 8 | S03 Formular Design | Design-Tab: Logo, Farben, Public Preview. | +| 9 | S04 Oeffentliches Formular | Zielbild: So sieht das fertige Formular fuer Kunden aus. | +| 10 | V01 Public Erfolg oder Redirect | Zeigt, was nach Absenden passiert. | +| 11 | V02 Public Formular nicht verfuegbar | Zeigt Public-Blocker ohne App-Kontext. | +| 12 | V03 Public Captcha oder Submit Fehler | Zeigt Public-Fehler, Werte bleiben erhalten. | +| 13 | S05 Antworten Tabelle | Antworten-Tab als Excel-/Tabellenansicht. | +| 14 | E03 S05 Keine Antworten | Wichtiger Empty State im Antworten-Tab. | +| 15 | E04 S05 Export Fehler | Wichtiger Fehlerzustand beim Export. | +| 80 | S01B Gefuehrter Fragen Editor | Spaetere Alternative fuer Nutzer, die noch mehr Fuehrung brauchen. | +| 81 | S01C Website Formular Editor | Spaetere Beispiel-/Referenzseite fuer Website-/externes Formular. | +| 82 | S01D Umfrage Editor | Spaetere Beispiel-/Referenzseite fuer Fragebogen/Umfrage. | +| 83 | S01E Internes Formular Editor | Spaetere Beispiel-/Referenzseite fuer internes Mitarbeiterformular. | +| 90 | ADV-S01 Form-Builder Canvas | Aelterer Profi-Canvas als Referenz. | +| 90b | ADV-S01-2 Form-Builder Canvas 2 | Advanced-/Referenz-Builder; nicht mehr erste Nutzerrichtung. | +| 91 | D07 Logic Regel Detail | Advanced-Zustand fuer Sichtbarkeitsregeln. | +| 92 | D08 Action Detail mit Mapping | Advanced-Zustand fuer Nach-Submit-Aktionen. | +| 93 | D09 Publish Blocker Summary | Advanced-Zustand fuer Publish-Blocker. | + +M01/M02/M03/M04 und D10 bleiben dokumentiert und muessen nicht als erste Subframe-Frames gebaut werden. + +Stand 2026-07-09: Die einfachen Builder-Screens sind gebaut und werden fuer Review vor den alten Canvas-Entwuerfen einsortiert. S02L und E05 wurden nach Davids Lead-Feedback ergaenzt. Die Links stehen im [[Subframe Bau Log]]. Fuer die weitergebbare Version siehe [[00 Start hier - David]] und [[D-FORM David Uebergabe 2026-07-09]]. + +### Nutzerfluss fuer die Simple-Builder-Richtung + +```text +S00 Formulare verwalten +-> Neues Formular +-> S01 Formularart auswaehlen +-> je Auswahl: + Website / Extern -> S02 mit Website-/Extern-Vorlage + Lead -> S02 mit aktiver Lead-Verknuepfung -> S02L Felder zuweisen + Fragebogen / Umfrage -> S02 mit Umfrage-Startfragen + Intern -> S02 mit interner Formularvorlage +-> Design anpassen -> S03 +-> Public Zielbild pruefen -> S04/V01/V02/V03 +-> Antworten ansehen/exportieren -> S05 +``` + +Die Subframe-Seitenliste selbst ist nicht zwingend die Review-Reihenfolge. Fachlich gilt die Reihenfolge oben. + +### Noch relevante Error-/Empty-Zustaende + +| Bereich | Zustand | Eigener Screen noetig? | Notiz | +|---|---|---|---| +| S00 Verwaltung | Keine Formulare vorhanden | ja | E01 ist gebaut, weil die erste leere Nutzung fachlich wichtig ist. | +| S00 Verwaltung | Suche/Filter ohne Treffer | ja | E02 ist gebaut, weil Mehrfachfilter sonst schnell verwirren. | +| S01 Auswahl | Keine Formularart gewaehlt | nein | `Weiter` disabled oder Lead als Default vorausgewaehlt. | +| S02 | Frage ohne Label/Optionen | nein | Inline markieren; Publish-Blocker als Banner/Popover im selben Screen. | +| S02L Lead | Pflichtzuweisung fehlt | ja, optional E05 | Name, Kontaktweg und Beschreibung muessen zuweisbar sein. | +| S02L Lead | Feld passt nicht zum Lead-Feld | ja, optional E05 | Dropdown-Option disabled oder Zeile mit Fehler markieren. | +| S03 Design | Logo/Datei-Upload fehlschlaegt | nein | Inline am Upload oder Toast. | +| S05 Antworten | Keine Antworten | ja | E03 ist gebaut, weil neue Formulare anfangs leer sind. | +| S05 Antworten | Suche/Filter ohne Treffer | nein | Kleiner Empty State im Tabellenbereich reicht. | +| S05 Antworten | Export fehlgeschlagen | ja | E04 ist gebaut, weil Export fuer Arbeit/Weitergabe wichtig ist. | +| Public | Formular nicht verfuegbar | ja | V02 ist gebaut. | +| Public | Captcha/Submit-Fehler | ja | V03 ist gebaut. | +| Public | Submit erfolgreich | ja | V01 ist gebaut. | + +## 3. Exakte Subframe-Namen + +Flow-Name: + +- `(MCP) WF-D-FORM Form Builder` + +Frames / Designs: + +| ID | Subframe-Name | Typ | +|---|---|---| +| S00 | `S00 Formulare verwalten` | Formular-Zentrale | +| S01 | `S01 Formularart auswaehlen` | Einstieg / Auswahl | +| S02 | `S02 Einfacher Fragen Editor` | Simple Builder | +| S02L | `S02L Lead Felder zuweisen` | S02-Zustand / Lead Editor | +| E05 | `E05 S02 Lead Zuweisung pruefen` | Lead Mapping Error State | +| S03 | `S03 Formular Design` | Builder Tab | +| S04 | `S04 Oeffentliches Formular` | Public Form | +| V01 | `V01 Public Erfolg oder Redirect` | Public Feedback | +| V02 | `V02 Public Formular nicht verfuegbar` | Public Blocker | +| V03 | `V03 Public Captcha oder Submit Fehler` | Public Error | +| S05 | `S05 Antworten Tabelle` | Builder Tab | +| E01 | `E01 S00 Keine Formulare` | Hauptfluss / Empty State | +| E02 | `E02 S00 Keine Treffer` | Hauptfluss / Empty State | +| E03 | `E03 S05 Keine Antworten` | Hauptfluss / Empty State | +| E04 | `E04 S05 Export Fehler` | Hauptfluss / Error State | +| S01B | `S01B Gefuehrter Fragen Editor` | Spaeter / Referenz | +| S01C | `S01C Website Formular Editor` | Spaeter / Referenz | +| S01D | `S01D Umfrage Editor` | Spaeter / Referenz | +| S01E | `S01E Internes Formular Editor` | Spaeter / Referenz | +| ADV-S01-2 | `ADV-S01-2 Form-Builder Canvas 2` | Advanced Builder / Referenz | +| ADV-S01 | `ADV-S01 Form-Builder Canvas` | Aelterer Bespoke Builder / Referenz | +| D07 | `D07 Logic Regel Detail` | Advanced / Referenz | +| D08 | `D08 Action Detail mit Mapping` | Advanced / Referenz | +| D09 | `D09 Publish Blocker Summary` | Advanced / Referenz | + +Hinweis: In der Subframe-Seitenliste tragen S01C, S01D, S01E, S03, S04 und S05 aktuell noch das Suffix `Layout`. Zielnamen fuer Review/Handoff sind die oben stehenden Namen ohne `Layout`. + +Nicht als erste Frames bauen: + +- `D01 Sharing Panel URL QR iFrame` +- `D02 Post-Submit Actions` +- `D03 Conditional Logic Editor` +- `D06 Feldkarten Menue` +- `D10 Builder Interaktionsfaelle` +- `M01 Feld loeschen Confirm` +- `M02 Unpublish Confirm` +- `M03 Archive Confirm` +- `M04 Unsaved Changes Confirm` + +## 4. Komponenten aus deinen Subframe Standards + +Diese vorhandenen Komponenten/Patterns sollen genutzt werden. + +| Bereich | Komponente | Einsatz in D-FORM | +|---|---|---| +| Layout | Default Page Layout | S00/S01/S02/S03/S05/E01-E04 als interne Hauptseiten im vorhandenen Subframe Page Layout. S01B-E, ADV-S01 Canvas und D07-D09 bleiben spaetere interne Referenzseiten. S04/V01/V02/V03 bleiben public ohne App-Shell. | +| Navigation | Breadcrumb | S02 oben: `Formulare / SHK Anfrageformular`. | +| Navigation | Page Header with Back | S02 Header mit Zurueck, Formname, Status, Save, Preview, Share, Publish. | +| Navigation | Tabs | S02 Tabs: Fragen, Design, Antworten. ADV-S01 behaelt Builder, Logic, Actions, Sharing, Preview, Settings als Referenz. | +| Actions | Button | Save, Publish, Add Field, Add Action, Submit. | +| Actions | Icon Button | Feldkarten-Menue, More-Menue, Close/Archive-Trigger. | +| Form Inputs | Text Input | Name, Slug, Field Key, Email, Telefon. | +| Form Inputs | Textarea | Beschreibung, Success Message, langer Hilfetext. | +| Form Inputs | Select | Bereich, Operator, Zielfeld, Action-Typ, Pipeline. | +| Form Inputs | Multiselect / Checkbox Group | Multi-Select-Felder und Public Auswahlgruppen. | +| Form Inputs | Checkbox | Public Captcha/Consent, Boolean-Felder. | +| Form Inputs | Switch | Required, Logic aktiv, Action aktiv. | +| Form Inputs | File Upload | Public Datei-/Foto-Upload. | +| Feedback | Banner Alert | Publish Blocker, Public Submit Error, Draft Sharing Hinweis. | +| Feedback | Toast | Gespeichert, kopiert, published. | +| Data Display | Badge Feedback / Tag Label | Draft/Published, Pflicht, Fehler, Feldtyp, aktiv/inaktiv. | +| Data Display | Empty State | Leerer Canvas, keine Actions, keine Logic-Regeln. | +| Overlays | Dropdown Menu / Context Menu | Feldkarten-Menue, More-Menue. | +| Overlays | Confirm Dialog | M01/M02/M03/M04, nur dokumentiert oder spaeter kleine Frames. | +| Layout | Separator Divider | Inspector-Sektionen, Public Form-Abgrenzungen. | +| Utility | Tooltip | Disabled Actions, Rechte-Hinweise, Copy/Share-Hilfe. | + +## 5. Namens- und Variantenregeln + +Aus den Subframe UI Standards: + +- Size-Default heisst `Medium`, nicht `Default`. +- States: `default`, `hover`, `active`, `focus`, `disabled`, `loading`, `error`, `selected`. +- Varianten: `primary`, `secondary`, `tertiary`, `ghost`, `destructive`, `neutral`, `success`, `warning`, `information`. +- Form Field Anatomy: + - `label` + - `helpText` + - Control + - `message` +- Unterer Field-Text heisst immer `message`, nicht Helper, Label oder Help. +- Textnahe Controls nutzen `Radius Small`. +- `File Upload` hat die Boolean-Prop `fullwith`. Wenn ein Upload-Feld in einem Formularbereich die ganze verfuegbare Breite nutzen soll, immer `fullwith={true}` setzen. Das gilt besonders fuer Public Forms und Upload-Fehlerzustaende. + +## 5a. Modal-Regel + +Die gebauten Public-Screens `S02`, `V01`, `V02` und `V03` sind **keine** Modal-Screens. Sie sind Public Page States und duerfen mit einem zentrierten Container oder einer Card arbeiten. + +Fuer alle echten D-FORM-Modals gilt: + +- `M01 Feld loeschen Confirm` +- `M02 Unpublish Confirm` +- `M03 Archive Confirm` +- `M04 Unsaved Changes Confirm` + +Wenn einer dieser M-Zustaende spaeter in Subframe gebaut wird, muss die vorhandene Komponente `Dialog` verwendet werden. Nicht als normale Card bauen, nicht als Drawer bauen und nicht als eigener Public/Page-State. + +Abgrenzung: + +- `D07 Logic Regel Detail` = Panel/Drawer im Builder, kein Modal. +- `D08 Action Detail mit Mapping` = Panel/Drawer im Builder, kein Modal. +- `D09 Publish Blocker Summary` = Inline Banner/Summary im Builder, kein Modal. +- Public V01/V02 duerfen zwar card-artig zentriert aussehen, sind aber trotzdem volle Public-Zustaende und keine Dialoge. + +## 6. S04: fertiges Kundenformular + +S04 ist die einfache Seite, die der Kunde sieht. S02 bleibt der interne Fragen-Editor fuer Mitarbeiter. + +### Komponentenregel Public Form Panel + +Das eigentliche Formularpanel in `S04` und der Fehlerzustand in `V03` sollen die vorhandene `Card`-Komponente verwenden. Weil `Card` standardmaessig eher kompakt ist, bekommt die Instanz ein Breiten-Sondermass ueber `className`, z. B. `w-full`, `min-w-[0px]` und den max-width-Container der Seite. + +Wichtig: Dafuer keine globale `Card`-Variante nur fuer D-FORM anlegen und die globale Card nicht verbreitern. Das Sondermass gehoert an die konkrete Public-Form-Card. + +S04 und V03 sollen gleich aufgebaut sein: + +- gleicher Public-Container +- gleiche maximale Breite `max-w-[760px]` +- gleiche `Card`-Breite +- gleiche einspaltige Feldreihenfolge +- kein zweispaltiges Name/E-Mail-Layout, damit lange Namen und lange E-Mail-Adressen mehr Platz bekommen +- V03 ist derselbe Formularaufbau plus Fehlerbanner, erhaltene Werte und Inline-Fehler + +### Layout + +```text +Public Container + Public Header + Tenant Logo / Fallback + Anbietername + Formular Intro + Titel + Beschreibung + Form Body + Fields in Reihenfolge + Captcha / Schutz + Absende-Bereich + Footer +``` + +### Beispielinhalt + +| Element | Inhalt | +|---|---| +| Tenant | SHK Demo GmbH | +| Titel | SHK Anfrageformular | +| Beschreibung | Beschreiben Sie kurz Ihr Anliegen. Wir melden uns mit den naechsten Schritten. | +| Felder | Name, Email, Telefon, Bereich, Beschreibung, Fotos/Dokumente | +| Schutz | mCaptcha oder Sicherheitspruefung | +| Submit | Anfrage senden | + +### Wichtige Regel + +Keine App-Shell, keine Sidebar, keine internen Begriffe. Keine Woerter wie Submission, Action, Lead, Mapping, Webhook. + +## 7. S01 danach bauen: interne Werkstatt + +S01 ist nicht fuer Kunden. S01 ist fuer Mitarbeiter, die Formulare bauen. + +### Layout + +```text +Default Page Layout + vorhandene App-Shell des Layouts + vorhandene Header Navigation + Page Content + Header + Breadcrumb + Formname + Status Badge + Save + Preview + Share + Publish + More + Body + Left: Field Palette + Center: Canvas + Right: Inspector + Mode Tabs + Builder + Logic + Actions + Sharing + Preview + Settings +``` + +### Drei-Zonen-Builder + +| Zone | Aufgabe | Wichtig fuer Subframe | +|---|---|---| +| Linke Palette | Feldtypen hinzufuegen | 12 Feldtypen klar gruppieren. | +| Canvas Mitte | Formularstruktur bauen | Feldkarten, Dropzones, Fehler, Selected State. | +| Rechter Inspector | Feld konfigurieren | label, helpText, required, validation, options, message. | + +### Layout-Regel fuer interne Builder-Screens + +S00, S01, S02, S03, S05 und E01-E04 muessen in Subframe das vorhandene `Default Page Layout` verwenden. S01B-E, ADV-S01 Canvas und D07-D09 sind spaetere interne Referenzseiten und verwenden ebenfalls keine eigene Sidebar. Wichtig: Das Layout selbst bringt App-Shell/Navigation mit. In den Screens keine eigene Sidebar oder Header-Navigation nachbauen. + +Nicht verwenden fuer den Builder: `Blank`, public/zentrierte Form-Seiten oder `Default Page Layout with inner Sidebar`. Die innere Sidebar ist eher fuer Settings geeignet; der Builder hat bereits eigene Innenbereiche wie Feld-Palette, Canvas, Logic-Liste, Action-Liste und Inspector. + +Public-Screens S04, V01, V02 und V03 bleiben bewusst ohne App-Shell und ohne Sidebar. + +### Modus-Tabs + +| Modus | Was zeigen? | +|---|---| +| Builder | Palette + Canvas + Inspector. | +| Logic | Regel-Liste und D07 Detail. | +| Actions | Action-Liste und D08 Mapping. | +| Sharing | URL, QR, iFrame; Draft-Hinweis. | +| Preview | Vorschau von S04, kein PDF. | +| Settings | Slug, Success, Redirect, Branding, Limits. | + +## 8. D07 Logic Regel Detail + +Ziel: Eine einzelne Logic-Regel bauen. + +Subframe-Zustand: + +```text +Logic Mode + Left/Top: Regel-Liste + Detailpanel: D07 Logic Regel Detail +``` + +Inhalt: + +- Regelname +- Wenn-Feld +- Operator +- Wert +- Dann-Aktion: anzeigen / verstecken +- Zielfeld +- Aktiv Switch +- Test / Save +- Inline `message` bei Fehler + +Wichtig: + +- `Neue Regel` oeffnet kein Modal. +- Operator steuert, ob Wert gebraucht wird. +- Wenn Operator `ist leer`, verschwindet das Wertfeld. +- Unvollstaendige aktive Regel blockiert Publish. + +## 9. D08 Action Detail mit Mapping + +Ziel: Nach Submit festlegen, was passieren soll. + +Subframe-Zustand: + +```text +Actions Mode + Action-Liste + Add Action Popover + Detailpanel: D08 Action Detail mit Mapping +``` + +Inhalt: + +- Action-Typ +- Action-Name +- Status aktiv/inaktiv +- Ziel: Empfaenger, Pipeline, Webhook URL usw. +- Field-Mapping Tabelle: Ziel-Feld -> Form-Feld +- Pflichtmapping +- Teststatus +- Save / Test / Delete + +Wichtig: + +- Add Action oeffnet Popover/Auswahlpanel, kein grosses Modal. +- Mapping ist der Kern. +- Aktive Action ohne Pflichtmapping blockiert Publish. +- Inaktive unvollstaendige Action darf als Draft bleiben. + +## 10. D09 Publish Blocker Summary + +Ziel: Mitarbeiter versteht, warum Publish nicht geht. + +Subframe-Zustand: + +```text +ADV-S01 Header + Publish Button +ADV-S01 Body + D09 Summary Banner + Blocker-Liste mit Sprungzielen +``` + +Blocker: + +- Formularname fehlt +- Slug fehlt oder Konflikt +- Kein sichtbares Feld +- Feld ohne Label +- Select ohne Optionen +- Kaputte Logic +- Pflichtmapping fehlt +- Webhook URL ungueltig + +Wichtig: + +- Publish bleibt im Builder, kein Wizard. +- Jeder Blocker hat ein Sprungziel. +- Warnungen duerfen getrennt von Blockern angezeigt werden. + +## 11. Was NICHT passieren soll + +- Builder nicht wie Kundenformular bauen. +- Public Form nicht wie interne App bauen. +- Preview nicht als PDF verstehen. +- Logic nicht als PDF-/Dokumentgenerator verstehen. +- Actions nicht als kompletter Automation-Editor bauen. +- Confirm-Dialoge nicht vor D07/D08/D09 priorisieren. +- Keine neuen globalen Subframe Standards aus D-FORM ableiten. + +## 12. Umsetzungsstand in Subframe + +Subframe-Flow: + +https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad + +Gebaut und verlinkt: + +1. S00 Formulare verwalten +2. E01 S00 Keine Formulare +3. E02 S00 Keine Treffer +4. S01 Formularart auswaehlen +5. S02 Einfacher Fragen Editor +6. S02L Lead Felder zuweisen +7. E05 S02 Lead Zuweisung pruefen +8. S03 Formular Design +9. S04 Oeffentliches Formular +10. V01 Public Erfolg oder Redirect +11. V02 Public Formular nicht verfuegbar +12. V03 Public Captcha oder Submit Fehler +13. S05 Antworten Tabelle +14. E03 S05 Keine Antworten +15. E04 S05 Export Fehler +80. S01B Gefuehrter Fragen Editor +81. S01C Website Formular Editor +82. S01D Umfrage Editor +83. S01E Internes Formular Editor +90. ADV-S01 Form-Builder Canvas +90b. ADV-S01-2 Form-Builder Canvas 2 +91. D07 Logic Regel Detail +92. D08 Action Detail mit Mapping +93. D09 Publish Blocker Summary + +Gebaut nach Davids Lead-Feedback: + +- 05b. S02L Lead Felder zuweisen: https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit +- 05c. E05 S02 Lead Zuweisung pruefen: https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit + +Naechster Schritt: Review in Subframe mit Fokus auf S00 bis S05 plus S02L/E05. Die Seiten 80-93 bleiben spaeter/Referenz und werden nur bei Bedarf geprueft. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V01 Public Erfolg oder Redirect.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V01 Public Erfolg oder Redirect.md new file mode 100644 index 00000000..2ba6f162 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V01 Public Erfolg oder Redirect.md @@ -0,0 +1,106 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V01 +screen: Public Erfolg oder Redirect +typ: Public Feedback +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/{tenant}/{slug} +subframe: "https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit" +--- + +# V01 - Public Erfolg oder Redirect + +## Ziel + +Der Submitter versteht sicher, dass die Einreichung angekommen ist, oder wird sauber an ein konfiguriertes Redirect-Ziel weitergeleitet. + +## Pattern / Archetyp + +BESPOKE-Public Feedback. + +## Daten + +- Tenant-Logo/Fallback. +- Erfolgstitel. +- Erfolgstext aus Form-Konfiguration. +- Optionales Redirect-Ziel. +- Optionaler Link zur Website/zurueck. + +## Detail-Brainstorming + +Der wichtigste Punkt: Nach erfolgreichem Submit darf nichts so wirken, als sei die Anfrage unsicher oder verloren. Duch wenn Actions im Hintergrund fehlschlagen, bleibt die Public-Bestaetigung auf die gespeicherte Einreichung bezogen. + +### Varianten + +| Variante | Wann | UI | +|---|---|---| +| Success ohne Redirect | Kein Redirect konfiguriert. | Danke-Ansicht mit Erfolgstitel, Text und optionalem Zurueck-Link. | +| Success mit Auto-Redirect | Redirect URL konfiguriert. | Kurze Bestaetigung + Countdown/Weiterleitungshinweis. | +| Success mit manuellem Redirect | Auto-Redirect wird nicht sofort ausgefuehrt oder soll bestaetigt werden. | Button "Weiter" zur Zielseite. | +| Redirect fehlerhaft | Weiterleitung klappt nicht, Submission ist aber gespeichert. | Erfolg bleibt sichtbar; Link erneut oeffnen oder Anbieter kontaktieren. | + +### Copy-Vorschlag + +| Zustand | Copy-Richtung | +|---|---| +| Erfolg | "Danke, Ihre Dngaben wurden uebermittelt." | +| Naechster Schritt | "Wir melden uns, falls weitere Informationen benoetigt werden." | +| Redirect | "Sie werden gleich weitergeleitet." | +| Redirect-Fehler | "Ihre Dngaben sind angekommen. Die Weiterleitung konnte nicht geoeffnet werden." | + +### Nicht zeigen + +- Keine Action-Ausfuehrung. +- Kein Lead-/Projekt-/Task-Hinweis. +- Kein Webhook-/Automation-Status. +- Keine interne Submission-ID, ausser spaeter bewusst als Referenznummer geplant. + +## Aktionen + +- Bei Success ohne Redirect: Seite schliessen oder zur Website zurueck. +- Bei Redirect: automatisch oder per Button weiter. + +## Banner / Hinweise + +- Kein technischer ActionLog im Public UI. +- Keine internen Begriffe wie Lead, Projekt, Webhook oder Automation. + +## Toasts / Action-Feedback + +- Keine Toasts; Success-State ist die Rueckmeldung. + +## Meldungsentscheidung + +| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | +|---|---|---|---|---| +| Submit erfolgreich | Success-State | nein | Bauen | Anfrage ist angekommen. | +| Redirect konfiguriert | Success + Weiterleitung | nein | Bauen | Falls Redirect dauert, klare Zwischenmeldung. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Erfolgstext | Danke-/Bestaetigungsansicht. | Bauen | +| Redirect | Nutzer wird weitergeleitet. | Bauen | + +## Blockierende Error States + +| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion | +|---|---|---|---| +| Redirect-Ziel nicht erreichbar | Kurzer Fehler nach Submit, Einreichung bleibt erfolgreich. | Link erneut oeffnen | Anbieter kontaktieren | + +## Permissions / Gates + +- Keine Rolle. + +## Subframe + +https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit + +## Notizen + +Wichtig: Wenn Submit gespeichert wurde, darf ein kaputter Redirect nicht so wirken, als sei die Einreichung verloren. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V02 Public Formular nicht verfuegbar.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V02 Public Formular nicht verfuegbar.md new file mode 100644 index 00000000..8cda11d2 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V02 Public Formular nicht verfuegbar.md @@ -0,0 +1,115 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V02 +screen: Public Formular nicht verfuegbar +typ: Public Blocker +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/{tenant}/{slug} +subframe: "https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit" +--- + +# V02 - Public Formular nicht verfuegbar + +## Ziel + +Externe Nutzer landen nicht auf einem rohen 404/500, sondern bekommen eine ruhige, verstaendliche Meldung mit naechster Handlung. + +## Pattern / Archetyp + +BESPOKE-Public Blocker / A7 Public Error. + +## Daten + +- Tenant-Logo/Fallback, falls Tenant noch aufloesbar ist. +- Kurzer Titel. +- Klartext-Grund, soweit sicher: + - Formular nicht veroeffentlicht + - Formular archiviert + - Formular geschlossen + - Link ungueltig +- Optionaler Kontakt-/Website-Link. + +## Detail-Brainstorming + +Dieser Zustand ersetzt rohe Fehlerseiten. Der Nutzer ist blockiert, deshalb braucht er eine ruhige Erklaerung und eine naechste Handlung. + +### Blocker-Typen + +| Zustand | Interner Grund | Public-Copy-Richtung | Primaeraktion | +|---|---|---|---| +| Nicht veroeffentlicht | `status=draft` oder `is_public=false` | "Dieses Formular ist aktuell nicht verfuegbar." | Anbieter kontaktieren oder zurueck | +| Drchiviert | `status=archived` | "Dieses Formular ist nicht mehr aktiv." | Anbieter kontaktieren | +| Geschlossen | `submission_close_at` vorbei | "Der Dnnahmezeitraum ist beendet." | Anbieter kontaktieren | +| Limit erreicht | `submission_limit` erreicht | "Dieses Formular nimmt aktuell keine weiteren Einreichungen an." | Anbieter kontaktieren | +| Link ungueltig | Tenant/Slug nicht gefunden | "Der Link ist ungueltig oder nicht mehr aktuell." | Link pruefen / Anbieter kontaktieren | +| Tenant nicht aufloesbar | Tenant fehlt/gesperrt | Neutraler Fehler ohne interne Details. | Zurueck | + +### Was David zeigen sollte + +| Element | Notiz | +|---|---| +| Logo/Fallback | Nur wenn sicher, dass Tenant aufloesbar ist. | +| Titel | Kurz, nicht alarmistisch. | +| Klartext | Kein 404, kein Stacktrace, keine internen IDs. | +| Kontakt/Zurueck | Nur wenn bekannt/konfiguriert. | +| Erneut laden | Nur bei potentiell temporaeren Fehlern. | + +### Nicht zeigen + +- Kein interner Form-Name, wenn Link/Tenant unsicher ist. +- Keine technischen Statuscodes. +- Keine Aussage, ob ein bestimmter Kunde/Tenant existiert, falls das Datenschutz-/Security-riskant ist. + +## Aktionen + +- Zur Anbieter-Website zurueck. +- Anbieter kontaktieren. +- Erneut laden. + +## Banner / Hinweise + +- Keine technischen Details. +- Keine Aussage, die interne Form-Namen oder IDs leakt. + +## Toasts / Action-Feedback + +- Keine Toasts. + +## Meldungsentscheidung + +| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | +|---|---|---|---|---| +| Formular nicht veroeffentlicht | Screen | ja | Bauen | Dieses Formular ist aktuell nicht verfuegbar. | +| Formular geschlossen | Screen | ja | Bauen | Dnnahmezeitraum ist beendet. | +| Formular nicht gefunden | Screen | ja | Bauen | Link pruefen oder Anbieter kontaktieren. | +| Tenant nicht aufloesbar | Screen | ja | Bauen | Neutral, ohne interne Details. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Nicht veroeffentlicht | Entwurf/Unpublished. | Bauen | +| Drchiviert/geschlossen | Keine Einreichung mehr moeglich. | Bauen | +| Nicht gefunden | Slug/Tenant passt nicht. | Bauen | + +## Blockierende Error States + +| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion | +|---|---|---|---| +| Nicht verfuegbar | Ruhiger Public-Blocker. | Anbieter kontaktieren | Zurueck | + +## Permissions / Gates + +- Public Gate: `status=published` und `is_public=true`. + +## Subframe + +https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit + +## Notizen + +Dieser Zustand ist wichtig fuer Vertrauen. Ein externes Formular darf nicht wie eine kaputte App wirken. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V03 Public Captcha oder Submit Fehler.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V03 Public Captcha oder Submit Fehler.md new file mode 100644 index 00000000..89bb1b3c --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Varianten/V03 Public Captcha oder Submit Fehler.md @@ -0,0 +1,117 @@ +--- +kind: screen +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +id: V03 +screen: Public Captcha oder Submit Fehler +typ: Public Error +umsetzung: Bauen +status: Subframe Draft / Review offen +route: /f/{tenant}/{slug} +subframe: "https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit" +--- + +# V03 - Public Captcha oder Submit Fehler + +## Ziel + +Der Submitter kann einen Captcha- oder Submit-Fehler verstehen und korrigieren, ohne Vertrauen in das Formular zu verlieren. + +## Pattern / Archetyp + +BESPOKE-Public Error / A7 Error-State. + +## Daten + +- Aktuelle Feldwerte sollen erhalten bleiben, soweit technisch moeglich. +- Captcha-Status. +- Dllgemeiner Submit-Status. + +## Detail-Brainstorming + +V03 ist kein eigener neuer Flow, sondern ein Public-Fehlerzustand von S02. Er wird gebaut, weil die Copy und das Vertrauen wichtig sind. + +### Fehlerarten + +| Fehler | Ort | UI | Werte behalten? | +|---|---|---|---| +| Captcha fehlt | Captcha-Bereich | Inline-Hinweis | ja | +| Captcha fehlgeschlagen | Captcha-Bereich oder Banner nah am Submit | Erneut pruefen | ja | +| Netzwerkfehler | Submit-Bereich | Banner + Retry | ja | +| Serverfehler vor Speicherung | Submit-Bereich | Banner + Retry | ja | +| Serverfehler nach Speicherung | Success bevorzugen, falls Speicherung sicher war | Nicht als Verlust darstellen | ja | +| Datei-Upload fehlgeschlagen | Datei-Feld | Inline + Datei erneut waehlen | andere Werte ja | + +### Copy-Richtung + +| Zustand | Copy | +|---|---| +| Captcha fehlt | "Bitte bestaetigen Sie die Sicherheitspruefung." | +| Captcha fehlgeschlagen | "Die Sicherheitspruefung konnte nicht bestaetigt werden. Bitte versuchen Sie es erneut." | +| Submit Fehler | "Das Formular konnte gerade nicht gesendet werden. Bitte versuchen Sie es erneut." | +| Wiederholter Fehler | "Wenn der Fehler bestehen bleibt, kontaktieren Sie bitte den Anbieter." | +| Datei-Fehler | "Diese Datei konnte nicht hochgeladen werden. Bitte pruefen Sie Typ und Groesse." | + +### Retry-Regeln + +| Regel | Grund | +|---|---| +| Eingaben erhalten | Lange Public-Formulare duerfen nicht neu ausgefuellt werden muessen. | +| Submit waehrend Retry sperren | Doppel-Submit verhindern. | +| Ersten Fehler sichtbar machen | Nutzer soll nicht suchen muessen. | +| Technische Details verstecken | Vertrauen bewahren. | +| Kontakt nur als Fallback | Nicht sofort vom Formular wegschicken. | + +## Aktionen + +- Captcha erneut bestaetigen. +- Formular erneut senden. +- Seite neu laden. +- Anbieter kontaktieren, falls Fehler bleibt. + +## Banner / Hinweise + +- Captcha-Fehler in der Naehe des Captcha-Bereichs. +- Submit-Fehler als Banner oberhalb des Submit-Bereichs. +- Keine internen Begriffe wie ActionLog, Webhook, DB oder Queue. + +## Toasts / Action-Feedback + +- Keine Toasts im Public UI. + +## Meldungsentscheidung + +| Ereignis | UI-Form | Blockiert? | Umsetzung | Copy/Notiz | +|---|---|---|---|---| +| Captcha fehlt | Inline beim Captcha | ja | Bauen | Bitte bestaetigen, dass Sie kein automatisierter Zugriff sind. | +| Captcha fehlgeschlagen | Inline/Banner | ja | Bauen | Bitte erneut versuchen. | +| Netzwerkfehler beim Submit | Banner | ja | Bauen | Einreichung konnte nicht gesendet werden. | +| Serverfehler nach Submit | Banner | ja | Bauen | Keine technischen Details, erneut versuchen. | + +## Zustaende + +| Zustand | Beschreibung | Umsetzung | +|---|---|---| +| Captcha Error | Bot-Schutz blockiert. | Bauen | +| Submit Error | Speicherung/Einreichung klappt nicht. | Bauen | +| Retry Loading | Nutzer sendet erneut. | Wiederverwenden | + +## Blockierende Error States + +| Zustand | Was sieht der Nutzer? | Primaeraktion | Sekundare Aktion | +|---|---|---|---| +| Captcha fehlgeschlagen | Fehler am Captcha. | Captcha erneut pruefen | - | +| Submit mehrfach fehlgeschlagen | Banner mit Hilfehinweis. | Erneut versuchen | Anbieter kontaktieren | + +## Permissions / Gates + +- Public. Kein Login. + +## Subframe + +https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit + +## Notizen + +Wenn moeglich, sollen eingegebene Antworten erhalten bleiben. Das ist besonders wichtig bei langen SHK-Dufnahmeformularen mit Fotos oder Text. diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas new file mode 100644 index 00000000..fad40c8b --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas @@ -0,0 +1,87 @@ +{ + "nodes":[ + {"id":"group-states","type":"group","x":-120,"y":220,"width":4340,"height":680,"label":"Dokumentierte ADV-S01-Zustaende / Was-passiert-wenn-Cases"}, + {"id":"group-internal","type":"group","x":-120,"y":-520,"width":3100,"height":600,"label":"S01 Interner Builder Hauptflow"}, + {"id":"group-public","type":"group","x":-120,"y":1060,"width":2460,"height":620,"label":"Public Form Flow"}, + {"id":"group-simple","type":"group","x":-120,"y":1840,"width":4380,"height":1120,"label":"Neue Simple Builder Alternative"}, + {"id":"group-notes","type":"group","x":3220,"y":-520,"width":1000,"height":600,"label":"Scope / Subframe-Fokus"}, + {"id":"package","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md","x":0,"y":-350,"width":420,"height":210}, + {"id":"s01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/90 ADV Form-Builder Canvas.md","x":620,"y":-350,"width":420,"height":210}, + {"id":"d10","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D10 Builder Interaktionsfaelle.md","x":1860,"y":-350,"width":460,"height":210}, + {"id":"note-subframe-focus","type":"text","text":"# Subframe-Fokus\n\nAktueller Hauptfluss:\n- 01 S00 Verwaltung\n- 02/03 Empty States\n- 04 S01 Formularart\n- 05 S02 Haupt-Editor\n- 06 S03 Design\n- 07-10 Public Form/States\n- 11-13 Antworten/States\n\n80-93 bleiben spaeter/Referenz.\n\nM01/M02/M03/M04 und D10 bleiben dokumentiert.","x":3360,"y":-360,"width":720,"height":330}, + {"id":"note-out-of-scope","type":"text","text":"# Nicht in D-FORM\n\n- Vollstaendige Submissions-Verwaltung\n- Submission-Detail\n- Booking\n- Kalender\n- Signatur\n- HR-Screens\n- Personalisierte Links\n- JS-Snippet\n\nS03 ist nur die schlanke Formular-Zentrale, nicht das ganze Forms-/Submissions-Modul.","x":3360,"y":-20,"width":720,"height":300}, + {"id":"d01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D01 Sharing Panel URL QR iFrame.md","x":0,"y":360,"width":420,"height":190}, + {"id":"note-states","type":"text","text":"# ADV-S01-Zustaende\n\nD07, D08 und D09 sind als zusaetzliche Subframe-Zustaende gebaut.\n\nDie restlichen D-/M-Zustaende bleiben dokumentiert.\n\nSie klaeren:\n- welche UI-Ebene oeffnet\n- was im Dropdown/Popover/Modal steht\n- welche Folgefehler entstehen\n- was Publish/Test blockiert","x":3120,"y":330,"width":540,"height":260}, + {"id":"note-builder-core","type":"text","text":"# Builder-Kern\n\nDauerhaft sichtbar:\n- Header / Status\n- Feld-Palette\n- Canvas\n- Feld-Inspector\n\nArbeitsmodi:\n- Logic\n- Actions\n- Sharing\n- Preview\n- Settings","x":1240,"y":-365,"width":420,"height":260}, + {"id":"d02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D02 Post-Submit Actions.md","x":520,"y":360,"width":420,"height":190}, + {"id":"d03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D03 Conditional Logic Editor.md","x":1040,"y":360,"width":420,"height":190}, + {"id":"d06","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/D06 Feldkarten Menue.md","x":1560,"y":360,"width":420,"height":190}, + {"id":"m01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M01 Feld loeschen Confirm.md","x":2080,"y":360,"width":420,"height":190}, + {"id":"d07","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/91 D07 Logic Regel Detail.md","x":1040,"y":620,"width":420,"height":190}, + {"id":"d08","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/92 D08 Action Detail mit Mapping.md","x":520,"y":620,"width":420,"height":190}, + {"id":"d09","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/93 D09 Publish Blocker Summary.md","x":2600,"y":360,"width":420,"height":190}, + {"id":"m02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M02 Unpublish Confirm.md","x":2600,"y":620,"width":420,"height":190}, + {"id":"m03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M03 Archive Confirm.md","x":3120,"y":620,"width":420,"height":190}, + {"id":"m04","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/M04 Unsaved Changes Confirm.md","x":3640,"y":620,"width":420,"height":190}, + {"id":"s02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/07 S04 Oeffentliches Formular.md","x":0,"y":1250,"width":420,"height":210}, + {"id":"v01","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/08 V01 Public Erfolg oder Redirect.md","x":620,"y":1120,"width":420,"height":210}, + {"id":"v02","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/09 V02 Public Formular nicht verfuegbar.md","x":620,"y":1410,"width":420,"height":210}, + {"id":"v03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/10 V03 Public Captcha oder Submit Fehler.md","x":1240,"y":1410,"width":420,"height":210}, + {"id":"note-public","type":"text","text":"# Public-Regel\n\nKeine App-Shell.\n\nRuhiges Kundenformular:\n- Branding-Kopf\n- Intro\n- Felder\n- mCaptcha\n- Submit\n- Success/Error\n\nMobile zuerst mitdenken.","x":1240,"y":1120,"width":420,"height":250}, + {"id":"note-public-reuse","type":"text","text":"# Public Renderer\n\nD-FORM baut das Public Form.\n\nDndere Bereiche wie HR oder Booking koennen den Renderer spaeter wiederverwenden, sind aber keine D-FORM-Screens.","x":1800,"y":1230,"width":420,"height":240}, + {"id":"simple-direction","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Simple Builder Neuausrichtung.md","x":0,"y":1990,"width":420,"height":190}, + {"id":"s00","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/04 S01 Formularart auswaehlen.md","x":560,"y":1990,"width":420,"height":190}, + {"id":"s01a","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/05 S02 Einfacher Fragen Editor.md","x":1120,"y":1900,"width":420,"height":190}, + {"id":"s01b","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/80 S01B Gefuehrter Fragen Editor.md","x":1120,"y":2120,"width":420,"height":190}, + {"id":"s01c","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/81 S01C Website Formular Editor.md","x":1680,"y":1840,"width":420,"height":190}, + {"id":"s01d","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/82 S01D Umfrage Editor.md","x":1680,"y":2060,"width":420,"height":190}, + {"id":"s01e","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/83 S01E Internes Formular Editor.md","x":1680,"y":2280,"width":420,"height":190}, + {"id":"note-simple-builder","type":"text","text":"# Neue Richtung gebaut\n\nNicht mehr sofort Profi-Canvas.\n\nS00 ist die Formular-Zentrale.\nS01 fuehrt immer in S02.\n\nDie Formularart setzt nur Vorlage/Startfragen:\n- Website/Extern\n- Lead\n- Umfrage\n- Intern\n\nTabs im Formular:\n- Fragen\n- Design: S03\n- Antworten: S05\n\nS01B/C/D/E sind Referenz.\n\nLogic bleibt als einfache Bedingung an der Frage.\nActions bleiben als Lead-Hinweis/Automatik.","x":2320,"y":1990,"width":620,"height":420}, + {"id":"s03","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/01 S00 Formulare verwalten.md","x":560,"y":2470,"width":420,"height":190}, + {"id":"s04","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/06 S03 Formular Design.md","x":2320,"y":2440,"width":420,"height":190}, + {"id":"s05","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/Screens/11 S05 Antworten Tabelle.md","x":2840,"y":2440,"width":420,"height":190} + ], + "edges":[ + {"id":"edge-package-s01","fromNode":"package","fromSide":"right","toNode":"s01","toSide":"left","label":"S01"}, + {"id":"edge-s01-core","fromNode":"s01","fromSide":"right","toNode":"note-builder-core","toSide":"left","label":"Arbeitsbereiche"}, + {"id":"edge-core-d10","fromNode":"note-builder-core","fromSide":"right","toNode":"d10","toSide":"left","label":"Was passiert wenn"}, + {"id":"edge-s01-d01","fromNode":"s01","fromSide":"bottom","toNode":"d01","toSide":"top","label":"Share"}, + {"id":"edge-s01-d02","fromNode":"s01","fromSide":"bottom","toNode":"d02","toSide":"top","label":"Actions"}, + {"id":"edge-s01-d03","fromNode":"s01","fromSide":"bottom","toNode":"d03","toSide":"top","label":"Logic"}, + {"id":"edge-s01-d06","fromNode":"s01","fromSide":"bottom","toNode":"d06","toSide":"top","label":"Feldmenue"}, + {"id":"edge-d06-m01","fromNode":"d06","fromSide":"right","toNode":"m01","toSide":"left","label":"loeschen"}, + {"id":"edge-d03-d07","fromNode":"d03","fromSide":"bottom","toNode":"d07","toSide":"top","label":"Regel Detail"}, + {"id":"edge-d02-d08","fromNode":"d02","fromSide":"bottom","toNode":"d08","toSide":"top","label":"Action Detail"}, + {"id":"edge-s01-d09","fromNode":"s01","fromSide":"bottom","toNode":"d09","toSide":"top","label":"Publish"}, + {"id":"edge-d09-m02","fromNode":"d09","fromSide":"bottom","toNode":"m02","toSide":"top","label":"Unpublish"}, + {"id":"edge-s01-m03","fromNode":"s01","fromSide":"bottom","toNode":"m03","toSide":"top","label":"Archive"}, + {"id":"edge-s01-m04","fromNode":"s01","fromSide":"bottom","toNode":"m04","toSide":"top","label":"Dirty State"}, + {"id":"edge-d10-d07","fromNode":"d10","fromSide":"bottom","toNode":"d07","toSide":"top","label":"Logic Cases"}, + {"id":"edge-d10-d08","fromNode":"d10","fromSide":"bottom","toNode":"d08","toSide":"top","label":"Mapping Cases"}, + {"id":"edge-d10-d09","fromNode":"d10","fromSide":"bottom","toNode":"d09","toSide":"top","label":"Blocker Cases"}, + {"id":"edge-s01-s02","fromNode":"s01","fromSide":"bottom","toNode":"s02","toSide":"top","label":"publish + share"}, + {"id":"edge-s02-v01","fromNode":"s02","fromSide":"right","toNode":"v01","toSide":"left","label":"Submit ok"}, + {"id":"edge-s02-v02","fromNode":"s02","fromSide":"right","toNode":"v02","toSide":"left","label":"nicht verfuegbar"}, + {"id":"edge-s02-v03","fromNode":"s02","fromSide":"right","toNode":"v03","toSide":"left","label":"Fehler"}, + {"id":"edge-s02-public","fromNode":"s02","fromSide":"right","toNode":"note-public","toSide":"left","label":"Public-UX"}, + {"id":"edge-public-reuse","fromNode":"note-public","fromSide":"right","toNode":"note-public-reuse","toSide":"left","label":"Reuse"}, + {"id":"edge-focus-out","fromNode":"note-subframe-focus","fromSide":"bottom","toNode":"note-out-of-scope","toSide":"top","label":"Grenzen"}, + {"id":"edge-package-simple","fromNode":"package","fromSide":"bottom","toNode":"simple-direction","toSide":"top","label":"neue Richtung"}, + {"id":"edge-simple-s00","fromNode":"simple-direction","fromSide":"right","toNode":"s00","toSide":"left","label":"Einstieg"}, + {"id":"edge-s00-s01a","fromNode":"s00","fromSide":"right","toNode":"s01a","toSide":"left","label":"Variante D"}, + {"id":"edge-s00-s01b","fromNode":"s00","fromSide":"right","toNode":"s01b","toSide":"left","label":"Variante B"}, + {"id":"edge-s00-s01c","fromNode":"s00","fromSide":"right","toNode":"s01c","toSide":"left","label":"Website"}, + {"id":"edge-s00-s01d","fromNode":"s00","fromSide":"right","toNode":"s01d","toSide":"left","label":"Umfrage"}, + {"id":"edge-s00-s01e","fromNode":"s00","fromSide":"right","toNode":"s01e","toSide":"left","label":"Intern"}, + {"id":"edge-simple-s03","fromNode":"simple-direction","fromSide":"right","toNode":"s03","toSide":"left","label":"Verwaltung"}, + {"id":"edge-s03-s00","fromNode":"s03","fromSide":"top","toNode":"s00","toSide":"bottom","label":"Neues Formular"}, + {"id":"edge-s03-s01a","fromNode":"s03","fromSide":"right","toNode":"s01a","toSide":"bottom","label":"Bearbeiten"}, + {"id":"edge-s01a-s04","fromNode":"s01a","fromSide":"right","toNode":"s04","toSide":"left","label":"Design"}, + {"id":"edge-s01a-s05","fromNode":"s01a","fromSide":"right","toNode":"s05","toSide":"left","label":"Antworten"}, + {"id":"edge-s01a-note","fromNode":"s01a","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Prinzip"}, + {"id":"edge-s01b-note","fromNode":"s01b","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Prinzip"}, + {"id":"edge-s01c-note","fromNode":"s01c","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"}, + {"id":"edge-s01d-note","fromNode":"s01d","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"}, + {"id":"edge-s01e-note","fromNode":"s01e","fromSide":"right","toNode":"note-simple-builder","toSide":"left","label":"Beispiel"} + ] +} diff --git a/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md new file mode 100644 index 00000000..8d932600 --- /dev/null +++ b/02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.md @@ -0,0 +1,571 @@ +--- +kind: wireframe-package +project: HiveGrid Screen Project +ticket: D-FORM +package: WF-D-FORM Form Builder +typ: Flow +status: Review-ready / Subframe Draft gebaut +subframe: "https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad" +canvas: "02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas" +--- + +# WF-D-FORM Form Builder + +Status: Review-ready fuer David / Subframe Draft gebaut +Subframe-Link: https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad +Canvas: [[WF-D-FORM Form Builder.canvas]] +David-Review: [[David Review Checkliste]] +Subframe-Bauplan: [[Subframe Bauplan]] +Subframe-Bau-Log: [[Subframe Bau Log]] +Simple Builder: [[Simple Builder Neuausrichtung]] +Stand: 2026-07-09 +Uebergabe: [[D-FORM David Uebergabe 2026-07-09]] +Start fuer Review: [[00 Start hier - David]] + +--- + +## 1. Kurzfassung + +Dieses Paket bereitet `D-FORM` fuer David vor: den internen Form-Builder-Canvas und das oeffentliche Formular. + +Der Fokus liegt bewusst auf den zwei Bespoke-Erlebnissen: + +- Form-Builder-Canvas fuer interne Nutzer +- Oeffentliches Formular fuer externe Submitter + +Fuer den eigentlichen Subframe-Bau gilt [[Subframe Bauplan]] als konkrete Bau-Reihenfolge und Komponenten-Zuordnung. Interne Builder-Screens wie S01/D07/D08/D09 nutzen das vorhandene Default Page Layout; keine eigene Sidebar oder Header-Navigation nachbauen. Public-Screens bleiben ohne App-Shell. + +Die vollstaendige Forms-/Submissions-Verwaltung, Booking, Kalender und Signatur werden nicht in diesem Paket gebaut. Als schlanker Einstieg wurde aber S00 `Formulare verwalten` ergaenzt, damit Nutzer vorhandene Formulare finden und in den Builder springen koennen. + +**Wichtig:** Dieses Paket ist jetzt ein tragfaehiger Detail-Brainstorming-Entwurf fuer David. Davids Review vom 2026-07-06 hat den fachlichen Scope bestaetigt, aber fuer den Builder mehr Interaktionslogik verlangt. Diese "was passiert nach Klick?"-Ebene ist im Advanced-Builder nachgezogen. D-FORM ist in Subframe als Draft gebaut: S00 bis S05, die Public-Screens S04/V01/V02/V03 sowie D07 Logic Regel Detail, D08 Action Detail mit Mapping und D09 Publish Blocker Summary sind gebaut. + +Vor einer echten Fertig-Markierung muss David die Subframe-Frames final reviewen. Danach koennen nur noch gezielte Korrekturen oder explizit nachgeforderte Zustands-/Modalframes folgen. + +**Nachtrag 2026-07-07:** Fuer Handwerksbetriebe wirkt der bisherige S01 fachlich stark, aber zu komplex. Deshalb wurden einfachere Alternativen gebaut: zuerst [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] als Startseite, danach [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] und Google-Forms-artige Beispiel-Editoren je Formularart. Gebaute Varianten: [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]], [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]], [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]], [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]] und [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]]. Ergaenzt wurden ausserdem [[Screens/06 S03 Formular Design|S03 Formular Design]] und [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]]. Die bisherige Logic bleibt im Hintergrund erhalten, aber der Einstieg soll nicht mehr wie ein Profi-Builder wirken. + +**Nachtrag 2026-07-08:** Die Simple-Builder-Richtung wurde nachgeschaerft: S00 nutzt Mehrfachfilter nach Status und Art, S02 hat mehrere editierbare Optionen und eine erweiterte Google-Forms-nahe Werkzeugleiste, S04 enthaelt eine Datenschutz-Checkbox, S03/S05 haben keinen eigenen Teilen-Tab mehr und S05 dient nur Antworten/Export. + +**Nachtrag Lead-Zuweisung 2026-07-08:** David hat ergaenzt, dass Lead-Formulare einen sichtbaren Bereich `Felder zuweisen` brauchen. Deshalb bleibt S02 der einfache Haupteditor, bekommt aber den neuen Zustand [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]]. Wenn eine Zuweisung fehlt oder nicht moeglich ist, greift optional [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]]. Logic und Actions kommen damit in den Screen: `Bedingung` an der Frage, `Nach Absenden / Lead anlegen` als Card mit Dropdown-Zuweisung. + +**Nachtrag 2026-07-09:** Fuer Davids Review wurde ein kompletter Obsidian-faehiger Paketordner vorbereitet. Die aktuelle Uebergabe liegt in [[D-FORM David Uebergabe 2026-07-09]]. Die S02/S02L-Lead-Hinweise sind optisch an die gruene `Lead anlegen`-Card angeglichen: Icon links, Titel/Badge/Beschreibung in der Mitte, Aktion rechts. + +--- + +## 2. Intent Check + +| Frage | Antwort | +|---|---| +| Welches Ticket/Modul ist betroffen? | `D-FORM` / P16 / M05 Form Builder | +| Was soll der Nutzer am Ende schaffen? | Interne Nutzer bauen und veroeffentlichen Formulare; externe Nutzer reichen ein Formular sauber ein. | +| Ist es ein Flow, einzelner Screen, Zustand oder nur Dokumentation? | Bespoke-Flow mit zwei Hauptscreens und wenigen Public-Varianten. | +| Welche Planning-Quellen wurden geprueft? | `D-FORM.md`, `P16-kalender-booking-forms-signatur.md`, `M05-form-builder.md`, `ENTITY-MODEL.md` Domaene 9, `SCREEN-MAP.md` Paragraph 3, `DESIGNER-FIRST-PLAYBOOK.md` Rang 2, `ROADMAP.md` Phase 16. | +| Was ist sicher im Scope? | Drag-and-Drop-Builder, 12 Feldtypen, Conditional Logic, Field-Config, Live-Vorschau, Publish, URL/QR/iFrame-Sharing, Post-Submit-Actions, Public Form mit mCaptcha und 4 Zustaenden. | +| Was ist sicher nicht im Scope? | Booking-Page, Kalender, vollstaendige Submissions-Liste, Signatur-Wizard, personalisierte Links, JS-Snippet, Multi-Step-Forms, Repeater, A/B-Testing. S00 ist nur die schlanke Formular-Zentrale, nicht das komplette Submissions-Modul. | +| Gibt es Admin/Normalrolle-Unterschiede? | Ja: Builder/Publisher/Admin duerfen bauen und publishen; einfache Nutzer sehen ggf. nur Submission-/Basic-Rechte. | +| Welche Annahmen sind noch unsicher? | Ob David einzelne dokumentierte Zustands-/Modalframes aus S01 zusaetzlich in Subframe sehen will. | + +--- + +## 3. Scope + +| Punkt | Inhalt | +|---|---| +| Ticket/Modul | `D-FORM` / M05 Form Builder | +| Nutzerrolle | Interner Builder/Publisher/Admin; externer Submitter im Public Form. | +| Admin-Variante | Darf Form konfigurieren, Actions anlegen, publishen, Sharing nutzen. | +| Normale Rolle | Kann je nach Permission eventuell Formular bearbeiten oder nur Submissions sehen; Submissions sind nicht Teil dieses Pakets. | +| Startpunkt | Intern: `/forms/:id/edit`; Public: `/f/{tenant}/{slug}` | +| Ziel | Formulare robust bauen, veroeffentlichen und extern einreichbar machen. | +| Haupt-Archetyp | A4 Form/Input-Kit + A7 Zustands-Kit | +| Bespoke-Anteil | Sehr hoch: Canvas, Drag-and-Drop, Conditional Logic, Live Preview, Public Renderer. | +| Out of scope | Booking/Kalender/Signatur, Submission-Detail, personalisierte Links/JS-Snippet, komplexe v2-Logic. | + +--- + +## 3a. Detailausbau vor Fertig + +Diese Punkte fehlen noch, bevor D-FORM wirklich als fertig vorbereitet gelten sollte: + +| Bereich | Was noch auszuarbeiten ist | Warum wichtig | +|---|---|---| +| Builder-Layout | Entscheidung fuer Canvas-Aufbau: Drei-Spalten, Tabs, Drawer, Preview-Mode, Mobile/Small-Viewport-Verhalten. | Der Builder ist die schwerste UI im Ticket. | +| Drag-and-Drop | Empty Dropzone, Drag Preview, Reorder, Drop zwischen Feldern, Feld-Auswahl, Undo/Cancel-Gefuehl. | Sonst bleibt der Canvas zu abstrakt. | +| Feldtypen | Properties je Feldtyp, Sonderfaelle fuer Datei/Foto, Datum/Datum-Range, Select/Multi-Select, Boolean. | David braucht konkrete Inspector-Inhalte. | +| Validation | Required, min/max, Regex, Datei-Typen/Groesse, Custom Error, Publish-Blocker. | Das Ticket verlangt Klartext-Validation. | +| Conditional Logic | Regel-Liste, Regel-Editor, kaputte Referenzen, Vorschau/Test, Limits fuer v1. | Pflicht laut Ticket, aber UX-riskant. | +| Form-Stammdaten | Name, Beschreibung, Slug, Status, Subtype, Success Message, Redirect, Close/Limit. | M05-Datenmodell ist groesser als nur Felder. | +| Templates | SHK-Templates sichtbar machen oder bewusst nur als Forms-Liste/Seed dokumentieren. | Ticket nennt geseedete Templates. | +| Publish / Unpublish | Publish-Flow, Blocker, Warnungen bei bereits oeffentlichem Formular, Unpublish-Folge. | Kritischer Arbeitsmoment fuer interne Nutzer. | +| Sharing / Embed | URL, QR, iFrame-Code, Copy-Feedback, Allowed Origins, v2-Abgrenzung JS-Snippet/personalisierte Links. | Public-Verteilung ist Teil von D-FORM. | +| Post-Submit-Actions | Action-Typen, Reihenfolge, Mapping-Zeilen, Pflichtmapping, Test/Preview, einfache Filter. | Sehr grosser Komplex im Builder. | +| Public Form | 4 Public-Zustaende, Mobile, mCaptcha, Datei-Upload, Success/Redirect, nicht verfuegbar. | Oeffentliche Screens brauchen hohen Polish. | +| Permissions | Builder, Publisher, Admin, Read-only/No-Permission-Zustand. | D-FORM hat eigene Permission-Bundles. | +| Abgrenzung | Was bleibt in D-FORM, was gehoert zu Submissions, Forms-Liste, D-BOOK, D-REST oder v2. | Verhindert Scope-Explosion. | + +Empfehlung fuer die naechste Arbeitseinheit: David validiert die nachgezogene S01-Interaktionslogik. Danach kann Subframe-Bau oder letzte Korrektur erfolgen. + +--- + +## 3b. SCREEN-MAP-Abgleich + +Die `SCREEN-MAP.md` enthaelt deutlich mehr Screens, aber sie ist die Gesamt-Bauliste fuer HiveGrid v1. Fuer `D-FORM` zaehlen daraus nur die Form-Builder-bezogenen Zeilen. + +| SCREEN-MAP-Screen | Gehoert zu D-FORM? | Umgang | +|---|---|---| +| Form-Builder-Canvas `/forms/:id/edit` | ja | In diesem Paket als S01 ausarbeiten. | +| Oeffentliches Formular `/f/{tenant}/{slug}` | ja | In diesem Paket als S04 plus Public-Varianten ausarbeiten. | +| Submissions `/forms/:id/submissions` | nein, Forms-Compose | Nicht D-FORM-Bespoke; spaeter eigenes Compose-/Submissions-Paket. | +| Forms-Liste `/forms` | teilweise | S00 als schlanke Formular-Zentrale im D-FORM-Paket; vollstaendige Forms-/Submissions-Compose bleibt spaeter. | +| Booking-Page `/b/{tenant}/{slug}` | nein | Eigenes Ticket/Paket `D-BOOK`. | +| Booking intern / Booking-Page-Editor / Verfuegbarkeit | nein | Eigenes Booking-Paket. | +| Kalender `/calendar` | nein | Eigenes Kalender-Paket. | +| Signatur-Wizard | nein | Eigenes Signatur-/D-REST-Paket. | +| HR Urlaub/Krankmeldung, Requests, Surveys | nein | HR nutzt M05/Form-Renderer wieder, ist aber nicht D-FORM. | +| Kampagnen-Editor, Kampagnen-Liste, Segmente, Sender | nein | Email-Marketing-Paket, nicht D-FORM. | +| Pipeline-Kanban, Projekt-Liste, Projekt-Detail, Pipeline-Config | nein | Projekt/Pipeline-Paket, nicht D-FORM. | +| Plattform-Admin-Screens | nein | Plattform-Admin-Paket, nicht D-FORM. | + +Merksatz: D-FORM hat wenige eigene Routen, aber einen riesigen Detailumfang innerhalb des Builder-Screens und des Public-Renderers. + +--- + +## 3c. Detailausbau-Fortschritt + +| Bereich | Stand | Naechster Schritt | +|---|---|---| +| ADV-S01 Builder-Layout | Arbeitsentwurf in ADV-S01 ergaenzt und als Subframe-Frame gebaut. | David prueft Drei-Zonen-Builder in Subframe. | +| ADV-S01 Feld-Palette | Arbeitsentwurf in ADV-S01 ergaenzt. | Entscheiden, ob Content Blocks wie Section Header in v1 sichtbar werden. | +| ADV-S01 Canvas / Drag-and-Drop | Arbeitsentwurf in ADV-S01 ergaenzt. | Drag-Zustaende ggf. in Subframe besonders sichtbar machen. | +| ADV-S01 Feld-Inspector | Arbeitsentwurf in ADV-S01 ergaenzt. | Properties je Feldtyp reviewen. | +| ADV-S01 Interaktionslogik | Nach David-Feedback ergaenzt und als Zustandsdateien ausgearbeitet. D07/D08/D09 sind als zusaetzliche Subframe-Zustaende gebaut. | David prueft die Subframe-Frames und entscheidet nur noch ueber Feinschliff oder Zusatzframes. | +| ADV-S01 Validation / Publish | Arbeitsentwurf in ADV-S01 ergaenzt und als D09 gebaut. | David prueft Blocker-Copy, Warnungen und Sprungziele. | +| ADV-S01 Conditional Logic | Arbeitsentwurf in ADV-S01 ergaenzt. | V1-Grenzen final bestaetigen. | +| ADV-S01 Sharing | Arbeitsentwurf in ADV-S01 ergaenzt. | iFrame/QR/URL-Darstellung finalisieren. | +| ADV-S01 Post-Submit-Actions | Arbeitsentwurf in ADV-S01 ergaenzt. | Action-Typen und Mapping-Tiefe final reviewen. | +| ADV-S01 Permissions | Arbeitsentwurf in ADV-S01 ergaenzt. | Read-only/No-Permission-Zustand final entscheiden. | +| S04 Public Form | Arbeitsentwurf in S04 ergaenzt. | David validiert Public Layout, Mobile, Submit und Branding. | +| V01/V02/V03 Public-Varianten | Arbeitsentwurf in Varianten ergaenzt. | David validiert Copy und Public-Fehlerlogik. | +| Canvas/Tracker/Handoff | Nach P2-Auth-Referenz synchronisiert: Hauptflow plus ADV-S01-Zustaende/Case-Matrix im Canvas sichtbar. | Vor Subframe nur noch David-Freigabe bzw. Auswahl moeglicher Zusatzframes. | + +--- +## 3d. David-Feedback 2026-07-06 + +Review-Ergebnis: Der grobe fachliche Scope ist gut. D-FORM bleibt Builder plus oeffentliches Formular. Nicht nach D-FORM gehoeren Forms-Liste, Submissions, Booking, Kalender, Signatur und HR. + +Nacharbeit: In S01 fehlte die Interaktionslogik fuer konkrete Aktionen. Die wichtigsten Klicks sind jetzt entschieden: + +| Bereich | Entscheidung | +|---|---| +| Feld bearbeiten | Im rechten Inspector, kein Modal. | +| Feld duplizieren | Feldkarte oder 3-Punkte-Menue; kein Confirm. | +| Feld loeschen | 3-Punkte-Menue/Gefahrenzone; Confirm bei Abhaengigkeiten oder public-wirksamen Folgen. | +| Logic-Regel anlegen | Logic-Panel/Detailbereich im selben S01, kein Modal. | +| Post-Submit-Action hinzufuegen | Typauswahl als Popover/kleines Auswahlpanel, Konfiguration im Action-Panel/Drawer. | +| Sharing oeffnen | Sharing-Panel/Modus im ADV-S01, kein Modal. | +| Publish | Inline-Check mit Summary/Popover; Blocker springen zu Feld, Logic, Action oder Settings. | +| Unpublish | Confirm-Dialog, weil Public-Link danach nicht mehr erreichbar ist. | + +Bewertung: Die 5 Hauptframes bleiben bestehen. Nach Empfehlung wurden zusaetzlich D07 Logic Regel Detail, D08 Action Detail mit Mapping und D09 Publish Blocker Summary als Subframe-Zustaende gebaut. M01/M02 und die restlichen D-/M-Zustaende bleiben vorerst dokumentiert. + +Nachgezogene Vor-Subframe-Dateien: [[Screens/D01 Sharing Panel URL QR iFrame]], [[Screens/D02 Post-Submit Actions]], [[Screens/D03 Conditional Logic Editor]], [[Screens/D06 Feldkarten Menue]], [[Screens/M01 Feld loeschen Confirm]], [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]], [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]], [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]], [[Screens/D10 Builder Interaktionsfaelle]], [[Screens/M02 Unpublish Confirm]], [[Screens/M03 Archive Confirm]], [[Screens/M04 Unsaved Changes Confirm]]. + +Nach weiterer Rueckmeldung wurde D10 als Case-Matrix ergaenzt: Was passiert, wenn Nutzer etwas auswaehlen, eine Checkbox setzen, einen mittleren Pflichtschritt vergessen, Bild/Datei hinzufuegen, Optionen loeschen, Mapping halb setzen oder eine public-wirksame Aktion ausloesen. + +--- + +## 3e. P2-Auth-Dbgleich 2026-07-06 + +P2 Auth ist als Referenz fuer Reifegrad genutzt worden. Dort sind nicht nur Hauptscreens, sondern auch D-/M-Zustaende, Modal-Inhalte, Subframe-Grid, Canvas-Notizen und Handoff-Checks konsequent dokumentiert. + +Nachgezogen fuer D-FORM: + +| P2-Muster | D-FORM-Umsetzung | +|---|---| +| Screen-Dateien mit Ziel, Daten, Aktionen, Verhalten, Zustaenden und Subframe-Hinweis | ADV-S01/S02/S04/V01-V03 sowie D01-D10 und M01-M04 entsprechend ausgearbeitet. | +| D-/M-Zustaende als eigene Dateien, auch wenn sie nicht gebaut werden | ADV-S01-Zustaende liegen als eigene Vor-Subframe-Dateien im `Screens`-Ordner; D07/D08/D09 sind als zusaetzliche Subframe-Zustaende gebaut. | +| Canvas zeigt Hauptflow plus dokumentierte Zustaende/Notizen | `WF-D-FORM Form Builder.canvas` wurde erweitert: Hauptflow, D-/M-Zustaende, D10 Case-Matrix, Public Flow und Scope-Notizen. | +| Tracker fuehrt dokumentierte Zustaende als eigene Zeilen | Tracker enthaelt D01-D10 und M01-M04; D07/D08/D09 stehen auf `Bauen`, M01/M02/M03/M04 bleiben dokumentiert. | + +Bewertung: D-FORM ist auf dem gleichen Vor-Subframe-Dokumentationsniveau wie die besser ausgearbeiteten P2 Auth Pakete. Subframe ist als Draft gebaut und verlinkt; Review und Feinschliff folgen. + +--- + +## 4. Brainstorming + +### Flow-Frage + +Wie bekommt David den Builder so vorbereitet, dass er nicht in zehn Unterseiten zerfaellt, aber trotzdem alle schweren Entscheidungen sichtbar sind? + +### UX-Varianten + +| Option | Beschreibung | Vorteil | Nachteil | Empfehlung | +|---|---|---|---|---| +| D | Ein grosser Builder-Screen mit Palette, Canvas, Properties, Preview und Tabs/Panels fuer Sharing/Actions/Logic. | Ein Arbeitsort, weniger Navigation, passt zum Bespoke-Canvas. | Kann sehr dicht werden. | Genommen fuer v1-Draft. | +| B | Mehrere Unterseiten: Felder, Design, Logic, Sharing, Actions, Preview. | Uebersichtlicher pro Thema. | Wirkt eher Settings als Canvas; mehr Route- und Handoff-Last. | Raus fuer v1-Draft. | +| C | Minimaler Builder plus separate Modals fuer jedes Feature. | Reduziert Hauptscreen. | Modal-Kaskade wird schwer wartbar; Field-Mapping leidet. | Nur fuer einzelne Confirm-/Blocker-Zustaende. | + +### Entscheidung + +| Entscheidung | Status | Notiz | +|---|---|---| +| Builder als ein Hauptscreen | genommen | Die Route `/forms/:id/edit` ist der Arbeitsort. | +| Public Form als eigener Screen | genommen | Extern sichtbar, eigener Polish, eigene Zustaende. | +| Sharing in Builder integrieren | genommen | URL, QR, iFrame als Panel/Tab im Builder. | +| Post-Submit-Actions in Builder integrieren | genommen | Field-Mapping gehoert zur Form-Konfiguration, kein eigener Screen. | +| Conditional Logic in v1 eng schneiden | genommen | Nur Anzeige/Ausblenden: Wenn Feld Y = Z, zeige Feld X. | +| 12 Feldtypen nach A4 verwenden | Empfehlung genommen | Text, Textarea, Zahl, Waehrung, Datum, Datum-Range, Select, Multi-Select, Boolean, Email, Telefon, Datei. | +| Code-Stand nicht als Design-Grenze nehmen | genommen | Der vorhandene Form-Widget-Code ist kleiner als D-FORM; Design folgt Planning/D4. | +| Personalisierte Links | raus fuer v1 | Laut Ticket v2. | +| JS-Snippet | raus fuer v1 | Laut Ticket v2, iFrame bleibt. | + +### Arbeitsentscheidung: 12 Feldtypen + +Fuer Davids D-FORM-Draft nehmen wir die A4-Liste als verbindliche v1-Designbasis: + +| Feldtyp | Design-Hinweis | +|---|---| +| Text | Einzeiliger Text. | +| Textarea | Mehrzeiliger Text, optional Markdown-Anmutung fuer interne/langformatige Antworten. | +| Zahl | Ganze Zahl oder Dezimalwert. | +| Waehrung | Zahl mit Waehrungsformat, z. B. Auftragswert. | +| Datum | Einzelnes Datum. | +| Datum-Range | Start-/Enddatum oder Zeitraum. | +| Select | Eine Auswahl aus Optionen; Radio kann als Darstellungsvariante davon gelten. | +| Multi-Select | Mehrere Optionen, z. B. Chips oder Checkbox-Liste. | +| Boolean | Ja/Nein, Checkbox oder Toggle. | +| Email | Email mit Formatvalidierung. | +| Telefon | Telefonnummer mit Format-/Normalisierungs-Hinweis. | +| Datei | Datei-Upload; Foto ist fuer v1 eine Upload-/Kamera-Variante, kein eigener Feldtyp. | + +Nicht als normale Feldtypen zaehlen: Honeypot/mCaptcha (Anti-Spam), Section Header/Description (Darstellungsbloecke), Signature (Abnahme/Signatur-Kontext), Hidden Field, Address-Autocomplete. Diese koennen spaeter als v2 oder Spezialbausteine dazukommen. + +### Arbeitsentscheidung: Post-Submit-Actions + +Der Builder zeigt Actions, aber baut keinen zweiten Automation-Editor. + +| Tiefe | Inhalt | Entscheidung | +|---|---|---| +| Action-Liste | Reihenfolge, Typ, aktiv/inaktiv, kurzer Status, Warnungen. | In S01 sichtbar. | +| Action-Konfiguration | Ziel, Bedingung optional, Empfaenger/URL/Entity, Field-Mapping-Zeilen. | In S01 als Panel/Drawer/Tab sichtbar. | +| Field-Mapping | Form-Feld -> Ziel-Feld, Pflichtfeldwarnungen, fehlende Zuordnung. | In S01 sichtbar. | +| Test/Validation | Webhook-URL pruefen, Mapping-Warnungen, Preview was erzeugt wird. | In S01 dokumentieren. | +| ActionLog voll | Submission-bezogene Ausfuehrungen, Re-Run, Fehlerverlauf. | Nicht eigener D-FORM-Screen; gehoert zu Submissions-Compose. | + +### Arbeitsentscheidung: Builder-Arbeitsbereiche + +Der Form-Builder bleibt ein Hauptscreen, aber nicht alles muss gleichzeitig im Vordergrund sein. + +| Arbeitsbereich | Gewichtung | Empfehlung fuer David | +|---|---|---| +| Header / Status | dauerhaft sichtbar | Name, Status Draft/Published, Save, Preview, Publish, Share. | +| Feld-Palette | Primaerbereich | 12 Feldtypen schnell scanbar, Drag + Klick. | +| Canvas | Primaerbereich | Reihenfolge der Felder, Drag-and-Drop, Empty State, Feldfehler. | +| Feld-Inspector | Primaerbereich | Ausgewaehltes Feld bearbeiten: Label, Key, Pflicht, Validation, Optionen. | +| Logic | Sekundaerbereich | Eigener Tab/Panel/Drawer; einfache Wenn-Dann-Regeln. | +| Actions | Sekundaerbereich | Eigener Tab/Panel/Drawer; Action-Liste + Mapping. | +| Sharing | Sekundaerbereich | Eigener Tab/Panel/Drawer; URL, QR, iFrame. | +| Preview | Umschaltbereich | Public-nahe Vorschau, ideal als eigener View/Tab oder rechte Preview-Fläche. | +| Settings | Sekundaerbereich | Slug, Success Message, Redirect, Branding/Theme, Allowed Origins. | + +Empfehlung: David sollte **Palette + Canvas + Inspector** als Kernarbeit verstehen. Logic, Actions, Sharing, Preview und Settings sind eigene Arbeitsmodi um denselben Form-Datensatz herum. + +### Happy Path + +1. Nutzer oeffnet den Form-Builder. +2. Nutzer waehlt ein Feld aus der Palette und zieht es in den Canvas. +3. Nutzer konfiguriert Label, Pflichtfeld, Optionen und Validierung. +4. Nutzer setzt bei Bedarf Conditional Logic. +5. Nutzer prueft die Live-Vorschau. +6. Nutzer definiert Post-Submit-Actions mit Field-Mapping. +7. Nutzer published das Formular. +8. Nutzer kopiert Public URL, QR oder iFrame. +9. Externer Submitter oeffnet das Public Form, fuellt es aus und sendet ab. +10. System zeigt Erfolgstext oder leitet weiter. + +### Varianten / Branches + +- Feld ohne Label oder ungueltige Konfiguration. +- Conditional Logic referenziert ein geloeschtes Feld. +- Pflichtfeld ohne passende Validation. +- Webhook-URL ungueltig. +- Publish blockiert wegen fehlendem Namen, Slug oder sichtbaren Feldern. +- Public Form ist nicht veroeffentlicht, archiviert, geschlossen oder nicht erreichbar. +- Captcha oder Submit schlaegt fehl. + +### Roadblocks + +- Zu viele Funktionen im Builder koennen David ueberladen. +- 12 Feldtypen muessen aus A4 kommen, aber Builder braucht Feld-spezifische Properties. +- Post-Submit-Actions koennen sehr komplex werden; im Design sollte Field-Mapping sichtbar sein, ohne einen Automations-Editor nachzubauen. +- Public Form muss wiederverwendbar fuer HR, Booking-Intake, Urlaub/Krank und Requests sein. + +### Meldungs-/Error-State-Brainstorming + +| Ereignis | UI-Form | Blockiert? | Bauen? | Copy/Notiz | +|---|---|---|---|---| +| Keine Felder im Formular | Empty State im Canvas | nein | ja, in S01 | Klarer CTD: Feld aus Palette hinzufuegen. | +| Ungueltiges Feld | Inline + Summary-Banner | ja, fuer Publish | dokumentieren | Feldname nennen, nicht nur generisch. | +| Logic-Regel kaputt | Inline im Logic-Panel | ja, fuer Publish | dokumentieren | Ursache zeigen: referenziertes Feld fehlt. | +| Publish nicht moeglich | Banner im Builder | ja | dokumentieren | Liste der fehlenden Voraussetzungen. | +| Kopieren erfolgreich | Toast | nein | dokumentieren | URL/iFrame kopiert. | +| Public Form nicht verfuegbar | Public Blocker Screen | ja | ja, V02 | Externe Nutzer brauchen klare Erklaerung. | +| Captcha fehlgeschlagen | Inline/Banner im Public Form | ja, temporar | ja, V03 | Erneut versuchen. | +| Submit erfolgreich | Public Success State | nein | ja, V01 | Erfolgstext oder Redirect. | + +### Offene Fragen + +- Soll `date`, `datetime`, `time` spaeter als Varianten des Datumsfelds oder als eigene v2-Feldtypen behandelt werden? +- Soll `signature` im Form-Builder v1 als normales Feld verfuegbar sein oder nur im Abnahme-/Signatur-Kontext? +- Wie tief soll Field-Mapping fuer `create_projekt` in v1 sichtbar sein? +- Soll der Public Form Renderer mehrere Branding-Level haben oder nur Tenant-Logo plus einfache Theme-Werte? + +--- + +## 5. Screen-Kandidaten nach Entscheidung + +| Kandidat | Warum eventuell noetig? | Erste Einschaetzung | +|---|---|---| +| Form-Builder Canvas | Hauptarbeitsort, komplexe Sonder-UI. | Bauen | +| Oeffentliches Formular | Extern sichtbar, eigener Polish, eigener Renderer. | Bauen | +| Public Erfolg oder Redirect | Submit-Ende ist copy- und vertrauenskritisch. | Bauen | +| Public Formular nicht verfuegbar | Externer Blocker braucht klare Loesung. | Bauen | +| Public Captcha oder Submit Fehler | Hauefiger Public-Fehler, muss sauber wirken. | Bauen oder dokumentieren | +| Sharing-Panel | URL/QR/iFrame gehoeren in Builder. | In ADV-S01 integrieren | +| Post-Submit-Actions | Field-Mapping muss sichtbar sein. | In ADV-S01 integrieren | +| Conditional-Logic-Editor | v1-Pflicht, aber eng schneiden. | In ADV-S01 integrieren | +| Forms-Liste | Compose aus D2, nicht D-FORM. | Raus | +| Submissions | Compose aus A2/A3, nicht D-FORM. | Raus | +| Booking-Intake | Eigenes Ticket `D-BOOK`. | Raus | +| Signatur-Wizard | Eigenes Paket/Compose. | Raus | + +--- + +## 6. Screen Validation Gate + +| ID | Screen/Zustand | Ist eigener Arbeitsmoment? | Neue Struktur/Entscheidung/Risiko? | Entscheidung | Begruendung | +|---|---|---|---|---|---| +| ADV-S01 | [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] | ja | ja, schwerste P16-UI | Referenz behalten | Nicht mehr Hauptfluss; S02 ist die einfache Richtung. | +| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | ja | ja, Public Renderer und Branding | Bauen | Extern sichtbar, hoher Polish. | +| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | teilweise | ja, Submit-Ende und Copy | Bauen | Public Dbschluss soll nicht Dev-Default sein. | +| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | ja | ja, blockierender Public-State | Bauen | Nutzer kann nicht fortfahren. | +| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | teilweise | ja, Public Trust | Bauen | Fehler darf nicht technisch wirken. | +| D01 | [[Screens/D01 Sharing Panel URL QR iFrame]] | nein | nein, Bereich in S01 | Nur dokumentieren | Kein eigener Screen, aber UI-Bereich. | +| D02 | [[Screens/D02 Post-Submit Actions]] | nein | ja, Mapping-Komplexitaet | Nur dokumentieren | In S01 als Panel/Tab dokumentieren. | +| D03 | [[Screens/D03 Conditional Logic Editor]] | nein | ja, Regel-Editor | Nur dokumentieren | In S01 als Panel/Tab dokumentieren. | +| D06 | [[Screens/D06 Feldkarten Menue]] | nein | ja, Klick-Logik nach David-Feedback | Nur dokumentieren | 3-Punkte-Menue fuer Duplizieren, Loeschen, ggf. Deaktivieren. | +| M01 | [[Screens/M01 Feld loeschen Confirm]] | nein | ja, Abhaengigkeiten in Logic/Actions | Nur dokumentieren | Confirm nur bei Risiko, kein normaler Bearbeitungsdialog. | +| D07 | [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | teilweise | ja, Regelbearbeitung | Referenz behalten | Fuer S02 nicht Hauptfluss; bei Advanced-Bedarf pruefen. | +| D08 | [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | teilweise | ja, Field-Mapping | Referenz behalten | Fuer S02 nicht Hauptfluss; Mapping bleibt verborgen. | +| D09 | [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | ja | ja, Publish-Entscheidung | Referenz behalten | In S02 reicht Banner/Popover im selben Screen. | +| D10 | [[Screens/D10 Builder Interaktionsfaelle]] | nein | ja, Auswahlfolgen und Edge Cases | Nur dokumentieren | Case-Matrix fuer Dropdowns, Checkboxen, vergessene Zwischenschritte, Datei/Bild und Modal-Inhalte. | +| M02 | [[Screens/M02 Unpublish Confirm]] | nein | ja, public-wirksam | Nur dokumentieren | Confirm-Dialog wegen Public-Link. | +| M03 | [[Screens/M03 Archive Confirm]] | nein | ja, destruktiv/Statuswechsel | Nur dokumentieren | Confirm aus More-Menue. | +| M04 | [[Screens/M04 Unsaved Changes Confirm]] | nein | ja, Datenverlust-Risiko | Nur dokumentieren | Standard-Guard beim Verlassen mit Dirty State. | +| D04 | Forms-Liste | nein | nein | Raus | Compose, nicht Teil von D-FORM. | +| D05 | Submissions | nein | nein | Raus | Compose, nicht Teil von D-FORM. | + +Entscheidung: `Bauen`, `Wiederverwenden`, `Nur dokumentieren`, `Spaeter`, `Raus` + +### Validation-Ergebnis fuer David + +Der urspruengliche Advanced-Subframe-Fokus lag auf diesen **8 Frames/Zustaenden**: + +- ADV-S01 Form-Builder Canvas +- S04 Oeffentliches Formular +- V01 Public Erfolg oder Redirect +- V02 Public Formular nicht verfuegbar +- V03 Public Captcha oder Submit Fehler +- D07 Logic Regel Detail +- D08 Action Detail mit Mapping +- D09 Publish Blocker Summary + +Nach der Simple-Builder-Neuausrichtung sind zusaetzlich gebaut und fuer Review nach vorne gezogen: + +- S00 Formulare verwalten +- S01 Formularart auswaehlen +- S02 Einfacher Fragen Editor +- S01B Gefuehrter Fragen Editor +- S01C Website Formular Editor +- S01D Umfrage Editor +- S01E Internes Formular Editor +- S03 Formular Design +- S05 Antworten Tabelle + +Nicht als eigene Frames bauen: + +- Kein Sharing/Teilen als eigener Hauptreiter im Simple Builder; Public-Link/QR/Einbettung gehoeren in Veroeffentlichen/Public-Link-Kontext. +- Actions, Logic, Preview und Settings als Arbeitsbereiche von S01 bzw. einfache Zusatzoptionen im Simple Builder. +- Feldkarten-Menue, allgemeine Panels, D10 Case-Matrix und Confirm-Dialoge als dokumentierte ADV-S01-Zustaende. +- Vollstaendige Forms-Liste und Submissions, weil diese Compose aus A2/A3 sind. S00/S05 sind nur schlanke D-FORM-Einstiegs-/Antwortansichten. +- Booking/Kalender/Signatur, weil diese eigene Tickets haben. + +Als zusaetzliche S01-Zustandsframes bauen: + +- D07 Logic Regel Detail +- D08 Action Detail mit Mapping +- D09 Publish Blocker Summary + +### Copy-kritische Zustaende + +| Zustand | Bauen? | Warum / Copy-Entscheidung | +|---|---|---| +| Publish blockiert | dokumentieren | Interner Nutzer braucht konkrete fehlende Punkte. | +| Public Erfolg | ja | Externer Nutzer muss sicher wissen, dass die Anfrage angekommen ist. | +| Public nicht verfuegbar | ja | Externer Nutzer ist blockiert. | +| Captcha/Submit Fehler | ja | Vertrauen erhalten, einfache naechste Aktion. | + +### Blockierende Error States + +| Zustand | UI-Form | Primaeraktion | Sekundare Aktion | Inhalt/Copy-Richtung | +|---|---|---|---|---| +| Public Form nicht veroeffentlicht | Screen | Zur Website zurueck | Anbieter kontaktieren | Formular ist aktuell nicht verfuegbar. | +| Public Form geschlossen | Screen | Anbieter kontaktieren | - | Dnnahmezeitraum ist beendet. | +| Public Submit scheitert dauerhaft | Banner/Screen | Erneut versuchen | Anbieter kontaktieren | Keine technischen Details. | +| Builder Publish blockiert | Banner im Builder | Fehler beheben | Vorschau weiter nutzen | Konkrete Liste: Name, Slug, Feldfehler. | + +--- + +## 7. Validierte Screen-Liste + +| ID | Screen/Zustand | Typ | Umsetzung | Ort | Status | +|---|---|---|---|---|---| +| S00 | [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] | Formular-Zentrale | Bauen | `/forms` | Subframe Draft / Review offen | +| E01 | [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]] | Empty State | Bauen | `/forms` | Subframe Draft / Review offen | +| E02 | [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]] | Empty State | Bauen | `/forms` | Subframe Draft / Review offen | +| S01 | [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] | Einstieg / Auswahl | Bauen | `/forms/new` | Subframe Draft / Review offen | +| S02 | [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]] | Simple Builder | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| S02L | [[Screens/05b S02L Lead Felder zuweisen|S02L Lead Felder zuweisen]] | Lead-Zustand | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| E05 | [[Screens/05c E05 S02 Lead Zuweisung pruefen|E05 S02 Lead Zuweisung pruefen]] | Lead Error State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| S03 | [[Screens/06 S03 Formular Design|S03 Formular Design]] | Builder Tab | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| S04 | [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] | Public Form | Bauen | `/f/{tenant}/{slug}` | Subframe Draft / Review offen | +| V01 | [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] | Public Feedback | Bauen | nach Submit | Subframe Draft / Review offen | +| V02 | [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] | Public Blocker | Bauen | Variante von S04 | Subframe Draft / Review offen | +| V03 | [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] | Public Error | Bauen | Variante von S04 | Subframe Draft / Review offen | +| S05 | [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]] | Builder Tab | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| E03 | [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]] | Empty State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| E04 | [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]] | Error State | Bauen | `/forms/:id/edit` | Subframe Draft / Review offen | +| S01B | [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | +| S01C | [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | +| S01D | [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | +| S01E | [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]] | Spaeter / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | +| ADV-S01 | [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] | Advanced Builder / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | +| S01 | [[Screens/90b ADV Form-Builder Canvas 2|ADV-S01-2 Form-Builder Canvas 2]] | Advanced Builder / Referenz | Bauen | `/forms/:id/edit` | Subframe Draft / Referenz | + +### ADV-S01-Zustaende und Zusatzframes vor Subframe + +Diese Eintraege sind ausgearbeitet. D07/D08/D09 wurden nach Empfehlung als zusaetzliche Subframe-Zustaende gebaut; die restlichen bleiben dokumentiert. + +| ID | Zustand | Typ | Umsetzung | +|---|---|---|---| +| D01 | [[Screens/D01 Sharing Panel URL QR iFrame]] | Panel-Zustand | Nur dokumentieren | +| D02 | [[Screens/D02 Post-Submit Actions]] | Panel-Zustand | Nur dokumentieren | +| D03 | [[Screens/D03 Conditional Logic Editor]] | Panel-Zustand | Nur dokumentieren | +| D06 | [[Screens/D06 Feldkarten Menue]] | Inline-Zustand | Nur dokumentieren | +| M01 | [[Screens/M01 Feld loeschen Confirm]] | Confirm Modal | Nur dokumentieren | +| D07 | [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]] | Panel-Zustand | Bauen | +| D08 | [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] | Panel-Zustand | Bauen | +| D09 | [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] | Inline-Zustand | Bauen | +| D10 | [[Screens/D10 Builder Interaktionsfaelle]] | Case-Matrix | Nur dokumentieren | +| M02 | [[Screens/M02 Unpublish Confirm]] | Confirm Modal | Nur dokumentieren | +| M03 | [[Screens/M03 Archive Confirm]] | Confirm Modal | Nur dokumentieren | +| M04 | [[Screens/M04 Unsaved Changes Confirm]] | Confirm Modal / Browser Guard | Nur dokumentieren | + +--- + +## 8. Subframe-Grid + +Interner Hauptarbeitsort: + +```text +ADV-S01 Form-Builder Canvas + - Header / Status / Save / Publish + - Feld-Palette + - Canvas + - Feld-Inspector + - Arbeitsmodi: Logic, Actions, Sharing, Preview, Settings +``` + +Dokumentierte ADV-S01-Zustaende: + +```text +S01 -> D01 Sharing Panel +S01 -> D02 Post-Submit Actions -> D08 Action Detail mit Mapping +S01 -> D03 Conditional Logic Editor -> D07 Logic Regel Detail +S01 -> D06 Feldkarten Menue -> M01 Feld loeschen Confirm +S01 -> D09 Publish Blocker Summary -> M02 Unpublish Confirm +S01 -> M03 Archive Confirm +S01 -> M04 Unsaved Changes Confirm +S01 -> D10 Builder Interaktionsfaelle +``` + +Public Flow: + +```text +S04 Oeffentliches Formular + | + +--> V01 Public Erfolg oder Redirect + | + +--> V02 Public Formular nicht verfuegbar + | + +--> V03 Public Captcha oder Submit Fehler +``` + +--- + +## 9. Screen-Pakete + +- [[David Review Checkliste]] +- [[Screens/01 S00 Formulare verwalten|S00 Formulare verwalten]] +- [[Screens/02 E01 S00 Keine Formulare|E01 S00 Keine Formulare]] +- [[Screens/03 E02 S00 Keine Treffer|E02 S00 Keine Treffer]] +- [[Screens/04 S01 Formularart auswaehlen|S01 Formularart auswaehlen]] +- [[Screens/05 S02 Einfacher Fragen Editor|S02 Einfacher Fragen Editor]] +- [[Screens/06 S03 Formular Design|S03 Formular Design]] +- [[Screens/07 S04 Oeffentliches Formular|S04 Oeffentliches Formular]] +- [[Screens/08 V01 Public Erfolg oder Redirect|V01 Public Erfolg oder Redirect]] +- [[Screens/09 V02 Public Formular nicht verfuegbar|V02 Public Formular nicht verfuegbar]] +- [[Screens/10 V03 Public Captcha oder Submit Fehler|V03 Public Captcha oder Submit Fehler]] +- [[Screens/11 S05 Antworten Tabelle|S05 Antworten Tabelle]] +- [[Screens/12 E03 S05 Keine Antworten|E03 S05 Keine Antworten]] +- [[Screens/13 E04 S05 Export Fehler|E04 S05 Export Fehler]] +- [[Screens/80 S01B Gefuehrter Fragen Editor|S01B Gefuehrter Fragen Editor]] +- [[Screens/81 S01C Website Formular Editor|S01C Website Formular Editor]] +- [[Screens/82 S01D Umfrage Editor|S01D Umfrage Editor]] +- [[Screens/83 S01E Internes Formular Editor|S01E Internes Formular Editor]] +- [[Screens/90 ADV Form-Builder Canvas|ADV-S01 Form-Builder Canvas]] +- [[Screens/90b ADV Form-Builder Canvas 2|ADV-S01-2 Form-Builder Canvas 2]] +- [[Screens/D01 Sharing Panel URL QR iFrame]] +- [[Screens/D02 Post-Submit Actions]] +- [[Screens/D03 Conditional Logic Editor]] +- [[Screens/D06 Feldkarten Menue]] +- [[Screens/M01 Feld loeschen Confirm]] +- [[Screens/91 D07 Logic Regel Detail|D07 Logic Regel Detail]] +- [[Screens/92 D08 Action Detail mit Mapping|D08 Action Detail mit Mapping]] +- [[Screens/93 D09 Publish Blocker Summary|D09 Publish Blocker Summary]] +- [[Screens/D10 Builder Interaktionsfaelle]] +- [[Screens/M02 Unpublish Confirm]] +- [[Screens/M03 Archive Confirm]] +- [[Screens/M04 Unsaved Changes Confirm]] + +--- + +## 10. Handoff-Check + +- [x] Jeder Screen ist mit Umsetzung markiert. +- [x] Jedes sichtbare Feld hat eine Datenquelle. Als Detail-Brainstorming dokumentiert. +- [x] Jeder Button hat eine Aktion. Nach David-Feedback um Interaktionslogik ergaenzt. +- [x] Die wichtigsten ADV-S01-Klickzustaende sind als eigene Vor-Subframe-Dateien dokumentiert. +- [x] Die wichtigsten Was-passiert-wenn-Faelle sind in D10 als Case-Matrix dokumentiert. +- [x] Canvas ist nach P2-Auth-Referenz erweitert: Hauptflow, ADV-S01-Zustaende, D10, Public Flow und Scope-Notizen. +- [x] Banner/Inline-Meldungen sind dokumentiert. +- [x] Toasts/Action-Feedback sind dokumentiert. +- [x] Meldungs-/Error-State-Matrix ist ausgefuellt. +- [x] Blockierende Error States sind mit naechster Aktion definiert. +- [x] Relevante Zustaende sind beschrieben. +- [x] Offene Fragen sind sichtbar. +- [x] Ticket-Handoff-Entwurf ist in `Tickets/Fertige Tickets/` angelegt. +- [x] Detail-Brainstorming fuer ADV-S01/S02/S04/V01/V02/V03 ist abgeschlossen. +- [x] David-Review-Rueckmeldung ist erfolgt. +- [x] S01-Interaktionslogik nach David-Feedback ist eingearbeitet. +- [ ] David-Freigabe nach S01-Nacharbeit ist erfolgt. +- [x] Subframe-Link fuer Flow, Hauptfluss 01-13 und Referenzseiten 80-93 ist eingetragen. diff --git a/02 Wireframes/Screen Paket Tracker.md b/02 Wireframes/Screen Paket Tracker.md index 23383ebe..697f1086 100644 --- a/02 Wireframes/Screen Paket Tracker.md +++ b/02 Wireframes/Screen Paket Tracker.md @@ -48,6 +48,7 @@ Diese Datei ist der erste Ort, um zu sehen: | WF-P9 Abnahme | D-ABN | Auftrag | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; mehrstufiger Mobile-Workflow; immutable nach Abschluss | | WF-P12 Flow-Editor | D-FLOW | Automationen | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; Katalog links/Canvas Mitte/Konfig rechts; Start-Auswahl mit Vorlagen; Langlaeufer | | WF-P12 Verwaltung | D-P12 | Automationen | Validiert | [MD]() | [Canvas]() | - | Subframe nach explizitem OK | Screens validiert 2026-07-09; Klartext-Timeline + 24h-Undo; Konfig-Panels hier, Editor bettet ein | +| WF-D-FORM Form Builder | D-FORM | Termine & Formulare | Review | [MD]() | [Canvas]() | [Subframe]() | David Review / Handoff | Mitarbeiterinnen-Paket eingebaut 2026-07-09; S02 Simple Builder ist empfohlener Hauptfluss; Advanced-Canvas bleibt Referenz | --- @@ -188,6 +189,39 @@ Diese Datei ist der erste Ort, um zu sehen: | S03 | Lauf-Detail (Timeline, 24h-Undo) | WF-P12 Verwaltung | Detail | Bauen | Validiert | `.../executions/:id` | [MD]() | - | [Canvas]() | | S04 | Vorlagen-Katalog | WF-P12 Verwaltung | Karten-Liste | Bauen | Validiert | `/automations/templates` | [MD]() | - | [Canvas]() | | S05 | Baustein-Konfig-Panels (Muster) | WF-P12 Verwaltung | Compose-Panel | Bauen | Validiert | im Flow-Editor | [MD]() | - | [Canvas]() | +| S00 | Formulare verwalten | WF-D-FORM Form Builder | Formular-Zentrale | Bauen | Subframe Draft / Review offen | `/forms` | [MD]() | [Subframe]() | [Canvas]() | +| E01 | S00 Keine Formulare | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms` | [MD]() | [Subframe]() | [Canvas]() | +| E02 | S00 Keine Treffer | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms` | [MD]() | [Subframe]() | [Canvas]() | +| S01 | Formularart auswaehlen | WF-D-FORM Form Builder | Einstieg / Auswahl | Alternative bauen | Subframe Draft / Review offen | `/forms/new` | [MD]() | [Subframe]() | [Canvas]() | +| S02 | Einfacher Fragen Editor | WF-D-FORM Form Builder | Simple Builder Alternative | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S02L | Lead Felder zuweisen | WF-D-FORM Form Builder | S02-Zustand / Lead Editor | Subframe Draft | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| E05 | S02 Lead Zuweisung pruefen | WF-D-FORM Form Builder | Lead Mapping Error State | Subframe Draft | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S03 | Formular Design | WF-D-FORM Form Builder | Builder Tab | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S04 | Oeffentliches Formular | WF-D-FORM Form Builder | Public Form | Bauen | Subframe Draft / Review offen | `/f/{tenant}/{slug}` | [MD]() | [Subframe]() | [Canvas]() | +| V01 | Public Erfolg oder Redirect | WF-D-FORM Form Builder | Public Feedback | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD]() | [Subframe]() | [Canvas]() | +| V02 | Public Formular nicht verfuegbar | WF-D-FORM Form Builder | Public Blocker | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD]() | [Subframe]() | [Canvas]() | +| V03 | Public Captcha oder Submit Fehler | WF-D-FORM Form Builder | Public Error | Bauen | Subframe Draft / Review offen | `/f/:slug` | [MD]() | [Subframe]() | [Canvas]() | +| S05 | Antworten Tabelle | WF-D-FORM Form Builder | Builder Tab | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| E03 | S05 Keine Antworten | WF-D-FORM Form Builder | Empty State | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| E04 | S05 Export Fehler | WF-D-FORM Form Builder | Error State | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S01B | Gefuehrter Fragen Editor | WF-D-FORM Form Builder | Simple Builder Alternative | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S01C | Website Formular Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S01D | Umfrage Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| S01E | Internes Formular Editor | WF-D-FORM Form Builder | Simple Builder Beispiel | Alternative bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| ADV-S01 | Form-Builder Canvas | WF-D-FORM Form Builder | Bespoke Builder | Bauen | Subframe Draft / Review offen | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| ADV-S01-2 | Form-Builder Canvas 2 | WF-D-FORM Form Builder | Advanced / Referenz | Referenz behalten | Subframe Draft / aktuell nicht Hauptfluss | `/forms/:id/edit` | [MD]() | [Subframe]() | [Canvas]() | +| D07 | Logic Regel Detail | WF-D-FORM Form Builder | Panel-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 Logic-Modus, kein eigener Screen | [MD]() | [Subframe]() | [Canvas]() | +| D08 | Action Detail mit Mapping | WF-D-FORM Form Builder | Panel-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 Actions-Modus, kein eigener Screen | [MD]() | [Subframe]() | [Canvas]() | +| D09 | Publish Blocker Summary | WF-D-FORM Form Builder | Inline-Zustand in S01 | Bauen | Subframe Draft / Review offen | in S01 nach Klick auf Publish | [MD]() | [Subframe]() | [Canvas]() | +| D01 | Sharing Panel URL QR iFrame | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD]() | - | [Canvas]() | +| D02 | Post-Submit Actions | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD]() | - | [Canvas]() | +| D03 | Conditional Logic Editor | WF-D-FORM Form Builder | Panel-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD]() | - | [Canvas]() | +| D06 | Feldkarten Menue | WF-D-FORM Form Builder | Inline-Zustand in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD]() | - | [Canvas]() | +| D10 | Builder Interaktionsfaelle | WF-D-FORM Form Builder | Case-Matrix in S01 | Nur dokumentieren | Vor Subframe / dokumentiert | in ADV-S01 Form-Builder Canvas, kein eigener Screen | [MD]() | - | [Canvas]() | +| M01 | Feld loeschen Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 Feldkarte oder Inspector | [MD]() | - | [Canvas]() | +| M02 | Unpublish Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 Header oder More-Menue | [MD]() | - | [Canvas]() | +| M03 | Archive Confirm | WF-D-FORM Form Builder | Confirm Modal | Nur dokumentieren | Vor Subframe / dokumentiert | von S01 More-Menue | [MD]() | - | [Canvas]() | +| M04 | Unsaved Changes Confirm | WF-D-FORM Form Builder | Confirm Modal / Browser Guard | Nur dokumentieren | Vor Subframe / dokumentiert | beim Verlassen von S01 mit Dirty State | [MD]() | - | [Canvas]() | --- @@ -273,7 +307,10 @@ Diese Datei ist der erste Ort, um zu sehen: | WF-P9 Projekt-Akte | Board-Auftragsoptionen | Genommen | Abnahme-Pflicht je Spalte, Vorlagen-Zuweisung, Auto-Archiv -> erweitern WF-P8 S04 (kein neuer Screen). | Validiert 2026-07-09 | | WF-P12 Flow-Editor | Editor-Anordnung | Genommen | Katalog links, Canvas Mitte, Konfig-Panel rechts (n8n-Muster); Katalog einklappbar. | Validiert 2026-07-09 | | WF-P12 Flow-Editor | Anlegen-Flow | Genommen | Start-Auswahl-Modal: leer ODER Vorlage (Katalog eingebettet). | Validiert 2026-07-09 | -| WF-D-FORM | Formulare zurueckgestellt | Offen | Davids Mitarbeiter:in arbeitet daran; Infos folgen von David. | 2026-07-09 | +| WF-D-FORM Form Builder | Paket eingebaut | Genommen | Mitarbeiterinnen-Paket wurde als `WF-D-FORM Form Builder` in den Vault uebernommen. | Ursprungsname war `WF-P16 Form Builder`; wegen bestehendem `P16 Termine` bewusst auf D-FORM normalisiert | +| WF-D-FORM Form Builder | Simple Builder als Hauptfluss | Review | S02 ist der empfohlene Google-Forms-nahe Haupteditor fuer Handwerksbetriebe; ADV-S01/ADV-S01-2 bleiben Referenz. | David prueft Richtung und Subframe-Feinschliff | +| WF-D-FORM Form Builder | Lead-Feldzuweisung | Review | S02L ordnet Formularfragen per Dropdown Lead-Feldern zu; E05 deckt fehlende oder unmoegliche Zuweisungen ab. | Davids Feedback aus dem Mitarbeiterinnen-Paket uebernommen | +| WF-D-FORM Form Builder | Scope-Abgrenzung | Genommen | D-FORM umfasst Builder, Public Form, Public States, Design und Antworten-Tabelle; Booking, Kalender, Signatur und HR bleiben eigene Pakete. | Handoff-Datei angelegt | --- diff --git a/05 HiveGrid Map/HiveGrid Map.canvas b/05 HiveGrid Map/HiveGrid Map.canvas index 1ecd853b..77d76a62 100644 --- a/05 HiveGrid Map/HiveGrid Map.canvas +++ b/05 HiveGrid Map/HiveGrid Map.canvas @@ -4,7 +4,7 @@ {"id":"88792c50986c93db","type":"group","x":1950,"y":960,"width":2587,"height":740,"color":"2","label":"VERTRIEB — vom Anruf zum Auftrag"}, {"id":"77c19412215a977c","type":"group","x":5037,"y":960,"width":2260,"height":740,"color":"2","label":"AUFTRAG & BAUSTELLE"}, {"id":"41b8d85d3bb8d47d","type":"group","x":-160,"y":0,"width":1850,"height":740,"color":"6","label":"BASIS — gilt für alle Features"}, - {"id":"ca7223940f6e1d29","type":"group","x":2520,"y":2080,"width":2317,"height":520,"label":"TERMINE & FORMULARE"}, + {"id":"ca7223940f6e1d29","type":"group","x":2520,"y":2080,"width":2317,"height":740,"label":"TERMINE & FORMULARE"}, {"id":"e97e13901e405fcd","type":"group","x":5037,"y":2080,"width":1540,"height":740,"label":"KOMMUNIKATION"}, {"id":"8acc5d7d61317076","type":"group","x":2110,"y":3020,"width":1450,"height":740,"label":"AUTOMATIONEN"}, {"id":"070f258760fab4e9","type":"group","x":760,"y":3020,"width":1190,"height":740,"label":"AUFGABEN & DATEIEN — stecken in jedem Feature"}, @@ -22,7 +22,8 @@ {"id":"a-leads-pkg","type":"file","file":"02 Wireframes/P7 Leads/WF-P7 Leads/WF-P7 Leads.canvas","x":2007,"y":1440,"width":460,"height":220}, {"id":"77ebfde5a3a05b8a","type":"text","text":"## Online-Terminbuchung 🌐\n**Ticket:** `D-BOOK` + `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** 🌐 Buchungslink + `/bookings`\n\n**Was drin ist:** 🌐 Buchungs-Seite für Kunden (freien Termin wählen → Formular → Bestätigung mit Kalender-Datei), intern: Buchungs-Liste (verschieben, stornieren, No-Show), Buchungsseiten-Editor, Verfügbarkeits-Zeiten\n\n**So funktioniert's:** Kunde bucht selbst, der erste freie Mitarbeiter bekommt den Termin, die Anfrage landet im Lead-Eingang. Muss am schönsten aussehen — ist öffentlich.","x":3067,"y":2160,"width":460,"height":360,"color":"2"}, {"id":"28bd46ecb4eaa069","type":"text","text":"## Kalender\n**Ticket:** `D-BOOK` + `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** `/calendar` + Einstellungen\n\n**Was drin ist:** Monats-/Wochen-Ansicht mit allen Terminen (Google-Kalender + Buchungen + Plantafel, je mit Herkunfts-Marker), Google-Kalender verbinden, Konflikt-Übersicht\n\n**So funktioniert's:** Läuft in beide Richtungen mit Google (Outlook kommt in v2). Fremde private Termine erscheinen nur als »belegt«.","x":3837,"y":2160,"width":460,"height":360,"color":"2"}, - {"id":"6b8c7d3bc3ee7449","type":"text","text":"## Formulare (Baukasten) 🌐\n**Ticket:** `D-FORM` + `D-P16` (Teil) · **Status:** ⬜ zurückgestellt (Davids Mitarbeiter:in arbeitet daran, Infos folgen)\n**Wo:** `/forms` + öffentlicher Link\n\n**Was drin ist:** Formular-Baukasten (Felder per Ziehen anordnen, Wenn-Dann-Logik »zeige Feld X wenn …«, Live-Vorschau), 🌐 öffentliches Formular zum Teilen (Link, QR-Code, Einbetten), Antworten-Übersicht\n\n**So funktioniert's:** Was nach dem Absenden passiert, ist einstellbar: Anfrage/Aufgabe anlegen, Mail senden, Automation starten. Dieselben Formulare stecken auch in HR-Anträgen und der Terminbuchung.","x":2560,"y":2160,"width":460,"height":360,"color":"1"}, + {"id":"6b8c7d3bc3ee7449","type":"text","text":"## Formulare (Baukasten) 🌐\n**Ticket:** `D-FORM` + `D-P16` (Teil) · **Status:** 🟡 Review-Draft (Mitarbeiterinnen-Paket eingebaut, David Review offen)\n**Wo:** `/forms` + öffentlicher Link\n\n**Was drin ist:** Formular-Zentrale, einfacher Google-Forms-naher Builder S02, Lead-Feldzuweisung S02L/E05, Design, Antworten-Tabelle, 🌐 öffentliches Formular mit Erfolg/Blocker/Submit-Fehler\n\n**So funktioniert's:** S02 ist der Hauptfluss für Handwerksbetriebe; Advanced-Canvas, Logic/Actions und Publish-Blocker bleiben als Referenz/Power-User-Richtung. D-FORM kann später in Terminbuchung, HR und Abnahme-Vorlagen eingesteckt werden.","x":2560,"y":2160,"width":460,"height":360,"color":"2"}, + {"id":"a-d-form-pkg","type":"file","file":"02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/WF-D-FORM Form Builder.canvas","x":2560,"y":2560,"width":460,"height":220}, {"id":"4cce52e2e3bd8823","type":"text","text":"## Versand-Technik & Statistiken 🌐\n**Ticket:** `D-P14` · **Status:** ⬜ offen\n**Wo:** `/email-marketing` + Einstellungen\n\n**Was drin ist:** Eigene Absender-Domain einrichten (mit Copy-Paste-Anleitung), Kampagnen-Übersicht + Statistiken (zugestellt/geöffnet/geklickt), gesperrte Empfänger, Vorlagen, 🌐 Abmelde-Seite\n\n**So funktioniert's:** Mails an Kunden tauchen automatisch am Kontakt auf (BCC-Trick, kein Postfach-Anschluss nötig — der kommt in v2).","x":1850,"y":2160,"width":460,"height":360,"color":"2"}, {"id":"b789fc765f833f45","type":"text","text":"## Digital unterschreiben (E-Signatur)\n**Ticket:** `D-P16` (Teil) · **Status:** ⬜ offen\n**Wo:** im Projekt-Detail\n\n**Was drin ist:** Angebot als PDF hochladen → Unterzeichner festlegen → Kunde unterschreibt per Link (mit SMS/Mail-Code) oder direkt auf dem Gerät → Status je Unterzeichner, Erinnerung, Widerruf\n\n**So funktioniert's:** Hängt direkt am Projekt (»Angebot zur Signatur senden«). Eigene Lösung, kein Pflicht-Drittanbieter.","x":4337,"y":2160,"width":460,"height":360,"color":"5"}, {"id":"903e3384b0a5e623","type":"text","text":"**Detail-Flows:** 9 Wireframe-Pakete mit eigenen Canvases in `02 Wireframes/P2 Auth/` (Login, Signup, Reset, Set Password, 2FA, RBAC …) — siehe Tracker","x":2777,"y":480,"width":460,"height":220}, diff --git a/05 HiveGrid Map/HiveGrid Map.md b/05 HiveGrid Map/HiveGrid Map.md index 960291fc..a2920b5e 100644 --- a/05 HiveGrid Map/HiveGrid Map.md +++ b/05 HiveGrid Map/HiveGrid Map.md @@ -51,7 +51,7 @@ Gesamtkarte aller HiveGrid-v1-Features. Eine Karte = **ein Feature** (so benannt | Abnahme (Baustellen-Protokoll) 📱 | Auftrag & Baustelle | D-ABN | 🔴 | 🟡 vorgeplant | | Kampagnen & Empfängerlisten | E-Mail-Marketing | D-KAMP | 🟠 | ⬜ offen | | Versand-Technik & Statistiken 🌐 | E-Mail-Marketing | D-P14 | 🟠 | ⬜ offen | -| Formulare (Baukasten) 🌐 | Termine & Formulare | D-FORM + D-P16 (Teil) | 🔴 | ⬜ zurückgestellt | +| Formulare (Baukasten) 🌐 | Termine & Formulare | D-FORM + D-P16 (Teil) | 🔴 | 🟡 Review-Draft | | Online-Terminbuchung 🌐 | Termine & Formulare | D-BOOK + D-P16 (Teil) | 🟠 | ⬜ offen | | Kalender | Termine & Formulare | D-BOOK + D-P16 (Teil) | 🔴 mittel | ⬜ offen | | Digital unterschreiben (E-Signatur) | Termine & Formulare | D-P16 (Teil) | 🔵 | ⬜ offen | @@ -284,14 +284,14 @@ Abhaken = in der groben Planung berücksichtigt (Screens/Flow verortet). Quelle: ### Termine & Formulare -#### Formulare (Baukasten) 🌐 — `D-FORM` + `D-P16` (Teil) — ⬜ zurückgestellt (2026-07-09: Davids Mitarbeiter:in arbeitet daran; Infos folgen von David) -- [ ] Formular-Baukasten: Felder per Ziehen anordnen (12 Feld-Typen), Feld-Einstellungen, Live-Vorschau -- [ ] Wenn-Dann-Logik (»zeige Feld X, wenn Y = Z«) -- [ ] Veröffentlichen + Teilen: Link, QR-Code, Website-Einbettung -- [ ] Nach dem Absenden: Anfrage/Kontakt/Projekt/Aufgabe anlegen, Mail senden, Webhook, Automation starten (mit Feld-Zuordnung) -- [ ] 🌐 Öffentliches Formular (Logik live, Spam-Schutz, Firmen-Logo, alle Zustände) -- [ ] Formular-Liste + Antworten-Übersicht (Tabelle, Filter, CSV, PDF-Export, Aktions-Protokoll mit »nochmal ausführen«) -- [ ] Renderer wiederverwendbar (steckt auch in HR-Anträgen, Buchungs-Fragen, Abnahme-Vorlagen) +#### Formulare (Baukasten) 🌐 — `D-FORM` + `D-P16` (Teil) — 🟡 Review-Draft (2026-07-09) +- [x] Formular-Zentrale, Formularart-Auswahl und einfacher Google-Forms-naher Haupteditor S02 als Subframe-Draft vorbereitet. +- [x] Lead-Feldzuweisung ergänzt: S02L ordnet Formularfragen per Dropdown Lead-Feldern zu; E05 deckt fehlende oder unmögliche Zuweisungen ab. +- [x] Advanced-Canvas, Logic, Actions und Publish-Blocker als Referenz-/Power-User-Richtung dokumentiert und verlinkt. +- [x] 🌐 Öffentliches Formular mit Erfolg, nicht verfügbar und Captcha-/Submit-Fehler als Public States vorbereitet. +- [x] Formular-Design und Antworten-Tabelle inklusive Empty-/Export-Fehlerzuständen vorbereitet. +- [ ] David Review und Feinschliff der Subframe-Frames abschließen. +- Paket: `02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/` (Mitarbeiterinnen-Paket eingebaut; Handoff erstellt) #### Online-Terminbuchung 🌐 — `D-BOOK` + `D-P16` (Teil) — ⬜ offen - [ ] 🌐 Buchungs-Seite: freien Termin wählen (Zeitzonen-fest) → Fragen-Formular → Bestätigung + Kalender-Datei (.ics); einbettbar diff --git a/Tickets/Fertige Tickets/D-FORM Form Builder.md b/Tickets/Fertige Tickets/D-FORM Form Builder.md new file mode 100644 index 00000000..e6bc3427 --- /dev/null +++ b/Tickets/Fertige Tickets/D-FORM Form Builder.md @@ -0,0 +1,78 @@ +--- +kind: ticket-handoff +project: HiveGrid Screen Project +ticket: D-FORM +area: Termine & Formulare / Form Builder / Public Forms +status: Review / Handoff +repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes +stand: 2026-07-09 +--- + +# D-FORM Form Builder + +Repo: https://git.tool-ctrl.de/david/Hivegrid-Wireframes + +Zentrale Tracker-Datei: [Screen Paket Tracker](../../02%20Wireframes/Screen%20Paket%20Tracker.md) + +Arbeitsbereich im Repo: [02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder) + +Start fuer Review: [00 Start hier - David](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/00%20Start%20hier%20-%20David.md) + +Uebergabe: [D-FORM David Uebergabe 2026-07-09](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/D-FORM%20David%20Uebergabe%202026-07-09.md) + +Canvas: [WF-D-FORM Form Builder.canvas](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.canvas) + +Subframe Flow: [WF-D-FORM Form Builder](https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad) + +## Kurzfassung + +Das D-FORM-Mitarbeiterinnen-Paket wurde in den Haupt-Vault uebernommen und auf `WF-D-FORM Form Builder` normalisiert. Es enthaelt einen reviewfaehigen Subframe-Draft fuer Formular-Zentrale, einfachen Form-Builder, Lead-Feldzuweisung, Public Form, Public States, Design und Antworten-Tabelle. + +Der empfohlene Hauptfluss ist der einfache Google-Forms-nahe Editor `S02`. Der alte Advanced-Canvas bleibt als Referenz/Power-User-Richtung erhalten. + +## Gemacht + +- Paket unter `02 Wireframes/D-FORM Formulare/WF-D-FORM Form Builder/` eingebaut. +- Paket-MD, Screens, Varianten, Canvas, Review-Checkliste, Bauplan, Bau-Log und David-Uebergabe uebernommen. +- Paketname von `WF-P16 Form Builder` auf `WF-D-FORM Form Builder` normalisiert, weil `P16` im Vault bereits Termine/Kalender/Signatur belegt. +- Canvas-Datei auf die neuen D-FORM-Pfade umgeschrieben und als JSON validiert. +- `Screen Paket Tracker` um Flow, Screen-/State-Zeilen und D-FORM-Entscheidungen erweitert. +- `HiveGrid Map` von `zurueckgestellt` auf `Review-Draft` aktualisiert. + +## Review-Punkte + +- Pruefen, ob `S02 Einfacher Fragen Editor` als Haupteditor fuer Handwerksbetriebe die richtige Richtung ist. +- Pruefen, ob `S02L Lead Felder zuweisen` und `E05 S02 Lead Zuweisung pruefen` fuer Davids Lead-Mapping-Anforderung reichen. +- Public-Strecke `S04`, `V01`, `V02`, `V03` auf Copy, mobile Nutzbarkeit und Trust pruefen. +- Entscheiden, ob `ADV-S01`, `ADV-S01-2`, `D07`, `D08`, `D09` nur Referenz bleiben oder spaeter als Power-User-Flow nachgezogen werden. +- Klaeren, ob die dokumentierten Modale `M01` bis `M04` als echte Dialog-Screens gebaut werden muessen. + +## Flow-Paket + +| Flow | Status | Repo | Canvas | Subframe | +|---|---|---|---|---| +| WF-D-FORM Form Builder | Review / Subframe Draft | [MD](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.md) | [Canvas](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.canvas) | [Flow](https://app.subframe.com/f023064a5ca0/flow/afb1c257-46f0-4b23-aaed-d75f4773f1a9/edit?tab=ai&conversationId=02d948da-f9aa-4ab5-8352-2745789bb9ad) | + +## Hauptscreens + +| ID | Screen | Subframe | +|---|---|---| +| S00 | Formulare verwalten | [Subframe](https://app.subframe.com/f023064a5ca0/design/2325aa7a-d968-4028-8282-0823b15bf964/edit) | +| E01 | S00 Keine Formulare | [Subframe](https://app.subframe.com/f023064a5ca0/design/136c11b3-8310-4165-b4ba-9cf099ee0873/edit) | +| E02 | S00 Keine Treffer | [Subframe](https://app.subframe.com/f023064a5ca0/design/ccf8d2f7-e7b4-4ffd-87f6-1785edc1b2f7/edit) | +| S01 | Formularart auswaehlen | [Subframe](https://app.subframe.com/f023064a5ca0/design/c423ebcd-914f-4038-ab9f-7c2a745a8bec/edit) | +| S02 | Einfacher Fragen Editor | [Subframe](https://app.subframe.com/f023064a5ca0/design/181aaa0f-5ae7-4f74-acf7-8273fbbe4dd5/edit) | +| S02L | Lead Felder zuweisen | [Subframe](https://app.subframe.com/f023064a5ca0/design/c8aa80cb-0cc8-473f-9fac-a09d395e6571/edit) | +| E05 | S02 Lead Zuweisung pruefen | [Subframe](https://app.subframe.com/f023064a5ca0/design/26600ce4-7baf-4ffb-9955-7c7d1eef99d1/edit) | +| S03 | Formular Design | [Subframe](https://app.subframe.com/f023064a5ca0/design/090f06a9-3fa7-4442-b8bc-035e95de7329/edit) | +| S04 | Oeffentliches Formular | [Subframe](https://app.subframe.com/f023064a5ca0/design/caef9ddd-03d6-4a26-8dc1-16aa198a7304/edit) | +| V01 | Public Erfolg oder Redirect | [Subframe](https://app.subframe.com/f023064a5ca0/design/c06ecfc3-1f86-4dfe-9cfd-cec8b8629253/edit) | +| V02 | Public Formular nicht verfuegbar | [Subframe](https://app.subframe.com/f023064a5ca0/design/f96ec12a-5e6a-471d-9a9c-6babcb57c74c/edit) | +| V03 | Public Captcha oder Submit Fehler | [Subframe](https://app.subframe.com/f023064a5ca0/design/95c96bc9-35d4-47ce-b510-7d8ea1f41936/edit) | +| S05 | Antworten Tabelle | [Subframe](https://app.subframe.com/f023064a5ca0/design/9e8eeab7-44ea-4b77-85e6-0818d97e1ac3/edit) | +| E03 | S05 Keine Antworten | [Subframe](https://app.subframe.com/f023064a5ca0/design/6f56c14f-d66e-4734-8a29-a900ac74a8a7/edit) | +| E04 | S05 Export Fehler | [Subframe](https://app.subframe.com/f023064a5ca0/design/00553ea4-9839-4d22-b540-9b9ef0bf014f/edit) | + +## Hinweis fuer Ticket-System + +Diese Datei ist der kompakte Handoff fuer `D-FORM`. Fuer Detailentscheidungen, zusaetzliche Referenzscreens, dokumentierte D-/M-Zustaende und offene Review-Fragen sind der [Screen Paket Tracker](../../02%20Wireframes/Screen%20Paket%20Tracker.md) und das Paket [WF-D-FORM Form Builder](../../02%20Wireframes/D-FORM%20Formulare/WF-D-FORM%20Form%20Builder/WF-D-FORM%20Form%20Builder.md) massgeblich. diff --git a/Tickets/README.md b/Tickets/README.md index d705df4b..29121d1f 100644 --- a/Tickets/README.md +++ b/Tickets/README.md @@ -20,3 +20,4 @@ Die Detailwahrheit bleibt in den Wireframe-Paketen und im `Screen Paket Tracker` |---|---| | D-P2 | [D-P2 Auth Wireframes]() | | D-D0b | [D-D0b Layout Standards]() | +| D-FORM | [D-FORM Form Builder]() |