Seiteneditor

Ca. 38 Min. Lesezeit

Der Seiteneditor ist das Werkzeug, mit dem die SCADA-Seiten, die das Bedienpersonal überwacht, im Browser gestaltet werden. Widgets werden auf die Arbeitsfläche gezogen, im rechten Bereich eingestellt und mit ihren Werten an Tags gebunden. Eine gespeicherte Seite wird in der Seitenanzeige geöffnet.

Diese Seite beschreibt die allgemeine Bedienung des Editors. Die widgetspezifischen Einstellungen finden Sie im Abschnitt Widget-Referenz. Fertige Seitenvorlagen, Bausteine und Composite-Komponenten beschreibt die Seite Vorlagen und Bausteine, den Code für Widget-Ereignisse die Seite Ereigniscode.

Editor öffnen

Der Editor wird im Seitenmenü über Einstellungen > Editor geöffnet. Der Menüeintrag ist nur für Benutzer mit der Rolle Editor sichtbar; außerdem muss die Lizenz die Seitengestaltung erlauben.

Beim Öffnen des Editors ist die Arbeitsfläche leer. Öffnen Sie eine Seite, indem Sie im linken Bereich auf der Registerkarte Seiten darauf klicken, oder legen Sie mit Datei > Neu eine neue Seite an.

Die Schaltfläche Vollbild oben rechts vergrößert den Editor auf das gesamte Browserfenster; dieselbe Schaltfläche heißt dann Vollbild beenden und stellt die vorherige Ansicht wieder her.

Bildschirmaufbau

Der Editorbildschirm besteht aus vier Bereichen:

Bereich	Inhalt
Obere Menüleiste	Die Menüs Datei, Bearbeiten, Ansicht und Ändern.
Linker Bereich	Die Registerkarten Seiten, Widgets und Elemente.
Arbeitsfläche	Der Bereich, in dem die Seite gestaltet wird. Darüber befindet sich die Symbolleiste der Arbeitsfläche, an den Rändern die Lineale.
Rechter Bereich	Die Einstellungen des ausgewählten Elements: die Registerkarten Stile und Eigenschaften.

Der linke und der rechte Bereich können mit der Pfeilschaltfläche in ihrer Überschrift (Linken Bereich einklappen, Rechten Bereich einklappen) eingeklappt werden. Ein eingeklappter Bereich bleibt als senkrechte Registerkarten am Rand stehen; ein Klick auf eine Registerkarte öffnet den Bereich wieder mit dieser Registerkarte. Auf schmalen Bildschirmen öffnen sich die Bereiche über der Arbeitsfläche.

Symbolleiste der Arbeitsfläche

Die Leiste über der Arbeitsfläche enthält von links nach rechts diese Schaltflächen. Die Namen der Schaltflächen erscheinen als Tooltip, wenn Sie mit der Maus darauf zeigen.

Schaltfläche	Funktion
Seiten / Widgets	Öffnet oder schließt den linken Bereich.
Eigenschaften	Öffnet oder schließt den rechten Bereich.
Z-Indizes neu zuweisen	Nummeriert die Werte Ebenenreihenfolge der Elemente im ausgewählten Container mit fortlaufenden Zahlen ab 0 neu, wobei ihre Reihenfolge erhalten bleibt. Ist das ausgewählte Element kein Container, erscheint die Warnung „Das ausgewählte Element muss ein Container sein!“.
Bearbeitungsmodus umschalten	Schaltet den Bearbeitungsmodus ein oder aus. Ist der Modus aus, können auf der Arbeitsfläche keine Elemente ausgewählt oder verschoben werden; Lineal, Hilfslinien und Raster werden ausgeblendet. Damit sehen Sie die Seite ohne Bearbeitungshilfen.
Zoomen aktivieren	Ist die Funktion aktiv, wird die Arbeitsfläche durch Ziehen mit der Maus verschoben, und mit Alt (unter macOS Option) + Mausrad wird um die Position des Mauszeigers gezoomt. Verschieben durch Ziehen funktioniert, wenn der Zoom nicht 100 % beträgt. In diesem Modus können keine Elemente ausgewählt werden. Esc beendet diesen Modus.
Verkleinern / Vergrößern	Verkleinert oder vergrößert die Arbeitsfläche um eine Stufe.
Prozentwert	Der aktuelle Zoomfaktor; ein Klick darauf führt Auf 100 % zurücksetzen aus.
An Bildschirm anpassen	Passt die ganze Seite in den Bereich der Arbeitsfläche ein.
Seitenname	Der Name der geöffneten Seite. Gibt es ungespeicherte Änderungen, erscheint neben dem Namen ein Punkt (•).
Vorschaugerät	Desktop, Tablet (1024 × 768) oder Mobil (390 × 844). Bei Tablet und Mobil wird die Seite in dieser Größe in einem nicht bearbeitbaren Vorschaurahmen angezeigt. Um wieder zu bearbeiten, wählen Sie Desktop.

Die Schaltflächen Verkleinern, Vergrößern, der Prozentwert und An Bildschirm anpassen funktionieren auch, wenn der Zoommodus aus ist.

Verschieben und Zoomen

Auch bei ausgeschaltetem Zoommodus lässt sich die Arbeitsfläche so verschieben und zoomen:

Aktion	Funktion
Mausrad, Bildlaufleisten	Verschiebt die Arbeitsfläche vertikal; mit zwei Fingern auf dem Trackpad in jede Richtung.
Shift + Mausrad	Verschiebt die Arbeitsfläche horizontal.
Ziehen bei gedrückter Leertaste	Verschiebt die Arbeitsfläche wie ein Handwerkzeug; solange die Leertaste gedrückt ist, wird der Mauszeiger zur Hand. Beim Schreiben in einem Textfeld fügt die Leertaste ein normales Leerzeichen ein.
Ziehen mit der mittleren Maustaste	Verschiebt die Arbeitsfläche.
Ctrl (unter macOS Cmd) + Mausrad	Zoomt um die Position des Mauszeigers hinein oder heraus. Über der Arbeitsfläche zoomt die Browserseite nicht.
Zwei-Finger-Zoom auf dem Trackpad	Zoomt um die Position des Mauszeigers.

Der Zoom reicht von 20 % bis 900 %. Die Tastenkürzel Ctrl + + / − / 0 sind der Seitenzoom des Browsers; sie vergrößern die ganze Seite, nicht die Arbeitsfläche.

Tastenkürzel

Unter macOS verwenden Sie Cmd statt Ctrl. Die Tastenkürzel funktionieren nicht, während Sie in ein Textfeld schreiben. Außer Ctrl+S setzen alle Tastenkürzel voraus, dass die Arbeitsfläche den Fokus hat; ein Klick auf ein Element der Arbeitsfläche setzt den Fokus dorthin.

Tastenkürzel	Funktion
Ctrl+S	Speichert die Seite.
Ctrl+Z	Macht rückgängig.
Ctrl+Y oder Ctrl+Shift+Z	Wiederholt.
Ctrl+C / Ctrl+V	Kopiert / fügt die ausgewählten Elemente ein.
Ctrl+D	Dupliziert das ausgewählte Element.
Ctrl+G	Gruppiert die ausgewählten Elemente.
Ctrl+B	Hebt die ausgewählte Gruppierung auf.
Delete	Löscht die ausgewählten Elemente.
Esc	Hebt die Auswahl auf; beendet den Zoommodus, wenn er aktiv ist.
Esc während des Ziehens	Bricht das Ziehen ab; die Elemente kehren an ihre Ausgangsposition zurück. Siehe Ziehen abbrechen.
Alt (unter macOS Option) + Ziehen	Verschiebt ein einzelnes ausgewähltes Element in den Container unter dem Mauszeiger. Siehe Element in einen anderen Container verschieben.
Pfeiltasten	Verschieben die ausgewählten Elemente um 1 Pixel.
Shift + Pfeiltasten	Verschieben die ausgewählten Elemente um 5 Pixel.
Leertaste + Ziehen, Ziehen mit der mittleren Taste	Verschiebt die Arbeitsfläche. Siehe Verschieben und Zoomen.
Ctrl + Mausrad	Zoomt um den Mauszeiger.
Alt+↑ / Alt+↓	Bringt das ausgewählte Element eine Ebene nach vorn / nach hinten.
Shift + Klick	Fügt der Auswahl ein Element hinzu; entfernt ein ausgewähltes Element aus der Auswahl. Ein Klick mit Ctrl unter Windows oder Cmd unter macOS bewirkt dasselbe.

