Komponenten

Komponenten sind die wiederverwendbaren Teile, aus denen Pianola-Anwendungsbildschirme gebaut werden.

Sie umfassen Layout-Elemente, Eingabefelder, Anzeigen für verknüpfte Datensätze, Aktionsbuttons und Medienkomponenten. Zusammen ermöglichen sie es, Anwendungsbildschirme passend zu kundenseitigen Arbeitsabläufen zusammenzustellen, ohne jedes Mal von vorn zu beginnen.

Komponenten gehören zu den grösseren Anwendungsgrundlagen, die an anderer Stelle in dieser Dokumentation beschrieben werden. Die Grundlagen definieren Anwendungshülle, Module, Ansichten, Tabs, Listen, Abfragen, Berechtigungen und Regeln für Arbeitsabläufe. Komponenten sind die kleineren Bausteine auf Bildschirmebene, die diese Strukturen füllen: die Felder, die Benutzerinnen und Benutzer bearbeiten, die Tabellen, die sie prüfen, die Buttons, die sie anklicken, und die Layout-Elemente, die eine Datensatzansicht verständlich machen.

Dieser Abschnitt erklärt den Komponentenkatalog auf Projektebene. Er dokumentiert keine Code-Einstellungen. Ziel ist es, leichter besprechen zu können, was ein Bildschirm enthalten soll, wie Informationen angeordnet werden sollen und welche Komponentenmuster zur jeweiligen Arbeit passen.

Wie dieser Abschnitt gelesen werden sollte

Jede Komponentenseite erklärt, was die Komponente tut, wann sie nützlich ist, was konfiguriert werden kann und welche verwandten Komponenten häufig mit ihr verwendet werden.

Das Ziel ist nicht, Projektteams zu Entwicklern zu machen. Das Ziel ist, ihnen genug Sprache zu geben, um sinnvolle Möglichkeiten zu erkennen, Bildschirmgestaltung zu besprechen und fundierte Projektentscheidungen zu treffen.

Layout-Komponenten

Layout-Komponenten ordnen einen Bildschirm, bevor einzelne Felder oder Tabellen betrachtet werden.

Zeilen, Spalten, Inhaltsblöcke, Tab-Gruppen, Modale, Trennlinien und Abstände legen fest, wie Informationen gruppiert werden und wie viel visuelles Gewicht einzelne Bereiche auf dem Bildschirm erhalten. Sie speichern in der Regel selbst keine Daten. Stattdessen helfen sie Benutzerinnen und Benutzern zu verstehen, welche Informationen zusammengehören und wo sie als Nächstes hinschauen sollten.

Gute Layout-Entscheidungen sind besonders auf dichten Datensatzansichten wichtig. Ein langes flaches Formular kann jedes Feld gleich wichtig wirken lassen, auch wenn manche Informationen zentral sind und andere nur gelegentlich gebraucht werden. Zeilen, Spalten, Tabs und einklappbare Abschnitte ermöglichen es, den Bildschirm an der Form des Arbeitsablaufs auszurichten statt an der Reihenfolge der Datenbank.

Eingabekomponenten

Eingabekomponenten sind die Felder, mit denen Benutzerinnen und Benutzer Informationen in einem Datensatz erfassen oder ändern.

Einige Eingaben sind offen, zum Beispiel Textfelder, Textbereiche, Rich Text und Datei-Uploads. Andere führen zu kontrollierten Werten, zum Beispiel Selects, Radio Buttons, Checkboxes, Checkbox Groups, Tagger, Datepickers, Timestamps, Autocomplete-Felder und Search-or-Create-Felder.

Die passende Eingabe wirkt sich auf die Datenqualität ebenso aus wie auf die Bedienbarkeit. Ein Statusfeld kann einen festen Select benötigen, damit Auswertungen konsistent bleiben. Eine lange Liste von Organisationen kann ein Autocomplete-Feld benötigen, damit Benutzerinnen und Benutzer suchen statt scrollen. Ein einfacher Ja-oder-Nein-Wert kann als Switch oder Checkbox klarer sein als als Dropdown.

Eingabeentscheidungen sollten meist zusammen mit Entscheidungen zu Validierung, Pflichtfeldern, schreibgeschützten Zuständen, Berechtigungen und bedingter Anzeige getroffen werden. Die Komponente bestimmt, wie das Feld erscheint. Die umgebenden Anwendungsregeln bestimmen, wann es geändert werden kann und welche anderen Teile des Bildschirms davon abhängen.

Komponenten für verknüpfte Datensätze

