Zum Hauptinhalt springen

Visueller Editor der Benutzeransichten

Der visuelle Editor ermöglicht es, eine Ansicht zu erstellen, indem Widgets auf eine Leinwand gezogen werden. Änderungen werden im Entwurf gespeichert, und der Speivostatus wird in der oberen Leiste angezeigt.

Editor der Benutzeransicht Auftragsüberwachung mit vier Widgets, die auf einem zweispaltigen Raster angeordnet sind

Symbolleiste

Die Hauptaktionen sind:

  • Rückgängig und Wiederherstellen;
  • Seite, um eine neue Seite hinzuzufügen;
  • Daten, um Quellen zu verwalten;
  • Widget-Ansicht, um bereits eingefügte Widgets zu finden und zu steuern;
  • Vorschau;
  • Auswahl und Vergleich von Versionen;
  • Veröffentlichen.

Warten Sie, bis der Status das Speichern bestätigt, bevor Sie den Editor schließen.

Seiten

Eine Ansicht kann mehrere Seiten enthalten. Die Registerkarten über der Leinwand ermöglichen es Ihnen, Folgendes zu tun:

  • die aktuelle Seite auszuwählen;
  • eine Seite hinzuzufügen;
  • sie umzubenennen;
  • sie neu anzuordnen;
  • sie zu löschen, wenn sie nicht mehr benötigt wird.

Das Widget Seiten-Navigator macht dieselbe Navigation in der veröffentlichten Ansicht verfügbar.

Leinwand und Raster

Die Leinwand verwendet ein 48-Spalten-Raster, um die Positionierung präziser zu gestalten. Mit dem vorherigen 24-Spalten-Raster erstellten Ansichten werden automatisch aktualisiert, ohne die visuelle Anordnung der Widgets zu verändern. Ziehen Sie ein Widget aus der Palette und lassen Sie es an der gewünschten Position los.

Jedes Widget kann:

  • verschoben;
  • skaliert;
  • dupliziert;
  • gelöscht;
  • im Panel Eigenschaften konfiguriert werden.

Die Zoom-Befehle ermöglichen es, die Leinwand zu verkleinern oder zu vergrößern, auf 100 % zurückzusetzen oder Anpassen zu verwenden, um den gesamten verfügbaren Bereich anzuzeigen.

Für jede Seite können Breite, Höhe, automatische Anpassung an das Viewport, Hintergrund, Raster sichtbar und Datenaktualisierungspolitik konfiguriert werden.

Der Eintrag Datenaktualisierung bietet drei Modi:

  • Nur beim ersten Laden der Ansicht, Standard: Beim Öffnen werden alle Seiten geladen und die Daten werden während der Navigation wiederverwendet;
  • Auch bei jedem Öffnen der Seite: Beim Zurückkehren zur Seite führen die Widgets erneut Abfragen aus;
  • Automatisch während der Anzeige der Seite: Die aktive Seite wird im konfigurierten Intervall aktualisiert, das nicht unter 30 Sekunden liegen kann.

Filter, Drill, Aktualisierungsbefehle und durch Workflow-Aktionen erforderliche Aktualisierungen laden die betroffenen Daten auch im Standardmodus weiter.

Widget-Palette

Die Palette ist nach Familien unterteilt.

FamilieBeispiele
DatenBalken-, Linien-, Flächendiagramme, Kreis- und Donutdiagramme; KPIs; Messinstrumente; Tabelle; Detaildatensatz; Karten.
InhaltText, Abschnittstitel, Bild, sicheres HTML und, falls aktiviert, benutzerdefinierte Widgets.
LayoutTrennlinie, Panel, ausklappbares Panel, Seitenleiste, Registerkarten und Schublade.
NavigationSybot-Links und Seiten-Navigator.
SteuerelementeAktualisieren, Filter, aktive Filter, Zurücksetzen und Widget-Sichtbarkeit.
WorkflowStart, Aktionen auf Datensätzen, Mehrfachaktionen, Status, Protokoll und Workflow-Konsole.
DiagnoseStatus der Ansicht, der Quellen und der verfügbaren Operationen.