Ist kein Element ausgewählt, listet auch die Registerkarte Stile im rechten Bereich die am häufigsten verwendeten Tastenkürzel auf.

Obere Menüleiste

Datei

Befehl	Funktion
Neu	Öffnet das Fenster Neue Seite erstellen. Als Start wählen Sie Leere Seite oder Aus einer Seitenvorlage. Eine aus einer Vorlage gestartete Seite wird nach dem Anlegen geöffnet, die Vorlage wird eingefügt und die Seite gespeichert. Zu Vorlagen siehe Vorlagen und Bausteine.
Neuer Ordner	Legt einen Ordner zum Gruppieren von Seiten an.
Speichern (Ctrl+S)	Speichert die geöffnete Seite; siehe Speichern.
Löschen	Löscht die geöffnete Seite nach einer Bestätigung. Ein Ordner, der Seiten enthält, kann nicht gelöscht werden („Ordner ist nicht leer!“).
Seite umbenennen	Ändert den Namen der geöffneten Seite oder des Ordners.
Seite als Vorlage speichern	Speichert die Seite in der Vorlagenbibliothek.
Als Komponente speichern / Komponentenvorlage bearbeiten	Speichert den ausgewählten Kasten als wiederverwendbare Komponente oder bearbeitet die Vorlage der ausgewählten Komponente. Ist kein passendes Element ausgewählt, ist der Befehl deaktiviert. Siehe Vorlagen und Bausteine.
Übertragung > Exportieren	Lädt den Inhalt der geöffneten Seite im Editor als Datei <Seitenname>.json herunter.
Übertragung > Aus JSON-Datei importieren	Ersetzt nach einer Bestätigung den Inhalt der geöffneten Seite durch die gewählte JSON-Datei. Die Änderung wird erst beim Speichern auf den Server geschrieben.
Übertragung > Alle Seiten exportieren (.zip) / Seiten importieren (.zip)	Lädt alle Seiten als ein .zip-Paket herunter oder importiert sie aus einem Paket. Im Importfenster wählen Sie, ob vorhandene Seiten mit gleichem Namen überschrieben oder übersprungen werden. Siehe Seiten exportieren und importieren.
Erweitert > Aus HTML-Code importieren	Wandelt eingefügten HTML-Code in Widgets um und fügt sie der Seite hinzu.
Erweitert > Als .vue speichern	Lädt die Seite als .vue-Datei herunter.

Bearbeiten

Befehl	Funktion
Rückgängig machen / Wiederholen	Macht die letzte Änderung rückgängig oder wiederholt sie.
Kopieren / Einfügen	Kopiert die ausgewählten Elemente in die Zwischenablage; fügt die Elemente aus der Zwischenablage ein. Ist das ausgewählte Element ein Container, werden die eingefügten Elemente darin eingefügt, andernfalls im Stammcontainer der Seite. Da die Zwischenablage verwendet wird, können Elemente auch in eine andere Seite eingefügt werden.
Duplizieren	Fügt eine Kopie des ausgewählten Elements im selben Container rechts neben dem Element ein.
Löschen	Löscht die ausgewählten Elemente.
Stil kopieren / Stil einfügen	Kopiert die Stileinstellungen des ausgewählten Elements (außer Position und Ebenenreihenfolge) und überträgt sie auf andere Elemente.
Seiteninhalt ändern > Suchen und Ersetzen	Siehe Suchen und Ersetzen.
Seiteninhalt ändern > Übersetzungen bearbeiten	Siehe Übersetzungen.
Seiteninhalt ändern > Seite leeren	Fordert zuerst eine Bestätigung an. Entfernt aus den Seitendaten Restwerte, die nicht zu den definierten Einstellungen der Widgets gehören; Widgets werden nicht gelöscht. Gibt es nichts zu bereinigen, erscheint der Hinweis Die Seite enthält keine undefinierten Eigenschaften zum Bereinigen. Die bereinigte Seite wird als ungespeichert markiert, und der Vorgang kann mit Rückgängig machen (Ctrl+Z) in einem Schritt rückgängig gemacht werden; erst beim Speichern wird die Änderung dauerhaft.

Ansicht

Die Optionen in diesem Menü können ein- und ausgeschaltet werden; neben eingeschalteten Optionen erscheint ein Häkchen. Die Auswahl wird im Browser gespeichert, und der Editor öffnet beim nächsten Mal mit denselben Einstellungen.

Option	Funktion
Lineale anzeigen	Zeigt die Pixellineale am oberen und linken Rand der Arbeitsfläche.
Hilfslinien anzeigen	Zeigt die aus dem Lineal gezogenen Hilfslinien.
Raster anzeigen	Zeichnet ein 10-Pixel-Raster auf die Arbeitsfläche.
Rasterspalten anzeigen	Zeigt die Spalten des ausgewählten Grid-Containers als gestrichelte Linien.
Grenzen anzeigen	Markiert die Ränder der Widgets auf der Arbeitsfläche mit Linien.
Hilfslinien sperren	Verhindert, dass vorhandene Hilfslinien verschoben oder gelöscht werden.
An Hilfslinien ausrichten	Richtet ein verschobenes Element an der nächstgelegenen Hilfslinie aus.
Am Raster ausrichten	Richtet verschobene Elemente und neue Hilfslinien am 10-Pixel-Raster aus.
Hilfslinien löschen	Löscht alle Hilfslinien der geöffneten Seite.

Ändern

Befehl	Funktion
Anordnen	Befehle für die Stapelreihenfolge. Siehe Stapelreihenfolge.
Ausrichten	Richtet die ausgewählten Elemente aus, verteilt sie oder gleicht ihre Größe an. Siehe Ausrichtung.
Composite erstellen	Erstellt aus dem ausgewählten Kasten eine Composite-Komponente. Siehe Vorlagen und Bausteine.
Gruppieren / Gruppierung aufheben	Siehe Gruppieren.

Linker Bereich

Seiten

Die Seiten und Ordner im System werden als Baum aufgelistet. Das Suchfeld oben filtert die Liste nach Namen. Ein Klick auf eine Seite öffnet sie auf der Arbeitsfläche. Hat die geöffnete Seite ungespeicherte Änderungen, wird zuerst gefragt: „Auf der Seite sind nicht gespeicherte Änderungen vorhanden. Möchten Sie ohne Speichern fortfahren?“

Seiten können durch Ziehen sortiert und in Ordner verschoben werden. Die Startseite wird mit einem Haussymbol angezeigt. Ein Rechtsklick auf eine Zeile zeigt diese Befehle:

• Seite umbenennen
• Als Startseite festlegen und Rollenzuweisung (nur bei Seiten)
• Seite exportieren (.json) und Aus JSON-Datei importieren (nur bei Seiten): exportiert die angeklickte Seite als JSON-Datei oder lädt eine JSON-Datei in diese Seite. Ist die Seite nicht geöffnet, wird zuerst die Datei gewählt und danach die Seite geöffnet.
• Alle Seiten exportieren (.zip) und Seiten importieren (.zip): exportiert alle Seiten als ein Paket oder importiert sie aus einem Paket.

Die Übertragungsbefehle stehen auch im Menü Datei > Übertragung; Einzelheiten unter Seiten exportieren und importieren.

Startseite und Seitenberechtigungen beschreibt die Seite Seitenverwaltung und Berechtigungen.

Widgets

Die Widgets, die einer Seite hinzugefügt werden können, sind in einklappbaren Gruppen aufgelistet:

Gruppe	Inhalt
Basis, Schaltflächen, Diagramme, Container, Isometrische Anlagen, Medien, Operationen, Andere, SVG	Widgets. Die Einstellungen jedes Widgets finden Sie im Abschnitt Widget-Referenz.
Composite-Komponenten	Gespeicherte, wiederverwendbare Komponenten.
Bausteine und Benutzerdefinierte Bausteine	Fertige Widget-Gruppen und Seitenvorlagen.

Composite-Komponenten, Bausteine und Vorlagen beschreibt die Seite Vorlagen und Bausteine.

Es gibt zwei Wege, ein Widget hinzuzufügen:

