Fields – Erweiterte redaktionelle YForm-Feldtypen für REDAXO

Das AddOn Fields stellt eine umfangreiche Sammlung zusätzlicher YForm-Value-Feldtypen bereit, die häufig benötigte Eingabemuster und Strukturierungsmöglichkeiten abdecken – von Social-Media-Profilen und Tabellen bis hin zu Tabs, Akkordeons und Grid-Layouts.

Funktionen

Spezielle Eingabetypen (UI Controls)

Inline Switch – Moderner, eckiger Toggle-Switch für Boolean-Werte (Liste & Formular)
Inline Edit – Direktes Bearbeiten von Text- und Textarea-Feldern in der YForm-Listenansicht (Click-to-Edit)
Inline Number – Zahlenfeld mit Inline-Editing, Präfix/Suffix (z.B. €/km), Min/Max und Step-Optionen
Icon Picker – Icon-Auswahl aus Font Awesome und/oder UIkit-Iconsets
Star Rating – Bewertungsfeld (1-10 Sterne) mit visueller Eingabe
IBAN – IBAN-Eingabe mit Live-Validierung über openIBAN.com (serverseitig geproxied)

Komplexe Datentypen (Repeater & Strukturen)

Tabelle – Barrierefreier Tabelleneditor mit flexiblen Spalten/Zeilen, Min/Max-Constraints und erweiterten Datentypen (Medien, Links, Textarea)
Social Web – Repeater für Social-Media-Profile mit 24 vordefinierten Plattformen
Öffnungszeiten – Wochentags-Editor mit Zeitfenstern, Sondertagen und Notizen
Kontakte – Flexible Kontaktkarten mit konfigurierbaren optionalen Feldern (Avatar, Firma, Adresse, etc.)
FAQ – Frage/Antwort-Repeater mit automatischer Schema.org FAQPage JSON-LD Ausgabe

Layout & Logik

Tabs & Akkordeons – Gruppierung von Feldern in Tabs, Akkordeons oder Fieldsets
Grid & Layout – Mehrspaltige Anordnung von Feldern (Grid/Flexbox)
Conditional – Bedingte Feldgruppen (Felder ein-/ausblenden basierend auf anderen Feldwerten)

Installation

Im REDAXO-Installer nach fields suchen und installieren
Oder: Repository nach redaxo/src/addons/fields klonen und im Backend aktivieren

Konfiguration

Unter AddOns → Fields → Einstellungen können folgende Optionen konfiguriert werden:

Einstellung	Beschreibung
Icon-Set (Social Web)	Font Awesome und/oder UIkit Icons
Kontakt-Felder	Welche optionalen Felder bei Kontakten verfügbar sind
IBAN-Proxy	openIBAN.com-Proxy aktivieren/deaktivieren
Icon Picker Sets	Verfügbare Icon-Bibliotheken

Verwendung im YForm-Tablemanager

Die Feldtypen erscheinen nach der Installation automatisch in der YForm-Feldauswahl. Alle Felder sind unter dem Typ value verfügbar:

Feldtyp	DB-Typ	Beschreibung
`fields_social_web`	`mediumtext`	Social-Media-Profile als JSON
`fields_opening_hours`	`mediumtext`	Öffnungszeiten als JSON
`fields_contacts`	`mediumtext`	Kontaktdaten als JSON
`fields_table`	`mediumtext`	Tabelle mit Spalten- und Zeilendaten sowie Meta-Infos
`fields_iban`	`varchar(34)`	IBAN mit Validierung
`fields_faq`	`mediumtext`	FAQ-Einträge als JSON
`fields_conditional`	kein DB-Feld	Steuert Sichtbarkeit anderer Felder
`fields_interactive`	kein DB-Feld	Formularfelder in Tabs/Akkordeons gruppieren
`fields_structure`	kein DB-Feld	Formularfelder mehrspaltig anordnen (Grid)
`fields_icon_picker`	`varchar(191)`	Ausgewähltes Icon (z.B. `fa-home`)
`fields_rating`	`int`	Ganzzahlige Bewertung (Default 1-5 Sterne)
`fields_inline_switch`	`tinyint(1)`	Boolescher Switch für Listen- & Formularansicht
`fields_inline`	`text`, `mediumtext`	Text/Textarea mit Inline-Editing in der Liste
`fields_inline_number`	`int`, `float`, `decimal`	Zahlenfeld mit Inline-Editing (Präfix/Suffix/Min/Max)