Das Feld Widget suchen filtert die Palette nach Namen.

Wiederverwendbare Kataloge

Die Schaltflächen Benutzerdefinierte Widgets und Bilder über der Suche öffnen die geteilten Kataloge. Es ist möglich, zwischen der Vorschauansicht und der detaillierten Liste zu wechseln, Elemente zu suchen und mehrere auszuwählen zum Importieren oder Exportieren. Das rechte Panel zeigt den Eigentümer, die autorisierten Benutzer und die Ansichten, in denen das Element bereits verwendet wird.

  • ein Viewer kann das Element in einer bearbeitbaren Ansicht verwenden;
  • ein Editor kann das Katalogelement auch mit einer neuen Version überschreiben;
  • der Owner verwaltet Freigaben und Löschungen.

Das Löschen fasst betroffene Benutzer und Ansichten zusammen, entfernt aber nicht die bereits eingefügten Kopien: Jede Ansicht bleibt unabhängig. Aus demselben Grund aktualisiert das Ändern einer lokalen Kopie nicht stumm den Katalog. Der Owner verwaltet die Zugriffe, indem er den einzelnen Benutzer nach Name, Benutzername oder E-Mail sucht und ihm die Berechtigung Viewer oder Editor zuweist; das Panel lädt nicht das gesamte Benutzerverzeichnis.

Im entsprechenden Editor macht Im Katalog fördern ein benutzerdefiniertes Widget wiederverwendbar. Lokale Bilder können aus dem Bildkatalog der Ansicht gefördert werden; wird ein freigegebenes Bild ausgewählt, wird eine lokale Kopie erstellt. Im Bildkatalog können mehrere Dateien ausgewählt oder zusammengezogen werden. Die Vorschau eines benutzerdefinierten Widgets im Katalog ist statisch, wenn die Komponente JavaScript oder Daten erfordert: die vollständige Ausführung erfolgt nach dem Einfügen in die Ansicht.

Eigenschaften der Ansicht

Der Abschnitt Ansicht steuert:

  • Beschreibung;
  • helles, dunkles oder Systemthema;
  • Schriftart;
  • Dichte;
  • Abstand;
  • Verfügbarkeit erweiterter Filter zur Laufzeit.

Die Eigenschaften des ausgewählten Widgets hängen von seinem Typ ab und umfassen Inhalt, Datenquelle, Formate, Stil, Verhalten und Interaktionen.

Für Kategoriefilter kann die Eingabemethode und die einzelne oder mehrfache Auswahl separat gewählt werden. Für Widgets, die Workflows auslösen, zeigt der Abschnitt Interaktionen die nicht-Dateiparameter des ausgewählten Workflows: jeder Parameter kann den Workflow-Standard, einen im Widget gespeicherten Standard oder eine fx-Formel verwenden. Die entsprechende Option legt fest, ob das Parameterfenster vor dem Start und in der Vorschau angezeigt werden soll.

Für Liniendiagramme und Flächendiagramme enthält Daten und Anzeige auch die Gruppe für das Erscheinungsbild der Linie. Es können Dicke, Größe und Form des Punktindikators ausgewählt werden – keins, Kreis, Raute, Dreieck, vertikale Linie oder X – und eine gestrichelte oder eine abgerundete Kurve verwendet werden. Die Einstellungen gelten für alle Serien des Widgets, während die Farbe für jede einzelne Serie konfigurierbar bleibt.

Container

Panels, Sidebars, Tabs und Drawer können andere Widgets enthalten.

  • Panel: gruppiert Elemente mit einem internen Raster.
  • Einklappbares Panel: kann vom Benutzer geöffnet oder geschlossen werden und nutzt die gesamte dem Widget zugewiesene Höhe, wobei den Inhalten der Platz unter der Kopfzeile bleibt.
  • Sidebar: wird links oder rechts verankert und kann geschlossen starten.
  • Tabs: unterteilen Widgets in lokale Ansichten desselben Containers.
  • Drawer: zeigt Informationen in einem überlagerten Panel an, oft als Reaktion auf eine Auswahl.