• Klicken: Das Widget wird in den ausgewählten Container eingefügt. Ist das ausgewählte Element kein Container, wird es in den Container eingefügt, in dem sich das Element befindet.
• Ziehen: Das Widget wird an der Stelle, an der es auf der Arbeitsfläche abgelegt wird, in den innersten Container eingefügt. Gesperrte Container werden übersprungen; das Widget wird in den nächsthöheren nicht gesperrten Container eingefügt, und neben dem Mauszeiger erscheint der Hinweis „<Ziel> · gesperrter <Container> übersprungen“. Bausteine, Composite-Komponenten und Seitenvorlagen folgen beim Ziehen derselben Regel.

Das eingefügte Widget wird automatisch ausgewählt. Einer leeren Seite muss zuerst ein Container (z. B. ein Kasten aus der Gruppe Container) hinzugefügt werden; andernfalls erscheint die Warnung „Auf leerer Seite sind nur Container erlaubt!“.

Elemente

Alle Elemente der Seite werden als Baum entsprechend der Container-Struktur aufgelistet. Ein im Baum ausgewähltes Element wird auch auf der Arbeitsfläche ausgewählt; ein auf der Arbeitsfläche ausgewähltes Element wird im Baum markiert. Das Suchfeld oben filtert die Elemente nach Namen.

• Umbenennen: Doppelklicken Sie auf den Elementnamen und geben Sie den neuen Namen ein. Dieser Name ist das Feld Anzeigename im Abschnitt Eigenschaften > Allgemein; er wird nur im Editor verwendet und wirkt sich nicht auf die Laufzeit aus.
• Augensymbol: Schaltet die Einstellung Sichtbar des Elements ein oder aus. Diese Einstellung gilt auch in der Seitenanzeige; ein ausgeblendetes Element wird auch dem Bedienpersonal nicht angezeigt.
• Schlosssymbol: Sperrt das Element oder hebt die Sperre auf. Die Wirkung der Sperre beschreibt der Abschnitt Sperre.
• Ziehen und Ablegen: Elemente werden im Baum durch Ziehen sortiert oder in einen anderen Container verschoben. Ein Element, das in einem gesperrten Container abgelegt wird, wird nicht verschoben, und die Warnung „Der Zielcontainer ist gesperrt; das Widget wurde nicht verschoben.“ erscheint. Befindet sich das Element bereits in einem gesperrten Container, kann es innerhalb seines eigenen Containers sortiert werden.
• Rechtsklick: Es öffnet sich dasselbe Menü wie beim Rechtsklick auf der Arbeitsfläche; auch der Befehl Aus Container herausnehmen befindet sich hier. Die Auswahl verhält sich wie auf der Arbeitsfläche (siehe Kontextmenü).

Arbeitsfläche

Auswählen und verschieben

• Ein Klick auf ein Element wählt es aus. Ein Klick mit gedrückter Shift-Taste fügt das Element der Auswahl hinzu; ist es bereits ausgewählt, wird es aus der Auswahl entfernt. Ein Klick mit Ctrl unter Windows oder Cmd unter macOS bewirkt dasselbe. Unter macOS gilt ein Klick mit Ctrl als Rechtsklick und öffnet das Kontextmenü; die Auswahl ändert sich nicht. Dieselben Regeln gelten auf der Registerkarte Elemente.
• Ein Rechteck, das Sie durch Ziehen von einer leeren Stelle der Arbeitsfläche aufziehen, wählt die Elemente darin aus. Ist beim Ziehen Shift (unter Windows Ctrl, unter macOS Cmd) gedrückt, werden die Elemente der bestehenden Auswahl hinzugefügt. Das Rechteck kann auch innerhalb eines gesperrten Containers beginnen; so lässt sich ein großer Hintergrundkasten sperren, damit die Elemente darin leicht ausgewählt werden können.
• Ein ausgewähltes Element wird mit der Maus oder den Pfeiltasten verschoben und mit den Rand- und Eckgriffen in der Größe geändert. Das Element kann auch an der Beschriftung über dem Auswahlrahmen (dem Widget-Typ des Elements) gezogen werden.
• Ziehen mit der Maus verschiebt das Element nur innerhalb seines eigenen Containers; auch wenn der Mauszeiger über einen anderen Container fährt, wechselt das Element nicht in diesen Container. Zum Verschieben in einen anderen Container siehe Element in einen anderen Container verschieben.
• Bei einem Element in einem Container mit Fluss-Layout (Container wie Zeile, Spalte oder Grid, die ihre Elemente selbst anordnen) bestimmt der Container die Position; ein solches Element ändert seine Position durch Ziehen nicht. Seine Reihenfolge ändern Sie auf der Registerkarte Elemente.
• Der Text von Textelementen wird durch Doppelklick auf das Element direkt bearbeitet.
• Esc hebt die Auswahl auf. Ohne Auswahl zeigt der rechte Bereich die Seiteneinstellungen.

Element in einen anderen Container verschieben

Ein auf der Arbeitsfläche gezogenes Element verlässt seinen Container nicht von selbst. Es gibt drei Wege, ein Element in einen anderen Container zu verschieben: Ziehen mit Alt auf der Arbeitsfläche, Ziehen und Ablegen auf der Registerkarte Elemente und der Befehl Aus Container herausnehmen im Kontextmenü.

Ziehen mit Alt:

1. Wählen Sie das einzelne zu verschiebende Element aus und beginnen Sie zu ziehen. Neben dem Mauszeiger erscheint der Hinweis „Alt gedrückt halten, um in einen anderen Container zu verschieben“ (unter macOS „⌥ Option“).

2. Halten Sie die Taste Alt (unter macOS Option) gedrückt. Der Container unter dem Mauszeiger wird mit einem Rahmen hervorgehoben, und die Beschriftung zeigt seinen Namen:

   Beschriftung	Bedeutung
   „In <Container>“	Beim Loslassen wird das Element in diesen Container verschoben. Der Container wird mit Widget-Typ und Anzeigename angegeben (ohne Anzeigename mit seiner Kurzkennung).
   „Bleibt in <Container>“	Der Mauszeiger befindet sich über dem Container, in dem das Element bereits liegt; der Container ändert sich nicht. Der Rahmen wird gestrichelt gezeichnet.
   „In Seitenstamm“	Der Mauszeiger befindet sich über keinem Container; das Element wird in den Stammcontainer der Seite verschoben.
   „<Container> ist gesperrt, Verschieben nicht möglich“	Das Ziel ist gesperrt; der Rahmen ist rot.
   „… · Größe und Position folgen dem Container“	Das Ziel ist ein Container mit Fluss-Layout; Größe und Position des Elements werden ab jetzt vom Container bestimmt.

3. Lassen Sie die Maustaste los, während Alt noch gedrückt ist.

Ein Element, das in einen Container mit absolutem Layout verschoben wird, bleibt an der Stelle, an der es abgelegt wurde, und wird in die Grenzen des Zielcontainers eingepasst. In einem Container mit Fluss-Layout wird das Element je nach Position des Mauszeigers zwischen die Elemente eingereiht. Auch ein Element in einem Container mit Fluss-Layout kann an seiner Beschriftung mit Alt in einen anderen Container gezogen werden; da es sich beim Ziehen nicht bewegt, wird es an der Stelle eingefügt, an der der Mauszeiger losgelassen wird.

Wird Alt während des Ziehens losgelassen, wird das Element weiter in seinem eigenen Container gezogen, und beim Loslassen der Maus ändert sich der Container nicht. Wird es über einem gesperrten Container losgelassen, bleibt das Element in seinem Container, und die Warnung „Der Zielcontainer ist gesperrt; das Widget wurde nicht verschoben.“ erscheint.

Der Container ändert sich nur, wenn ein einzelnes Element ausgewählt ist. Sind mehrere Elemente ausgewählt, verschiebt das Ziehen die Elemente in ihren eigenen Containern; wird Alt gedrückt, erscheint neben dem Mauszeiger „Bei Mehrfachauswahl kann der Container nicht gewechselt werden“.

Aus Container herausnehmen: Klicken Sie auf der Arbeitsfläche oder auf der Registerkarte Elemente mit der rechten Maustaste auf das Element und wählen Sie den Befehl Aus Container herausnehmen. Das Element wird in den Container eine Ebene über seinem bisherigen Container verschoben und folgt in der Reihenfolge direkt auf seinen bisherigen Container.