Frontend-Ausgabe mit Fragmenten

Für jedes Feld stehen Frontend-Fragmente in vier Framework-Varianten bereit:

fields/bootstrap3/ – Bootstrap 3
fields/uikit3/ – UIkit 3
fields/tailwind/ – Tailwind CSS
fields/plain/ – Framework-unabhängig (semantisches HTML)

Social Web

$fragment = new rex_fragment();
$fragment->setVar('json', $item->getValue('social_web'));
$fragment->setVar('class', 'my-social-links');
echo $fragment->parse('fields/uikit3/social_web.php');

Öffnungszeiten

$fragment = new rex_fragment();
$fragment->setVar('json', $item->getValue('opening_hours'));
$fragment->setVar('show_status', true);
echo $fragment->parse('fields/bootstrap3/opening_hours.php');

Der OpeningHoursHelper bietet zusätzliche Methoden:

use FriendsOfRedaxo\Fields\OpeningHoursHelper;

$data = json_decode($item->getValue('opening_hours'), true);
$helper = new OpeningHoursHelper($data);

// Aktueller Status
if ($helper->isOpenNow()) {
    echo 'Jetzt geöffnet';
}

// Heutiger Tag
$today = $helper->getToday();

// Gruppierte Öffnungszeiten (Mo–Fr zusammengefasst wenn gleich)
$grouped = $helper->getRegularGrouped();

Tabelle (Barrierefrei)

Die Tabelle speichert Daten und Spaltenkonfiguration getrennt, was responsive Darstellungen erleichtert.

$fragment = new rex_fragment();
$fragment->setVar('json', $item->getValue('table'));
echo $fragment->parse('fields/bootstrap3/table.php');

Funktionen des Editors:

Definierbare Min/Max-Grenzen für Zeilen und Spalten
Unabhängige Textausrichtung für Kopf- und Datenzellen (Links, Mitte, Rechts/Zahl)
Inline-Hinzufügen von Zeilen und Spalten mitten in der Tabelle
Strict Mode für Kopfzeilen/spalten (zwingend an/aus oder optional)
Erweiterte Datentypen (Optional aktivierbar):
- Medien: Integration des Medienpools (REX_MEDIA)
- Links: Integration der Linkmap (REX_LINK)
- Mehrzeiliger Text: Textarea für umfangreichere Inhalte
- Zahlen: Automatisch rechtsbündig formatiert

Kontakte

$fragment = new rex_fragment();
$fragment->setVar('json', $item->getValue('contacts'));
echo $fragment->parse('fields/tailwind/contacts.php');

FAQ mit Schema.org

// Fragment-Ausgabe (inkl. Schema.org JSON-LD)
$fragment = new rex_fragment();
$fragment->setVar('json', $item->getValue('faq'));
$fragment->setVar('schema', true); // Schema.org FAQPage ausgeben
echo $fragment->parse('fields/uikit3/faq.php');

Das Schema.org JSON-LD kann auch separat erzeugt werden:

$items = json_decode($item->getValue('faq'), true);
echo rex_yform_value_fields_faq::getSchemaJsonLd($items);

IBAN

// Serverseitige Validierung
$isValid = rex_yform_value_fields_iban::isValidFormat('DE89370400440532013000');

Die IBAN-Validierung über openIBAN.com erfolgt live im Backend-Formular. Der API-Aufruf wird über den eigenen Server geproxied, um den API-Key nicht im Frontend zu exponieren.

Conditional (Bedingte Felder)

Das Conditional-Feld benötigt keine Frontend-Ausgabe – es steuert nur die Sichtbarkeit von Feldern im Backend:

