Zum Inhalt

UI-Muster in Cloudbrixx REAL

Pflichtfelder erkennen

Orangefarbener Linksbalken am Eingabefeld = Pflichtfeld.
Diese Felder müssen ausgefüllt sein, bevor auf „Weiter" oder „Speichern" geklickt werden kann.

Visueller Zustand des Pflichtfelds

Zustand Label-Farbe Linksbalken
Nicht ausgefüllt Hellgrau Orange
Ausgefüllt Schwarz (normal) Orange

Hinweis: Ein nicht ausgefülltes Pflichtfeld zeigt eine hellgraue Beschriftung (vs. normale schwarze Schrift bei ausgefüllten Feldern). Es erscheint keine Fehlermeldung — der „Weiter"-Button bleibt einfach inaktiv (disabled), bis alle Pflichtfelder der Stufe ausgefüllt sind.

Action-Button

Der orangefarbene Action-Button (runder Button, meist oben rechts) öffnet ein Dropdown mit Aktionen für das aktuelle Modul: - „Neues Mandat", „Neue Liegenschaft", „Neues Gebäude" etc.

  • Immer über die linke Sidebar navigieren
  • Direkter URL-Aufruf (z.B. /#/liegenschaften) nach Login führt zu sofortiger Re-Abmeldung
  • Korrekte Reihenfolge: Login → Seite laden → Sidebar-Menü klicken

Wizard-Muster

Mehrstufige Assistenten (Wizards) funktionieren einheitlich: - Jede Stufe mit „Weiter" bestätigen - Letzte Stufe mit „Bestätigen" oder „Speichern" abschließen - Pflichtfelder pro Stufe müssen ausgefüllt sein, bevor „Weiter" aktiv wird

Neue Firma anlegen

5-Schritt-Wizard mit Besonderheit in Schritt 4 (Projektzuordnung ist Pflicht, Klick auf Gebäude-Icon erforderlich).

→ Vollständige Dokumentation: Firma anlegen

≡-Menü (Kontextmenü)

Das Hamburger-Symbol ≡ erscheint an verschiedenen Stellen (z.B. neben Gebäudenamen im Tab Flächen) und öffnet ein Kontextmenü mit kontextbezogenen Aktionen.

Beim Klicken auf das ≡-Menü im Flächen-Tab: exakt auf das Symbol zielen – ein Klick daneben öffnet stattdessen eine Filter-Seitenleiste.

Feldhilfe – „i"-Symbol

Viele Eingabefelder zeigen in der oberen rechten Ecke ein kleines „i" in einem Kreis. Ein Mouseover öffnet einen Tooltip mit kontextbezogenen Informationen zum Feld — z.B. Erklärungen zur Bedeutung, erlaubten Werten oder fachlichem Hintergrund. Besonders hilfreich bei fachspezifischen Feldern wie Gebäudeklasse, Sonderbau oder Baurechtliche Räumlichkeiten.

Schloss-Symbol – geschützte Felder

Manche Felder sind durch ein Schloss-Symbol vor unbeabsichtigten Änderungen geschützt:

Symbol Farbe Bedeutung
Schloss (geschlossen) Türkis Feld ist gesperrt, aber entsperrbar — einmal klicken zum Bearbeiten
Schloss (offen) Türkis Feld ist entsperrt und kann bearbeitet werden
Schloss (geschlossen) Grau Feld ist aus Datenplausibilitätsgründen gesperrt — kann nicht geändert werden

Wichtig: Nach einer Änderung muss das Schloss wieder geschlossen werden, bevor der Speichern-Button aktiv wird. Ein offen gebliebenes türkises Schloss verhindert das Speichern.

Globaler Projekt-Filter

Der globale Projekt-Filter in der Kopfzeile ermöglicht es, die Ansicht systemweit auf ein bestimmtes Projekt oder eine Liegenschaft einzuschränken. Damit werden alle Modullisten gefiltert — nützlich, um im Kontext einer einzelnen Liegenschaft zu arbeiten.

Panels / Hinweisboxen

Cloudbrixx verwendet farbige Panels für Hinweise: - Blau (Info): Neutrale Information - Gelb (Note): Wichtiger Hinweis - Grün (Success): Erfolgsmeldung - Rot (Warning/Error): Warnung oder Fehler

Firmenlogo-Tab im Bearbeiten-Dialog

Der Bearbeiten-Dialog einer Firma (orangener „Bearbeiten"-Button auf der Detailseite) hat 3 Tabs:

Tab Inhalt
Grunddaten Name, Kürzel, Typ, Adresse, Kontakt
Firmenlogo Bild-Upload (Kendo Upload Widget)
Branchen und Leistungen Branchenzuordnung

Verhalten wenn ein Logo bereits vorhanden ist:

  • Der Tab zeigt oben eine große Vorschau des gespeicherten Logos
  • Darunter erscheint trotzdem der Upload-Bereich mit input[type="file"]
  • Eine neue Datei in den Upload-Bereich legen und Speichern ersetzt das bestehende Logo
  • Nach dem Speichern und Seiten-Reload wird das neue Logo in der Firmenübersicht angezeigt

Das input[type="file"] ist immer im DOM vorhanden — auch wenn ein Bild angezeigt wird.

Verwandte Themen