• Der Befehl ist nur aktiv, wenn ein einzelnes Element ausgewählt ist und das Element nicht direkt im Stammcontainer der Seite liegt.
• Hat der übergeordnete Container ein absolutes Layout, bleibt die Position des Elements auf dem Bildschirm erhalten.
• Hat der übergeordnete Container ein Fluss-Layout, wird das Element verschoben, und die Warnung „Das Widget wurde in einen Layout-Container verschoben; Größe und Position folgen jetzt dem Container.“ erscheint.
• Ist der übergeordnete Container gesperrt, wird das Element nicht verschoben, und die Warnung „Der Zielcontainer ist gesperrt; das Widget wurde nicht verschoben.“ erscheint.

Ziehen abbrechen und rückgängig machen

Wenn Sie während des Ziehens Esc drücken, wird das Ziehen abgebrochen: Die Elemente kehren an ihre Ausgangsposition zurück, die Änderung wird nicht im Verlauf gespeichert, und die Seite bleibt im Speicherzustand vor dem Ziehen. Verliert das Browserfenster während des Ziehens den Fokus (z. B. beim Wechsel in ein anderes Fenster), wird das Ziehen ebenso abgebrochen.

Ein abgeschlossenes Ziehen ist einschließlich eines Containerwechsels ein einziger Rückgängig-Schritt; Ctrl+Z bringt das Element an seine Position und in seinen Container vor dem Ziehen zurück. Auch Aus Container herausnehmen wird in einem Schritt rückgängig gemacht. Ein rückgängig gemachter Schritt kann mit Wiederholen (Ctrl+Y) erneut angewendet werden.

Sperre

Ein Element wird mit dem Schlosssymbol auf der Registerkarte Elemente gesperrt. Die Sperre wird mit dem Seiteninhalt gespeichert und wirkt nur im Editor; in der Seitenanzeige hat sie keine Wirkung.

• Ein gesperrtes Element kann auf der Arbeitsfläche weder am Körper noch an der Beschriftung des Auswahlrahmens mit der Maus gezogen werden. Werden mehrere Elemente gezogen, bleiben die gesperrten Elemente der Auswahl an ihrem Platz.
• In einen gesperrten Container kann kein anderes Element verschoben werden: Ziehen mit Alt, Ablegen auf der Registerkarte Elemente und Aus Container herausnehmen werden mit der Warnung „Der Zielcontainer ist gesperrt; das Widget wurde nicht verschoben.“ abgewiesen.
• Ein Widget, Baustein oder eine Vorlage, die von der Registerkarte Widgets gezogen wird, überspringt den gesperrten Container und wird in den nächsthöheren nicht gesperrten Container eingefügt.
• Die Sperre verhindert nicht, dass das Element mit den Pfeiltasten verschoben, mit den Griffen in der Größe geändert oder im Bereich Eigenschaften geändert wird.

Sehen Sie ein Element mit Schlosssymbol, das sich dennoch an seiner Beschriftung ziehen lässt oder in das sich Elemente verschieben lassen, klicken Sie einmal auf das Symbol, um die Sperre aufzuheben, und klicken Sie dann erneut darauf, um das Element zu sperren.

Kontextmenü

Ein Rechtsklick auf ein nicht ausgewähltes Element wählt vor dem Öffnen des Menüs nur dieses Element aus. Ein Rechtsklick auf ein Element der Auswahl behält die Auswahl bei; die Befehle gelten für alle ausgewählten Elemente. Dieselbe Regel gilt auf der Arbeitsfläche und auf der Registerkarte Elemente.

Das Menü, das sich beim Rechtsklick auf ein Element öffnet, enthält:

• Bearbeiten: Ersetzen, Duplizieren, Kopieren, Einfügen, Stil kopieren, Stil einfügen, Löschen
• Ändern > Anordnen: Befehle für die Stapelreihenfolge
• Ausrichten: Ausrichten, Verteilen und Angleichen der Größe
• Transformieren: 90° nach rechts drehen, 90° nach links drehen, Horizontal spiegeln, Vertikal spiegeln
• Composite erstellen, Gruppieren, Gruppierung aufheben, Aus Container herausnehmen, Als Komponente speichern, Komponentenvorlage bearbeiten

Zu Aus Container herausnehmen siehe Element in einen anderen Container verschieben.

Gruppieren

Gruppieren (Ctrl+G) legt die ausgewählten Elemente desselben Containers in einen neuen Kasten, der sie genau umschließt; die Position der Elemente auf dem Bildschirm ändert sich nicht. Die Gruppe wird als Ganzes verschoben und in der Größe geändert.

Gruppierung aufheben (Ctrl+B) entfernt den ausgewählten Kasten und verschiebt die Elemente darin unter Beibehaltung ihrer Position in den Container, in dem sich der Kasten befand. Dieser Befehl funktioniert nur bei Kasten-Elementen.

Stapelreihenfolge

Die Elemente eines Containers werden nacheinander gezeichnet; ein später folgendes Element erscheint über dem vorherigen. Die Reihenfolge ändern Sie im Menü Ändern > Anordnen oder im Kontextmenü:

Befehl	Funktion
Vorwärts bringen / Nach hinten senden	Bringt das Element eine Ebene nach vorn / nach hinten (Alt+↑ / Alt+↓).
Nach vorne bringen / Nach hinten senden	Bringt das Element in seinem Container ganz nach vorn / ganz nach hinten.

Elemente können auch auf der Registerkarte Elemente durch Ziehen sortiert werden. Außerdem hat jedes Element im Abschnitt Eigenschaften > Layout einen Wert Ebenenreihenfolge; ein größerer Wert liegt oben.

Ausrichtung

Für die Befehle Links, Oben, Rechts, Unten, Horizontal zentrieren und Vertikal zentrieren im Menü Ausrichten müssen mindestens zwei Elemente im selben Container ausgewählt sein. Für Horizontal verteilen und Vertikal verteilen sind mindestens drei Elemente im selben Container nötig. Breite angleichen, Höhe angleichen und Größe angleichen funktionieren auch mit mindestens zwei Elementen in verschiedenen Containern. Ist die Bedingung nicht erfüllt, ist der Befehl deaktiviert.

Lineale und Hilfslinien

Die Lineale am oberen und linken Rand der Arbeitsfläche zeigen Pixelmaße. Um eine Hilfslinie hinzuzufügen, ziehen Sie vom Lineal auf die Arbeitsfläche: Aus dem oberen Lineal entsteht eine senkrechte, aus dem linken eine waagerechte Hilfslinie. Die Hilfslinie zeigt ihre Position in Pixeln.

• Eine Hilfslinie wird durch Ziehen verschoben; wird sie aus der Arbeitsfläche hinausgezogen und losgelassen, wird sie gelöscht.
• Ist Am Raster ausrichten eingeschaltet, rastet die Hilfslinie am 10-Pixel-Raster ein; wird beim Ziehen Alt gedrückt gehalten, wird das Raster ignoriert.
• Ist An Hilfslinien ausrichten eingeschaltet, werden verschobene Elemente an der nächstgelegenen Hilfslinie ausgerichtet.
• Ansicht > Hilfslinien sperren fixiert die Hilfslinien, Hilfslinien löschen löscht alle.

Hilfslinien werden für jede Seite getrennt im Browser gespeichert; sie werden nicht im Seiteninhalt gespeichert und sind auf einem anderen Computer nicht sichtbar. Lineal, Hilfslinien und Raster sind nur bei eingeschaltetem Bearbeitungsmodus und in der Vorschau Desktop sichtbar.

Eigenschaftenbereich

Der rechte Bereich hat zwei Registerkarten: Stile und Eigenschaften. Wenn ein Element ausgewählt ist, erscheint oben im Bereich das Feld Eigenschaften suchen (z. B. Farbe, Rahmen). Ein hier eingegebenes Wort wird in den Feldnamen gesucht; angezeigt werden nur die passenden Felder und die Abschnitte, die sie enthalten.

Neben den meisten Feldern befindet sich ein Hilfesymbol; wenn Sie mit der Maus darauf zeigen, erscheint die Beschreibung des Felds.

Wenn mehrere Elemente ausgewählt sind:

• Änderungen auf der Registerkarte Stile werden auf alle ausgewählten Elemente angewendet. Werte, die sich zwischen den Elementen unterscheiden, werden als Gemischt angezeigt.
• Die Registerkarte Eigenschaften bearbeitet das erste Element der Auswahl; nur die gemeinsamen Ebenen- und Farbfelder werden auf die gesamte Auswahl angewendet. Die Informationszeile oben im Bereich zeigt, welches Element bearbeitet wird.

Registerkarte Stile

Enthält die Darstellungseinstellungen des ausgewählten Elements:

Abschnitt	Inhalt
Allgemein	Art von Anzeige und Positionierung, Einstellungen für das Flex-Layout und die Positionswerte Links, Oben, Rechts, Unten.
Abmessungen	Breite, Höhe sowie minimale/maximale Größen.
Abstand	Außenabstand und Innenabstand; ein Wert für Alle Seiten oder unter Benutzerdefiniert ein eigener Wert für jede Seite.
Typografie	Schriftart, Schriftgröße, Schriftstärke, Textfarbe, Zeichen- und Zeilenabstand, Ausrichtung. Die Schaltfläche Typografie-Einstellungen löschen löscht die Werte in diesem Abschnitt.
Dekorationen	Deckkraft, Eckenradius, Rahmen (Stärke, Stil, Farbe) sowie Hintergrundbild und -farbe.

Registerkarte Eigenschaften

Zeigt die Verhaltenseinstellungen des ausgewählten Widgets in einklappbaren Abschnitten. Welche Abschnitte erscheinen, hängt vom Widget-Typ ab. Die gemeinsamen Abschnitte sind:

Abschnitt	Inhalt
Allgemein	Name (eindeutige Kennung innerhalb der Seite), Anzeigename (nur im Editor auf der Registerkarte Elemente sichtbar), Titel (der angezeigte Text bei Widgets mit Titel) und Berechtigung. Die im Feld Berechtigung gewählte Rolle legt fest, für welche Benutzer das Widget in der Oberfläche bedienbar ist; bleibt das Feld leer, gibt es keine Rolleneinschränkung. Beschränken Sie mit Benutzerrollen, wer auf Tags schreiben darf.
Layout	X-Position, Y-Position, Drehung, Ebenenreihenfolge, Positionierung und Sichtbar.
Anordnung (Raster)	Nur bei Elementen in einem Grid-Container sichtbar; Einstellungen für das Grid-Layout, etwa die Anzahl der belegten Spalten und Zeilen.
Aussehen	Vordergrundfarbe, Hintergrundfarbe und CSS-Klassen. CSS-Klassen können aus einer gruppierten Liste vordefinierter Klassen gewählt werden.
Navigation (Ziel)	Das Ziel, das bei einem Klick auf das Widget geöffnet wird. Siehe Navigationslinks.
Zeichnung	Bei Linien und Formen Füll- und Rahmenfarbe, Transparenz, Rahmenstärke, Strichmuster, Linienenden.
Punkte	Bei Linien und Polygonen die Liste der Eckpunkte. Punkte werden hinzugefügt, gelöscht und sortiert, ihre X/Y-Werte bearbeitet, oder die Liste wird als Rohtext bearbeitet.
Markierungen	Pfeil-, Punkt- und Quadratmarkierungen am Anfang, an Zwischenpunkten, am Ende oder entlang von Linien sowie deren Farben.
Elemente	Die Optionsliste von Widgets wie Schaltflächengruppe, Dropdown-Liste und Optionsgruppe. Elemente werden hinzugefügt, gelöscht und sortiert; die Liste kann in einem großen Editor oder als Roh-JSON bearbeitet werden.
Verschiedenes	Einstellungen des Widgets, die in keinem anderen Abschnitt stehen.
Ereignisse	Code, der bei Klick-, Maus- und Wertänderungsereignissen ausgeführt wird. Er wird im Fenster Ereigniscode bearbeiten geschrieben; riskante Aufrufe werden unter dem Code als Hinweise zum Ereigniscode angezeigt. Ab 2.11 können nur SystemAdmin-Konten Ereigniscode hinzufügen oder ändern; andere Benutzer sehen den Abschnitt schreibgeschützt und können den Code löschen. Siehe Ereigniscode und Wer Ereigniscode hinzufügen darf.
Bindungen (Regeln)	Die Bindung von Widget-Eigenschaften an Tags. Siehe Datenbindungen.

Ist eine Composite-Komponente ausgewählt, erscheint statt Ereignisse und Bindungen (Regeln) der Abschnitt Komponentenparameter; siehe Vorlagen und Bausteine.

Widgetspezifische Abschnitte

Bei Widgets mit vielen eigenen Einstellungen stehen diese nicht im Abschnitt Verschiedenes, sondern in einem eigenen Abschnitt des Widgets. Der Name des Abschnitts hängt vom Widget ab, zum Beispiel Drucktaster-Einstellungen, Potentiometer-Einstellungen, Förderband-Einstellungen, Datentabellen-Einstellungen, Karten-Einstellungen, Diagrammeinstellungen, Schaltflächeneinstellungen oder Rezepteinstellungen.

Die meisten dieser Abschnitte sind in einklappbare Gruppen unterteilt:

• Felder, die zu keiner Gruppe gehören, werden immer oben und aufgeklappt angezeigt.
• Von den Gruppen ist standardmäßig nur die erste aufgeklappt; die übrigen öffnen Sie mit einem Klick auf ihre Überschrift.
• Welche Gruppen aufgeklappt sind, merkt sich der Browser für jeden Widget-Typ. Eine Gruppe, die Sie bei einem Drucktaster aufgeklappt haben, ist zum Beispiel auch beim nächsten ausgewählten Drucktaster aufgeklappt.

Bedeutung und Standardwerte der Felder in diesen Abschnitten sind auf den Seiten der Widget-Referenz aufgeführt.

Datenbindungen

Eine Bindung (Binding) verknüpft eine Widget-Eigenschaft mit dem Wert eines Tags. Ändert sich der Tag-Wert, wird auch die Eigenschaft aktualisiert. Es gibt keine eigenen Bindungsarten für „Wert“, „Farbe“, „Sichtbarkeit“ oder „Animation“; was eine Bindung bewirkt, bestimmt die gebundene Eigenschaft:

Zweck	Beispiel für die gebundene Eigenschaft
Wert anzeigen	processValue (der Hauptwert des Widgets)
Farbe ändern	foregroundColor, backgroundColor
Ein-/ausblenden	visible
Blinken lassen	enableFlashing

Die bindbaren Eigenschaften eines Widgets sind auf den Seiten der Widget-Referenz im Abschnitt Bindungen aufgeführt.

Bindung hinzufügen

1. Wählen Sie das Widget aus und öffnen Sie auf der Registerkarte Eigenschaften den Abschnitt Bindungen (Regeln).
2. Klicken Sie oben im Abschnitt auf die Schaltfläche Bindung hinzufügen (+). Der Liste wird eine neue Bindung mit dem Namen „New Binding“ hinzugefügt, die an die Eigenschaft processValue gebunden ist.
3. Klicken Sie auf die Überschrift der Bindung, um sie aufzuklappen, und geben Sie im Feld Name einen aussagekräftigen Namen ein.
4. Geben Sie im Feld Tag-Name den vollständigen Namen des Tags ein oder wählen Sie es mit der Schaltfläche Tags auswählen neben dem Feld in der Tag-Auswahl.
5. Wählen Sie den Bindungstyp. Bei Direct wählen Sie in der Liste Eigenschaftsname die zu bindende Eigenschaft.
6. Bei bedingten Typen klicken Sie auf die Einstellungsschaltfläche (Zahnrad) der Bindung und legen im Fenster Bindungswerte die Bedingungen fest.

Die Änderungen werden beim Speichern der Seite dauerhaft.

Im Feld Tag-Name kann statt eines einzelnen Tags auch ein Ausdruck stehen, der Tag-Namen in einfachen Anführungszeichen mit Operationen verknüpft (z. B. 'Kanal.Gerät.Tag1' + 'Kanal.Gerät.Tag2'). Enthält das Feld einen Ausdruck, wird ein in der Tag-Auswahl gewähltes Tag in Anführungszeichen an das Ende des Ausdrucks angehängt; den Operator dazwischen schreiben Sie selbst. Lange Ausdrücke bearbeiten Sie mit der Schaltfläche In einem Dialog öffnen in einem großen Fenster.

Bindungstypen