Komponenten für verknüpfte Datensätze zeigen Datensätze, die mit dem aktuellen Datensatz verbunden sind.

Sie werden verwendet, wenn ein Datensatz zugehörige Teilnehmende, Aufgaben, Dokumente, Kontakte, Buchungen, Positionen, Bewerbungen, Notizen oder andere verknüpfte Informationen anzeigen soll. Eine Record Data Table ist nützlich, wenn Benutzerinnen und Benutzer strukturierte Zeilen und Spalten brauchen. Cards können für kleine Gruppen von Kontakt- oder Übersichtsdatensätzen natürlicher sein. Ein Record Portal kann einen einzelnen verknüpften Datensatz sichtbar machen, ohne dass Benutzerinnen und Benutzer den aktuellen Bildschirm verlassen müssen.

Diese Komponenten sind oft zentral dafür, wie Pianola reale Arbeitsabläufe unterstützt, weil viele Geschäftsprozesse nicht nur aus einem einzelnen Datensatz bestehen. Ein Projekt, eine Veranstaltung, eine Organisation oder eine Bewerbung kann mehrere verknüpfte Bereiche benötigen, die von derselben Stelle aus sichtbar sind. Die wichtige Projektentscheidung ist nicht nur, welche Beziehung besteht, sondern auch, wie Benutzerinnen und Benutzer diese verknüpften Datensätze prüfen, hinzufügen, bearbeiten, vergleichen oder öffnen müssen.

Aktionskomponenten

Aktionskomponenten ermöglichen es Benutzerinnen und Benutzern, etwas in der Oberfläche auszulösen.

Action Buttons können E-Mails senden, Dokumente erzeugen, Statuswerte aktualisieren, einen Arbeitsablauf starten, Informationen exportieren oder Daten mit einem anderen System synchronisieren. Link Buttons führen an eine andere Stelle. PDF Buttons geben Zugriff auf erzeugte oder gespeicherte PDF-Dokumente.

Aktionen sollten dort platziert werden, wo die Entscheidung für ihre Nutzung natürlich entsteht. Ein Button, der einen Datensatz freigibt, eine Erinnerung sendet oder ein Dokument erzeugt, gehört meist in die Nähe des relevanten Status, der Kontaktdaten oder des Dokumentbereichs. Sichtbarkeitsregeln und Bestätigungen sind oft genauso wichtig wie der Button selbst, besonders wenn eine Aktion externe Empfängerinnen und Empfänger, externe Systeme oder freigegebene Daten betrifft.

Medienkomponenten

Medienkomponenten zeigen visuelles Material, das mit einem Datensatz verbunden ist.

Bildanzeigen, Bildergalerien und Videoplayer sind nützlich, wenn visuelles Referenzmaterial Teil der Arbeit ist. Dazu können Profilfotos, Bilder von Veranstaltungsorten, Kunstwerke, Produktbilder, Anleitungsvideos oder hochgeladene Dokumentation gehören, die im Kontext betrachtet werden muss.

Medienkomponenten sollten die Aufgabe unterstützen und den Bildschirm standardmässig nicht dominieren. Ein einzelnes identifizierendes Bild kann neben wichtigen Datensatzdetails stehen, während eine Galerie einen eigenen Abschnitt benötigt, wenn Benutzerinnen und Benutzer mehrere Dateien durchsuchen sollen. Die richtige Wahl hängt davon ab, wie oft die Medien genutzt werden und ob sie vor allem dekorativ, identifizierend, belegend oder erklärend sind.

Komponenten kombinieren

Die meisten nützlichen Bildschirme kombinieren mehrere Komponententypen.

Ein Teilnehmendendatensatz kann Layout-Zeilen für Kontakt- und Bewerbungsdetails, Eingabekomponenten für editierbare Felder, eine Tabelle für verknüpfte Datensätze zur Kommunikationshistorie, einen Action Button zum Senden einer Bestätigung und eine Bildanzeige für ein Profilfoto verwenden. Ein Projekt-Dashboard kann Inhaltsblöcke, Record Data Tables, Links und Aktionen kombinieren, ohne wie ein klassisches Bearbeitungsformular zu funktionieren.

Der Komponentenkatalog sollte daher als Sammlung von Bausteinen gelesen werden, nicht als Liste isolierter Widgets. Die praktische Frage lautet meist: Was soll die Benutzerin oder der Benutzer an dieser Stelle im Arbeitsablauf verstehen, eingeben, vergleichen oder auslösen?

Wenn das klar ist, helfen die einzelnen Komponentenseiten dabei, das passende Muster zu erkennen und die nötigen Konfigurationsentscheidungen zu besprechen.