Das Panel Widget-Ansicht hilft bei der Lokalisierung verschachtelter Widgets und bei der Steuerung ihrer Sichtbarkeit in der Gestaltung und zur Laufzeit, ohne sie zu löschen. Jeder Eintrag verwendet dasselbe Symbol, mit dem der Widget-Typ in der Palette identifiziert wird; Einrückungen und Linien zeigen stattdessen die Beziehung zwischen Containern und Kindelementen.

Stil und Formatierung

Jedes Widget kann den Stil der Ansicht erben oder spezifische Einstellungen für:

  • Farben und Typografie;
  • Hintergrund und Rahmen;
  • Abstand und Ausrichtung;
  • Schatten und Eckeinradius;
  • Kopfzeile und Symbol;
  • Formatierung von Zahlen, Daten und Währungen; Lokalität und Währung werden aus Listen unterstützter Werte ausgewählt und verwenden entsprechend it-IT bzw. EUR als Standardwerte.

Die bedingte Formatierung wendet einen Stil an, wenn eine Datenregel wahr ist. Die Bedingungen werden in der angezeigten Reihenfolge ausgewertet, und die erste erfüllte Bedingung hat Vorrang.

Die dynamische Sichtbarkeit zeigt ein Widget nur an, wenn die konfigurierte Formel wahr ergibt. Die einem Container zugewiesene Regel betrifft auch dessen Kindelemente.

HTML und benutzerdefinierte Widgets

Das Widget Sicheres HTML akzeptiert kontrollierten HTML-Inhalt; nicht zulässige Elemente werden entfernt.

Das Benutzerdefinierte Widget, wenn es vom Administrator aktiviert wurde, verwendet einen separaten Editor für HTML, CSS, JavaScript, PDF-Fallback und isolierte Vorschau. Der Code wird in einem isolierten Bereich ausgeführt und kann mit der Ansicht nur über die vom Editor bereitgestellten Funktionen interagieren.

Verwendet das Widget eine Datenquelle, enthält der anfänglich an den Code übergebene Kontext bereits den ersten Ergebnissatz sowohl in der Vorschau als auch in der veröffentlichten Ansicht. Nachfolgende Variationen werden als Kontextaktualisierungen mitgeteilt.

Geben Sie niemals Anmeldeinformationen oder vertrauliche Informationen in den Code ein: Der veröffentlichte Inhalt kann vom Browser eingesehen werden.

Importieren und Exportieren von Katalogen

Beide Kataloge ermöglichen die Mehrfachauswahl und erzeugen importierbare JSON-Pakete. Bei einem bereits existierenden Element wird der Import die Wiederverwendung, bei Berechtigung das Überschreiben, die Duplizierung mit neuem Namen oder die Entfernung vorschlagen.

Auch der Export einer Ansicht schlägt benutzerdefinierte Widgets und Bilder als optionale Abhängigkeiten vor. Beim Import der Ansicht zeigt Sybot die enthaltenen Abhängigkeiten an und ermöglicht die Anwendung der gewünschten Richtlinie für jede einzelne. Wird ein Duplikat erstellt, werden die Verweise automatisch aktualisiert. Kopien, die bereits in der Ansicht enthalten sind, bleiben verfügbar, auch wenn die entsprechende Katalogabhängigkeit ignoriert wird.

Best Practices

  • zuerst die Informationshierarchie planen;
  • die Anzahl der gleichzeitigen Diagramme begrenzen;
  • Titel und Nachrichten ohne verständliche Daten verwenden;
  • immer das helle und dunkle Thema überprüfen;
  • Layouts, Filter und Container in der Vorschau testen;
  • das Diagnostik-Widget in einem eigenen Bereich verwenden, wenn die Ansicht viele Quellen oder Workflows kombiniert.