Quellfeld: Das Feld, dessen Wert geprüft wird
Operator: ==, !=, >, <, contains, empty, !empty, switch
- Hinweis zu Switch: Vergleicht den aktuellen Wert mit dem Ziel-Selektor. Ist z.B. der Wert video, wird das Ziel .group-video oder type_video angezeigt.
Vergleichswert: Der erwartete Wert (bei switch irrelevant)
Zielfelder: Kommagetrennte Liste von Feldnamen ODER CSS-Selektoren
- Beispiel Feldnamen: street,city (sucht nach Feldern oder Wrapper-IDs wie *-city)
- Beispiel CSS-Selektor: .my-group,#special-section (blendet beliebige Elemente ein/aus)
Aktion: show oder hide

Tabs & Akkordeons (Interaktiv)

Mit fields_interactive lassen sich Formularfelder im Backend gruppieren, um Übersichtlichkeit zu schaffen:

Tabs: Mehrere Felder werden in Reitern dargestellt.
Akkordeon: Felder werden in aufklappbaren Bereichen organisiert.
Fieldset: Eine einfache Gruppierung mit Legende.

Verwendung:

Feld fields_interactive anlegen
Typ wählen (z.B. Tab Start, Akkordeon Start oder Gruppe Ende)
Gleiche Gruppen-ID für zusammengehörige Elemente vergeben

Beispielaufbau für 2 Tabs:

fields_interactive (Typ: Tab, Label: "Basisdaten", Gruppen-ID: 1)
... Felder für Tab 1 ...
fields_interactive (Typ: Tab, Label: "Erweitert", Gruppen-ID: 1)
... Felder für Tab 2 ...
fields_interactive (Typ: Ende, Gruppen-ID: 1)

Grid & Layout (Struktur)

fields_structure ermöglicht die mehrspaltige Anordnung von Feldern mittels CSS Grid.

Start: Beginnt einen Grid-Container.
Layout: Definition der Spalten (z.B. 1fr 1fr für 50/50, 1fr 2fr für 1/3 zu 2/3).
Gap: Abstand zwischen den Spalten.

Alle Felder zwischen "Start" und "Ende" (oder dem nächsten "Start") werden in das Grid aufgenommen.

Icon Picker

$icon = $item->getValue('icon');
// Font Awesome
echo '<i class="' . rex_escape($icon) . '"></i>';
// UIkit
echo '<span uk-icon="icon: ' . rex_escape(str_replace('uk-icon-', '', $icon)) . '"></span>';

Star Rating (Bewertung)

$fragment = new rex_fragment();
$fragment->setVar('value', $item->getValue('rating'));
$fragment->setVar('max', 5); // Optional, default 5
echo $fragment->parse('fields/bootstrap3/rating.php');

API-Endpunkte

IBAN-Validierung

GET index.php?rex-api-call=fields_iban_validate&iban=DE89370400440532013000

Antwort:

{
    "valid": true,
    "iban": "DE89 3704 0044 0532 0130 00",
    "bank": "Commerzbank",
    "bic": "COBADEFFXXX",
    "city": "Aachen"
}

Datenformat

Die komplexen Feldtypen speichern ihre Inhalte als JSON-Strukturen, um maximale Flexibilität zu gewährleisten. Hier die Schemata im Detail:

Tabelle (Table)

{
    "caption": "Preisliste",
    "has_header_row": true,
    "has_header_col": false,
    "rows": [
         ["Produkt A", "2024-01-01", "10,00 €"], // Zeile 1
         ["Produkt B", "2024-02-01", "20,00 €"]  // Zeile 2
    ],
    // Optional: Constraints, falls Spalten konfiguriert sind
    "constraints": {
        "cols": [
            "text",     // Spalte 1: einfacher Text (left)
            "date",     // Spalte 2: Datum (left)
            "number"    // Spalte 3: Zahl (right)
        ]
    }
}

Social Web

[
    {
        "platform": "facebook",
        "url": "https://facebook.com/example",
        "label": "Facebook Fanpage",
        "icon": "fa-facebook-f", // FontAwesome Klasse
        "color": "#1877f2"       // Markenfarbe
    }
]

Öffnungszeiten (Opening Hours)