Typ	Verhalten
Direct	Der Tag-Wert wird unverändert in die gewählte Eigenschaft geschrieben.
IntRange	Der Tag-Wert wird mit ganzzahligen Bereichen verglichen; der Wert aus der Zeile des Bereichs, in den der Wert fällt, wird auf die Eigenschaft angewendet.
FloatRange	Funktioniert wie IntRange; die Bereichsgrenzen sind Dezimalzahlen.
Boolean	Der Tag-Wert wird als wahr/falsch ausgewertet; der Wert aus der Zeile true oder false wird angewendet.
Bit	Das mit Bitnummer angegebene Bit (0–31) des Tag-Werts wird gelesen; je nachdem, ob das Bit 0 oder 1 ist, wird der Wert der entsprechenden Zeile angewendet.

Bedingte Bindungen

Bei allen Typen außer Direct werden die Bedingungen im Fenster Bindungswerte festgelegt:

1. Prüfen Sie die Felder Bindungsname und Bindungstyp.
2. Wählen Sie in der Liste Eigenschaftsname eine Eigenschaft aus und klicken Sie auf die Schaltfläche + daneben. Eine Bindung kann mehrere Eigenschaften gleichzeitig ändern (z. B. Hintergrund- und Textfarbe). Hinzugefügte Eigenschaften erscheinen als Etiketten in der Überschrift; mit − auf dem Etikett werden sie entfernt.
3. Fügen Sie mit der Schaltfläche Hinzufügen eine Bedingungszeile hinzu. Bei Bereichstypen geben Sie in jeder Zeile Mindestwert und Maximaler Wert ein, bei Boolean und Bit den zu vergleichenden Zustand; anschließend geben Sie für jede Eigenschaft den anzuwendenden Wert ein.
4. Speichern Sie mit OK. Ist der Bindungsname leer, schließt sich das Fenster nicht, und die Warnung „Ein Bindungsname ist erforderlich.“ erscheint.

Bei Bereichstypen werden die Grenzen benachbarter Zeilen automatisch stimmig gehalten; ändert sich die Grenze einer Zeile, wird die Nachbarzeile so weit wie nötig angepasst, und in der Zeile erscheint ein Hinweis.

Beispiel: Für ein Temperatur-Tag drei Zeilen vom Typ FloatRange, gebunden an die Eigenschaft backgroundColor: 0–60 grün, 60–80 gelb, 80–150 rot.

Bindungsliste

Der Abschnitt Bindungen (Regeln) listet alle Bindungen des ausgewählten Widgets auf. In der Überschrift jeder Bindung befinden sich Schaltflächen zum Kopieren, Einstellen und Löschen. Die Schaltflächen oben im Abschnitt:

Schaltfläche	Funktion
Kopierte Bindung einfügen	Fügt die kopierten Bindungen dem ausgewählten Widget hinzu. So werden Bindungen auf andere Widgets übertragen.
Liste der kopierten Bindungen löschen	Leert die Liste der kopierten Bindungen.
Bindungen als rohes JSON bearbeiten	Bearbeitet alle Bindungen des Widgets als Text. Bei ungültigem JSON bleibt das Fenster geöffnet, Ihr Text bleibt erhalten, und die Warnung „Geben Sie ein gültiges JSON-Array von Bindungen ein.“ erscheint.
Bindung hinzufügen	Fügt eine neue Bindung hinzu.

Ist in der Liste eine Bindung ausgewählt, kopiert Ctrl+C diese Bindung, und Ctrl+V fügt die kopierten Bindungen ein (wenn sich der Cursor nicht in einem Textfeld befindet).

Tag-Auswahl

Die Schaltfläche Tags auswählen öffnet die Tag-Auswahl. Sie besteht aus zwei Registerkarten:

• Tags: Baum mit Kanälen, Geräten und Tags. Wählen Sie ein Tag aus und bestätigen Sie mit Ja. Bei langen Bäumen öffnet sich die Auswahl beim zuletzt gewählten Tag.
• System: Schreibgeschützte Tags, die die Anwendung selbst veröffentlicht. System-Tags können nicht geschrieben und nicht als Archivquelle verwendet werden. Eine Zeile wird ausgewählt und mit Ja oder per Doppelklick auf die Zeile eingefügt.

Auf der Registerkarte System aufgeführte Tags:

Tag	Wert
__activeAlarmCount	Anzahl der aktiven (nicht ignorierten) Alarme.
__unacknowledgedAlarmCount	Anzahl der Alarme, die auf Quittierung warten.
__warningAlarmCount	Anzahl der aktiven Alarme vom Typ Warnung.
__latestAlarmText	Meldung des neuesten aktiven Alarms; leer ohne aktiven Alarm.
__latestAlarmType	Typ des neuesten aktiven Alarms: 0 Fehler, 1 Warnung, 2 Alarm; -1 ohne aktiven Alarm.
__latestAlarmTime	Änderungszeit des neuesten aktiven Alarms, lokal JJJJ-MM-TT HH:mm:ss; leer ohne aktiven Alarm.
__latestAlarmId	Kennung des neuesten aktiven Alarms, für this.srt.ackSingleAlarm(id); leer ohne aktiven Alarm.
__latestAlarmAcknowledged	1, wenn der neueste aktive Alarm quittiert ist, 0 solange er wartet; -1 ohne aktiven Alarm.
__currentUserRoles	Rollennamen des angemeldeten Benutzers, durch Kommas getrennt.
__currentUserGroups	Gruppenkennung des angemeldeten Benutzers.
__currentLocale	Die gewählte Oberflächensprache (z. B. tr-TR); wird gesetzt, nachdem der Benutzer eine Sprache gewählt hat.

Jede Zeile zeigt den Typ des Werts (Zahl/Text) und die verwendbaren Bindungstypen: Die Alarmanzahlen werden mit Direct, IntRange und FloatRange verwendet, Typ und Quittierzustand des neuesten Alarms mit Direct und IntRange, die übrigen nur mit Direct. Der neueste Alarm ist die erste Zeile der Alarmtabelle mit ihrem Standardfilter Aktiv; siehe Touch-Panels.

In der Gruppe Rezeptstatus unten auf der Registerkarte werden die Tags aufgelistet, die der Server automatisch für den Rezeptstatus anlegt: Gruppenkennung und -name des zuletzt angewendeten Rezepts, Rezeptkennung und -name sowie für jede Rezeptgruppe Kennung und Name des zuletzt in dieser Gruppe angewendeten Rezepts. Diese Tags entstehen, wenn eine Rezeptgruppe angelegt oder ein Rezept angewendet wird.

Ein auf der Registerkarte System gewähltes Tag wird mit vorangestelltem @NOP:: eingetragen (z. B. @NOP::__activeAlarmCount). Dieses Präfix verhindert, dass das Tag-Präfix der Seite auf dieses Tag angewendet wird; siehe Tag-Präfix.

Snapshot-Namensgenerator

Die Schaltfläche Snapshot-Namensgenerator mit dem Uhrsymbol neben dem Feld Tag-Name erstellt Schritt für Schritt den Namen eines Snapshots, der Zeitraumwerte eines Tags liest, etwa den heutigen Verbrauch oder den gestrigen Durchschnitt, und schreibt ihn mit Einfügen in das Feld. Bedienung und Aufbau der Snapshot-Namen beschreibt die Seite Verbrauch und Snapshots.

Wird in das Feld ein Snapshot-Name eingegeben, der mit @NOP:: beginnt, erscheint darunter eine Warnung; auf Seiten mit Tag-Präfix liefert dieser Name keinen Wert.

Tag-Präfix

Soll dieselbe Seite für verschiedene Geräte verwendet werden, kann die Seite mit einem Tag-Präfix geöffnet werden (siehe Navigationslinks). Auf einer mit Präfix geöffneten Seite werden die Tag-Namen in den Bindungen so aufgelöst:

Tag-Name	Präfix	Gelesenes Tag
Sicaklik	Kanal.Kazan1.	Kanal.Kazan1.Sicaklik
.Sicaklik	Kanal.Kazan1	Kanal.Kazan1.Sicaklik
@NOP::Kanal.Ortak.Sicaklik	beliebig	Kanal.Ortak.Sicaklik

Das Präfix wird dem Tag-Namen direkt vorangestellt. Vor Tags, auf die das Präfix nicht angewendet werden soll, wird @NOP:: geschrieben. Für Snapshot-Namen gelten andere Präfixregeln; siehe Tag-Name und Seitenpräfix.

Navigationslinks

Der Abschnitt Eigenschaften > Navigation (Ziel) legt fest, was bei einem Klick auf das Widget geöffnet wird. Optionen in der Liste Typ:

Typ	Ziel	Verhalten
Keine Auswahl	—	Es wird nicht navigiert.
Zur Scada-Seite wechseln	Seitenliste	Öffnet die gewählte SCADA-Seite. In der Liste wird die Startseite mit dem Zusatz „(Startseite)“ angezeigt. Hat der Benutzer keine Berechtigung für die Seite, erscheint die Warnung „Sie haben keine Berechtigung, auf diese Seite zuzugreifen!“.
Zum Bildschirm wechseln	Anwendungsbildschirme	Öffnet einen Anwendungsbildschirm wie Alarme oder Trendanalyse. Die Liste enthält nur die Bildschirme, auf die der Benutzer im Editor zugreifen kann. Ein Benutzer ohne Berechtigung erhält zur Laufzeit die Warnung „Unbefugter Zugriff!“ und bleibt auf der Seite.
Element ein-/ausblenden	Modalfenster der Seite	Öffnet oder schließt das gewählte Modalfenster.
Externer Link	Eingegebene Adresse	Öffnet die Adresse in einem neuen Tab. Nur Adressen mit http, https und mailto werden geöffnet.
Zur Startseite wechseln	—	Öffnet die Startseite des Benutzers.
Zurück	—	Kehrt im Browserverlauf zum vorherigen Bildschirm zurück. Gibt es in der Anwendung keinen Bildschirm, zu dem zurückgekehrt werden kann (z. B. wenn die Seite direkt über die Adresse geöffnet wurde), wird die Startseite geöffnet.
Vorwärts	—	Geht im Browserverlauf zum nächsten Bildschirm.

Bei den Typen Zur Scada-Seite wechseln, Element ein-/ausblenden und Zur Startseite wechseln kann zusätzlich ein Tag-Präfix eingegeben werden; das Ziel wird mit diesem Präfix geöffnet (siehe Tag-Präfix).

Für viele Anlagenteile mit derselben Variablenstruktur (z. B. Motoren) genügt ein Modalfenster: Wählen Sie an der Schaltfläche jedes Anlagenteils mit Element ein-/ausblenden dasselbe Modalfenster und tragen Sie im Feld Tag-Präfix das Präfix dieses Anlagenteils ein. Zur Laufzeit öffnet sich ein geschlossenes Modalfenster mit dem Präfix des angeklickten Anlagenteils, ein offenes wechselt ohne Schließen zu einem anderen Anlagenteil, und ein erneuter Klick auf dasselbe Anlagenteil schließt es. Das vom Link übergebene Präfix ändert das gespeicherte Tag-Präfix des Modalfensters nicht; nach dem Schließen gilt wieder das eigene Tag-Präfix des Modalfensters. Ein Link Element ein-/ausblenden mit leerem Tag-Präfix öffnet oder schließt das Modalfenster nur. Wechselt ein geöffnetes Modalfenster zu einem anderen Anlagenteil, wird die Seite im Modalfenster neu aufgebaut: eingegebene, aber noch nicht gesendete Werte werden gelöscht, und aus dem Modalfenster heraus geöffnete Fenster kehren in den Zustand beim ersten Öffnen der Seite zurück. Ein für ein Anlagenteil eingegebener Wert wird so nicht auf ein anderes übertragen.

Beim Typ Element ein-/ausblenden kann zusätzlich ein optionaler Titel eingegeben werden. Solange der Link das Modalfenster geöffnet hält, zeigt die Titelleiste des Modalfensters diesen Text statt des eigenen Titels (z. B. Motor M01); so zeigt ein gemeinsames Modalfenster, welches Anlagenteil geöffnet ist. Ist Titel leer, und nachdem das Modalfenster geschlossen wurde, gilt der eigene Titel des Modalfensters. Im Editor zeigt das Modalfenster immer seinen eigenen Titel.

Bei einem Klick auf einen Link ohne Ziel erscheint die Warnung „Das Linkziel ist nicht konfiguriert.“. Ist die Seite im Kiosk-Modus geöffnet, bleibt der Kiosk-Modus auch auf den über Links geöffneten Seiten erhalten.

Gemeinsames Anlagenfenster

Das folgende Beispiel richtet ein Anlagenfenster (Faceplate) für alle Motoren einer Linie ein. Die Tags der Motoren haben dieselbe Struktur: Hat1.Motor01.Calisiyor, Hat1.Motor01.Hiz, Hat1.Motor02.Calisiyor …

1. Anlagenseite: Gestalten Sie den Inhalt des Fensters als eigene Seite (z. B. Motor_Detay). Schreiben Sie die Tag-Namen in den Bindungen als relative Namen, die mit einem Punkt beginnen (.Calisiyor, .Hiz). Stellen Sie dem Namen eines Tags, das für alle Motoren gemeinsam ist, @NOP:: voran (siehe Tag-Präfix).
2. Modalfenster: Fügen Sie der Seite mit den Motoren ein einziges Modalfenster hinzu. Wählen Sie die Anlagenseite als Seitenname und lassen Sie Sichtbar starten ausgeschaltet.
3. Motorsymbol: Fassen Sie das Motorsymbol und die daneben angezeigten Werte in einer Box zusammen; verwenden Sie auch in deren Bindungen relative Namen. Wählen Sie in der Einstellung Navigation (Ziel) des anzuklickenden Widgets als Typ Element ein-/ausblenden, als Ziel das Modalfenster aus Schritt 2, und tragen Sie im Feld Tag-Präfix {{composite.tagPrefix}} ein. Im Feld Titel kann ein fester Text oder ebenfalls {{composite.tagPrefix}} stehen.
4. Komponente: Machen Sie die Box zu einer Composite-Komponente (mit Als Komponente speichern in der Bibliothek speichern und von dort einfügen oder mit Ändern > Composite erstellen). Platzieren Sie für jeden Motor eine Kopie und tragen Sie im Feld Tag-Präfix der Kopie das Präfix des Motors ein (z. B. Hat1.Motor03).

Zur Laufzeit wird {{composite.tagPrefix}} durch das wirksame Tag-Präfix der Kopie ersetzt: Das Präfix der Seite (oder des Modalfensters, das die Komponente enthält) und der Wert Tag-Präfix der Kopie werden auf dieselbe Weise verbunden wie in Bindungen wie .Hiz innerhalb der Komponente. Das Modalfenster öffnet sich daher mit den Tags des Motors, den das Motorsymbol zeigt, und das Präfix muss nicht an jeder Schaltfläche eingegeben werden. Der Platzhalter wird nur in Widgets innerhalb einer Composite-Komponente aufgelöst. Ziel des Links ist das Modalfenster auf der Seite, auf der Sie die Box vorbereitet haben; verwenden Sie die Komponente auf der Seite, die dieses Modalfenster enthält.

Gibt der Bediener einen Sollwert ein und wechselt ohne Senden zu einem anderen Motor, wird der eingegebene Wert gelöscht; um ihn zu senden, öffnet er das Fenster des vorherigen Motors erneut und gibt den Wert noch einmal ein.

Einheit je Anlagenteil: Die Einstellung Einheit der Wert-Widgets wird mit der Anlagenseite gespeichert und erscheint bei jedem Motor gleich. Verwenden alle Motoren dieselbe Einheit, genügt diese Einstellung.

Seiteneinstellungen

Ist auf der Arbeitsfläche kein Element ausgewählt, zeigt die Registerkarte Eigenschaften die Einstellungen der geöffneten Seite:

Einstellung	Beschreibung
ID	Die Nummer der Seite im System. Schreibgeschützt.
Name	Der Name der Seite. Hier schreibgeschützt; geändert wird er mit Datei > Seite umbenennen.
Tag-Präfix	Das für die Seite festgelegte Tag-Präfix. Schreibgeschützt.
Höhe	Die Höhe der Arbeitsfläche in Pixeln.
Viewer-Symbolleiste	Automatisch (bei Aktivität), Immer sichtbar oder Ausgeblendet.
Druckausrichtung	Querformat (A4) oder Hochformat (A4).
Druckanpassung	Automatisch (nach Seitentyp), Ganze Seite auf einem Blatt oder An Breite anpassen.
Druckfarben	Hell (für Papier) oder Wie am Bildschirm.