{
    "regular": {
        "monday": {
            "status": "open",
            "times": [
                {"from": "08:00", "to": "12:00"}, 
                {"from": "13:00", "to": "17:00"}
            ]
        },
        "saturday": {
            "status": "closed",
            "times": []
        }
    },
    "special": [
        {
            "date": "2024-12-24", 
            "status": "closed", 
            "label": "Heiligabend"
        }
    ],
    "note": "Termine nur nach Vereinbarung"
}

FAQ (Question/Answer)

[
    {
        "question": "Wie lauten die Öffnungszeiten?",
        "answer": "Mo–Fr von 8–17 Uhr"
    }
]

Kontakte (Contacts)

[
    {
        "firstname": "Max",
        "lastname": "Mustermann",
        "company": "Muster GmbH",
        "email": "max@muster.de",
        "locations": [
             { "street": "Musterweg 1", "city": "Musterstadt" }
        ]
    }
]

Inline Editing (Listenansicht)

Mit dem Feldtyp fields_inline können Text- und Textarea-Felder in der YForm-Tabellenübersicht direkt bearbeitet werden.

Einrichtung

Im Table Manager den Datentyp des gwünschten Feldes auf fields_inline setzen.
In den Optionen wählen, ob es sich um ein einzeiliges Textfeld oder eine Textarea handelt.

Features

Click-to-Edit: Anklicken aktiviert den Bearbeitungsmodus.
Speichern: Enter (bei Textfeldern) oder Klick auf den Haken.
Abbruch: ESC oder Klick auf das X.
Events: Löst beim Speichern die Standard YForm-Events (YFORM_DATA_UPDATED) aus, sodass andere AddOns (z.B. URL AddOn) Änderungen registrieren.

Unterstützte Plattformen (Social Web)

Facebook, Instagram, Twitter/X, LinkedIn, Xing, YouTube, TikTok, Pinterest, Threads, Mastodon, Bluesky, WhatsApp, Telegram, GitHub, Vimeo, Flickr, Snapchat, Reddit, Twitch, Discord, Spotify, SoundCloud, RSS, Benutzerdefiniert

Voraussetzungen

REDAXO >= 5.17
YForm >= 4.0
PHP >= 8.1

Autor

Friends Of REDAXO

Credits

Projektleitung

Thomas Skerbis

Konzept & Entwicklung

Erstellt mit Unterstützung von GitHub Copilot (Gemini)

Basiert auf:

OpeningHoursHelper inspiriert durch Template Manager von Thomas Skerbis
IBAN-Validierung über openIBAN.com (kostenloser Dienst)

Lizenz

MIT Lizenz – siehe LICENSE.md

Name		Name	Last commit message	Last commit date
Latest commit History 31 Commits
assets		assets
fragments/fields		fragments/fields
lang		lang
lib		lib
pages		pages
public/assets/addons/fields		public/assets/addons/fields
ytemplates/bootstrap		ytemplates/bootstrap
LICENSE.md		LICENSE.md
README.md		README.md
boot.php		boot.php
install.php		install.php
package.yml		package.yml
uninstall.php		uninstall.php

License

FriendsOfREDAXO/fields

Folders and files

Latest commit

History

Repository files navigation

Fields – Erweiterte redaktionelle YForm-Feldtypen für REDAXO

Funktionen

Spezielle Eingabetypen (UI Controls)

Komplexe Datentypen (Repeater & Strukturen)

Layout & Logik

Installation

Konfiguration

Verwendung im YForm-Tablemanager

Frontend-Ausgabe mit Fragmenten

Social Web

Öffnungszeiten

Tabelle (Barrierefrei)

Kontakte

FAQ mit Schema.org

IBAN

Conditional (Bedingte Felder)

Tabs & Akkordeons (Interaktiv)

Grid & Layout (Struktur)

Icon Picker

Star Rating (Bewertung)

API-Endpunkte

IBAN-Validierung

Datenformat

Tabelle (Table)

Social Web

Öffnungszeiten (Opening Hours)

FAQ (Question/Answer)

Kontakte (Contacts)

Inline Editing (Listenansicht)

Einrichtung

Features

Unterstützte Plattformen (Social Web)

Voraussetzungen

Autor

Credits

Lizenz

About

Resources

License

Code of conduct

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Languages

Packages