Die Wirkung der Viewer-Symbolleiste und der Druckoptionen in der Seitenanzeige beschreibt die Seite Seitenanzeige. Diese Einstellungen werden zusammen mit dem Stammcontainer der Seite gespeichert; deshalb sind sie bei einer leeren Seite deaktiviert.

Seitengröße und Skalierung

Das Verhalten der Seite auf dem Bildschirm bestimmt die Größe des Stammcontainers (Stile > Abmessungen):

• SCADA-Bildschirm mit fester Größe: Sind Breite und Höhe des Stammcontainers in Pixeln angegeben (z. B. 1920px × 1080px), skaliert die Seitenanzeige die Seite so, dass sie das Fenster ausfüllt. Da Breite und Höhe getrennt skaliert werden, kann die Seite horizontal oder vertikal gestreckt werden, wenn das Fenster ein anderes Seitenverhältnis hat.
• Flexible (responsive) Seite: Ist die Größe in Prozent oder automatisch angegeben, wird die Seite nicht skaliert; der Inhalt ordnet sich nach der Fensterbreite an.

Auch die Option Automatisch (nach Seitentyp) beim Drucken richtet sich nach dieser Unterscheidung.

Hintergrundfarbe oder -bild der Seite werden mit den Einstellungen Aussehen > Hintergrundfarbe oder Stile > Dekorationen des Stammcontainers festgelegt.

Speichern

Die Seite wird mit Datei > Speichern oder Ctrl+S gespeichert. Nach erfolgreichem Speichern erscheint eine Meldung, dass die Seite gespeichert wurde, und der Punkt neben dem Seitennamen verschwindet.

Eine gespeicherte Seite ist sofort veröffentlicht

Im Seiteneditor gibt es keinen Entwurf, keinen Schritt „Vorschau und Veröffentlichen“ und keine Freigabe. Speichern ändert den einzigen Stand der Seite: Alle Benutzer, die auf die Seite zugreifen können (einschließlich Bedien- und Kiosk-Bildschirmen), sehen den neuen Stand, wenn sie die Seite das nächste Mal öffnen oder aktualisieren. Auf dem Server wird kein früherer Stand der Seite aufbewahrt.

Bevor Sie eine Seite im laufenden Betrieb stark ändern:

• Sichern Sie die Seite mit Übertragung > Exportieren. Muss der frühere Stand wiederhergestellt werden, laden Sie diese Datei mit Übertragung > Aus JSON-Datei importieren und speichern sie.
• Bereiten Sie die Änderung nach Möglichkeit auf einer eigenen Seite vor und blenden Sie diese für das Bedienpersonal aus, indem Sie ihr nur die Rolle Editor zuweisen (siehe Seitenverwaltung). Wenn sie fertig ist, kopieren Sie die Elemente und fügen sie in die eigentliche Seite ein oder übertragen sie per Export/Import, und speichern Sie die eigentliche Seite.

Bei ungespeicherten Änderungen:

• Wenn Sie im linken Bereich eine andere Seite öffnen wollen, wird gefragt: „Auf der Seite sind nicht gespeicherte Änderungen vorhanden. Möchten Sie ohne Speichern fortfahren?“
• Wenn Sie vom Editor zu einem anderen Bildschirm wechseln wollen, wird gefragt: „Es gibt ungespeicherte Änderungen. Möchten Sie diesen Bildschirm wirklich verlassen?“

Um die Gestaltung zu prüfen, können Sie mit dem Vorschaugerät in der Symbolleiste der Arbeitsfläche die Tablet- und Mobilgröße ansehen. Um mit Live-Tag-Werten zu prüfen, speichern Sie die Seite und öffnen sie in der Seitenanzeige.

Suchen und Ersetzen

Bearbeiten > Seiteninhalt ändern > Suchen und Ersetzen ersetzt einen Text auf der Seite in einem Schritt überall. Meist wird damit nach dem Kopieren einer Seite für ein anderes Gerät der Tag-Name geändert.

1. Geben Sie im Feld Suchzeichenfolge den zu ersetzenden Text ein (z. B. Kanal.Kazan1.).
2. Geben Sie im Feld Ersatzzeichenfolge den neuen Text ein (z. B. Kanal.Kazan2.).
3. Bestätigen Sie mit Ja.

Der gesamte Seiteninhalt wird geändert

Gesucht wird nicht nur in den Bindungen, sondern im gesamten Inhalt der Seite: Tag-Namen, Titel, Texte, Elementnamen und übrige Einstellungen. Groß- und Kleinschreibung wird unterschieden, und jede Fundstelle wird ersetzt. Kurze oder allgemeine Ausdrücke können auch unerwartete Stellen ändern; erstellen Sie vorher mit Übertragung > Exportieren eine Sicherung und prüfen Sie das Ergebnis vor dem Speichern.

Auch Ereigniscode wird geändert

Gesucht wird auch in den Texten im Ereigniscode; zum Beispiel wird auch der Aufruf setTag("Kanal.Kazan1.Hiz", …) im Ereigniscode zu Kanal.Kazan2.Hiz. Ab 2.11 gilt ein Ersetzen, das den Text von Ereigniscode ändert, als Codeänderung und kann nur mit einem SystemAdmin-Konto gespeichert werden. Versucht ein Benutzer mit der Rolle Editor, eine solche Seite zu speichern, wird das Speichern abgewiesen und nichts gespeichert (siehe Wer Ereigniscode hinzufügen darf). Wenn Sie dasselbe Design für viele Geräte verwenden und statt die Seite zu kopieren und zu ändern eine einzige Seite mit Tag-Präfix öffnen, ändert sich der Ereigniscode nicht.

Um dasselbe Design für viele Geräte zu verwenden, können Sie statt die Seite zu kopieren auch eine einzige Seite mit Tag-Präfix öffnen.

Widget ersetzen

Ersetzen wandelt ein Widget unter Beibehaltung seiner Einstellungen und Bindungen in einen anderen Widget-Typ um. So wird zum Beispiel ein Dreistufen-Wahlschalter in einen Drehschalter mit denselben Einstellungen umgewandelt.

1. Klicken Sie auf der Arbeitsfläche oder auf der Registerkarte Elemente mit der rechten Maustaste auf das Widget und wählen Sie den Befehl Bearbeiten > Ersetzen.
2. Wählen Sie im Fenster Komponente ersetzen den Ziel-Widget-Typ aus der Liste. Die Liste zeigt die technischen Namen der Widgets (z. B. TwRotarySwitch für den Drehschalter); die technischen Namen stehen in den Tabellen der Widget-Referenz in der Spalte Komponentenname.
3. Bestätigen Sie.

Einstellungen, die im neuen Widget unter demselben Namen vorhanden sind (einschließlich Position, Stil, Bindungen und gemeinsamer Einstellungen), bleiben erhalten. Einstellungen ohne Entsprechung im neuen Widget werden gelöscht. Ein Container kann nicht in ein Widget umgewandelt werden, das kein Container ist („Die Zielkomponente ist kein Container“).

Übersetzungen

Die Entsprechungen der Seitentexte in anderen Sprachen werden im Fenster Übersetzungen verwalten bearbeitet, das sich mit Bearbeiten > Seiteninhalt ändern > Übersetzungen bearbeiten öffnet. Das Fenster zeigt die Übersetzungen der geöffneten Seite. Befehle in der Symbolleiste:

Befehl	Funktion
Speichern / Abbrechen / Aktualisieren	Speichert die Übersetzungsänderungen, verwirft sie oder lädt die Liste neu.
Sprache hinzufügen / Sprache entfernen	Fügt eine neue Übersetzungssprache hinzu oder entfernt die gewählte Sprache.
Übersetzungen importieren	Importiert Übersetzungen aus einer CSV-Datei. Wird das Fenster geschlossen, nachdem eine Datei gewählt, aber noch nicht importiert wurde, wird eine Bestätigung angefordert.
Texte synchronisieren	Legt Schlüssel für alle Texte der Seite an, die noch keinen Übersetzungsschlüssel haben.
Übersetzungen verschieben	Verschiebt die Übersetzungen einer Sprache in eine andere Sprache.