EASYUI Hilfe DE ENG V3

EASY UI Designer
Dokumentation (DE)
Documentation (ENG)
EASY UI Designer
Version: 3.0
27.04.2023 Seite 1/130
Inhaltsverzeichnis
Inhaltsverzeichnis .................................................................................................................. 2
1 Grundlegendes ......................................................................................................... 4
Welche EASY Engineering Tool Lizenz benötige ich? ................................................................... 4
Welche Systemanforderungen hat der EASY UI Designer? ......................................................... 4
Welche Steuerungen werden unterstützt? ................................................................................. 4
Welche Hardware wird benötigt?................................................................................................ 5
Welche Browser werden unterstützt?......................................................................................... 5
Welche Shortcuts gibt es? ........................................................................................................... 5
2 Projekte .................................................................................................................... 9
Welche Optionen bietet mir der Projektkonfigurator? ............................................................... 9
Wie kann ich ein bestehendes Projekt bearbeiten? .................................................................. 10
Wie richte ich ein neues Projekt ein? ........................................................................................ 11
Wie ist der EASY UI Designer aufgebaut? .................................................................................. 12
Wie ist ein Projekt aufgebaut? .................................................................................................. 13
Wie kann ich ein Projekt auf dem Zielgerät starten? ................................................................ 14
Wie kann ich ein Projekt lokal starten? ..................................................................................... 15
3 Design ..................................................................................................................... 16
Welche Layouts stehen mir für die Hauptansicht zur Verfügung? ............................................ 16
Wo finde ich die Hauptansicht der Applikation? ....................................................................... 17
Wie kann ich eine Seite, eine Ansicht oder einen Dialog bearbeiten? ..................................... 17
Welche Ansichten und Seiten sind im Projekt verfügbar? ........................................................ 18
Wie ist das FixClassical-Layout aufgebaut? ............................................................................... 19
Wie ist die Kopfzeile beim FixClassical-Layout aufgebaut? ....................................................... 20
Wie sind die Navigationsschaltflächen beim FixClassical-Layout aufgebaut? .......................... 21
Wie ist das FixTop-Layout aufgebaut? ....................................................................................... 21
Wie ist die Kopfzeile beim FixTop-Layout aufgebaut? ............................................................... 22
Wie sind die Navigationsschaltflächen beim FixTop-Layout umgesetzt? ................................. 23
Wie kann ich dem FixClassical-/ FixTop-Layout eine Navigationsschaltfläche hinzufügen?...... 23
Wie kann ich eine Visualisierung mit absolutem Layout skalieren? .......................................... 24
Was muss ich bei der Projektierung von responsiven Visualisierungen beachten? ................. 25
Was bewirkt die Eigenschaft orientation? ................................................................................. 25
Was bewirkt die Eigenschaft wrap? ........................................................................................... 26
Was bewirkt die Eigenschaft alignItems? .................................................................................. 26
Was bewirkt die Eigenschaft justifyContent? ............................................................................ 27
Was bewirkt die Eigenschaft alignContent? .............................................................................. 27
Wie ist das Responsive Layout aufgebaut? ............................................................................... 28
Wie kann ich dem Responsive-Menü weitere Elemente hinzufügen? ..................................... 29
Wie kann ich im Responsive-Menü die Reihenfolge der Menüelemente ändern? ................... 29
Wie kann ich eine neue Seite (page), Ansicht (view) oder einen Dialog hinzufügen? .............. 30
Wie kann ich eine vorhandene HTML-Datei als Seite, Ansicht oder Dialog hinzufügen? .......... 32
Wie kann ich Steuerelemente auf einer Seite oder Ansicht einfügen? .................................... 32
Wie kann ich mehrere Steuerelemente zu einem eigenen Steuerelement zusammenfassen? 32
Wie kann ich meinem Steuerelement einen eigenen Style zuweisen? .................................... 36
Was ist eine Region und wie arbeite ich mit ihnen? .................................................................. 37
Welche Dialoge gibt es und wie zeige ich sie an? ...................................................................... 38
EASY UI Designer
Version: 3.0
27.04.2023 Page 2/130
Wie rufe ich Tastatur-Dialoge auf? ............................................................................................ 39
4 Actions ................................................................................................................... 40
Wie kann ich einem Steuerelement eine Action hinzufügen? ................................................... 40
Welche Trigger gibt es, um eine Action auszulösen? ................................................................ 41
Welche Actions gibt es? ............................................................................................................. 41
Wie setze ich Eigenschaften mit der setPropertyAction? .......................................................... 42
Was sind Zuordnungstabellen und wie lege ich sie an? ............................................................ 44
5 Variablen ................................................................................................................ 46
Wie lege ich eine Symbolkonfiguration an? .............................................................................. 46
Wie kann ich Variablen aus einem PLC-Projekt importieren? ................................................... 47
Wie kann ich mir Variablendefinitionen anschauen und bearbeiten? ..................................... 48
Wie kann ich einem Steuerelement eine Variable zuweisen? ................................................... 49
Wie kann ich Grenzen bei einer Variablen einstellen? .............................................................. 50
Welche Variablentypen gibt es und wofür nutze ich sie? ......................................................... 51
6 Sprachumschaltung ................................................................................................ 52
Wie kann ich eine neue Sprache zum Projekt hinzufügen? ....................................................... 52
Wie kann ich mir Texte anschauen und bearbeiten? ................................................................ 53
Wie kann ich einen mehrsprachigen Text hinzufügen? ............................................................. 53
Wie kann ich eine eigene Textgruppe für meine Texte hinzufügen .......................................... 54
Wie kann ich einem Element einen mehrsprachigen Text zuweisen? ...................................... 54
Wie funktioniert die Sprachumschaltung? ................................................................................ 54
Wie füge ich dynamische Informationen zu lokalisierbaren Texten hinzu? .............................. 55
7 Alarme .................................................................................................................... 57
Wie ist das Alarmsystem aufgebaut? ........................................................................................ 57
Welche Schritte sind nötig, um das Alarmsystem aufzusetzen? ............................................... 58
Welche Alarmzustände gibt es? ................................................................................................ 58
Was ist eine Alarmklasse und wofür wird sie genutzt? ............................................................. 59
Wie gruppiere ich Alarme? ........................................................................................................ 60
Wie lege ich einen Alarm an? .................................................................................................... 60
Welche Alarmtypen gibt es und wie werden sie angewendet? ................................................ 60
Wie verbinde ich Alarme mit einer numerischen Liste? ............................................................ 61
Wie zeige ich Alarme in einer Alarmzeile an? ............................................................................ 61
8 Benutzerverwaltung ............................................................................................... 62
Wie kann ich Benutzergruppen anlegen? .................................................................................. 62
Wie kann ich Benutzer anlegen? ............................................................................................... 62
Wie kann ich Rechte anlegen und zuweisen? ............................................................................ 62
Wie kann ich einem Element ein Recht zuweisen? ................................................................... 63
9 Rezepte .................................................................................................................. 64
Wie aktiviere ich die Rezeptfunktion im EASY UI Designer?...................................................... 64
10 Glossar.................................................................................................................... 67
Page? View? Region? AppShell? Ich verstehe nur Bahnhof… .................................................... 67
EASY UI Designer
Version: 3.0
27.04.2023 Page 3/130
1 Grundlegendes
Mit dem EASY UI Designer lassen sich individuelle Maschinenvisualisierungen als Web-Appli-
kation umsetzen. Hierbei ist keine Erfahrung im Bereich Web-Entwicklung nötig. Verschiedene
Vorlagen, die kundenspezifisch angepasst werden können, erleichtern die Zusammenstellung
der Inhalte.
Welche EASY Engineering Tool Lizenz benötige ich?

Der EASY UI Designer ist Bestandteil der EASY Engineering Tool Lizenz „EASY Professional“.
Mit der EASY Professional-Lizenz haben Sie Zugriff auf alle Produkte der Lenze Engineering
Toolchain, die Sie von der Planung bis hin zur Umsetzung bei den anspruchsvollen Aufga-
ben unterstützen, die im Rahmen der Maschinenentwicklung anstehen.
Welche Systemanforderungen hat der EASY UI Designer?

Systemanforderungen:
Empfohlen
PC mit Windows 10
Prozessor 2.2 GHz (Dual Core) oder schneller
Arbeitsspeicher 4 GB oder mehr
Bildschirmauflösung 1920 x 1080 Pixel oder höher
Grafikhardwarebeschleunigung DirectX 9 oder höher
Benötigter Festplattenplatz zur Installation 1.5 GB
Welche Steuerungen werden unterstützt?

Für die Erstellung einer Web-Applikation ist eine Lenze Steuerung
der Gerätereihe c5xx erforderlich, da auf diesen Geräten die FAST
UI Runtime integriert ist.
Die Kommunikation mit der Steuerung erfolgt ausschließlich über

OPC UA. Die dafür erforderlichen Funktionalitäten müssen explizit
im PLC Designer unter Einstellungen > OPC UA-Funktionalitäten
unterstützen aktiviert werden. Ebenfalls muss das Häkchen bei der
Erstellung der Symbolkonfiguration gesetzt sein.
EASY UI Designer
Version: 3.0
27.04.2023 Page 4/130
Welche Hardware wird benötigt?
Um die Webvisualisierung ausführen zu können, ist sowohl ein Controller der Serie c5xx als
auch ein Anzeigegerät erforderlich. Lenze bietet für letzteres das WebPanel v450 an.
Zur Projektierung reicht im ersten Schritt jedoch Ihr Engineering PC mit Chromium-basiertem
Browser.
Welche Browser werden unterstützt?

Aus technologischer Perspektive kann die Webvisualisierung in allen gängigen Browsern dar-
gestellt werden. Wir raten jedoch von der Nutzung von zu alten Versionen ab (Internet Explo-
rer 11 oder älter), um eventuelle Darstellungsprobleme zu vermeiden. Empfohlen wird die
Nutzung von Google Chrome oder der Chromium-basierte Microsoft Edge.
Welche Shortcuts gibt es?

Allgemein
Allgemeine Tastaturbefehle gelten für die gesamte Entwicklungsumgebung oder mindestens
für die jeweils genannte Komponente wie z. B. den Projektexplorer. Spezifische Tastaturbe-
fehle für den Designer und den Tabelleneditor sind in Tabellen weiter unten aufgeführt.
Tastaturbefehl Funktion
Strg + S Speichert das aktuell geöffnete Projekt.
Strg + C Kopiert das markierte Element oder die markierten Elemente in die Zwi-
schenablage.
Strg + V Fügt den Inhalt der Zwischenablage (ein oder mehrere Elemente) an der
markierten Stelle ein.
Strg + X Entfernt das markierte Element oder die markierten Elemente und kopiert
sie in die Zwischenablage.
Strg + A Markiert den gesamten Inhalt eines Editors oder eines Textfeldes.
Strg + Z Macht die letzte Aktion rückgängig.
Strg + Y Wiederholt die letzte Aktion, die rückgängig gemacht wurde.
Entf Löscht das markierte Element.
Enter Zeigt das im Projektexplorer markierte Element im entsprechenden Editor

an.
Strg + F Ruft einen Dialog auf, um nach Worten im Dokument oder in der Tabelle
zu suchen.
EASY UI Designer
Version: 3.0
27.04.2023 Page 5/130
Strg + H Ruft einen Dialog auf, um ein Wort durch ein anderes automatisch zu er-
setzen.
F2 Ruft den Dialog Datei umbenennen auf, um die im Projektexplorer mar-

kierte Datei umzubenennen.
F3 Markiert die nächste Instanz des Suchworts.
F4 Öffnet das Eigenschaftenfenster, falls es geschlossen wurde.
Alt + F4 Schließt die Entwicklungsumgebung.
F5 Kompiliert und startet das Projekt.
F8 Öffnet den Dialog zum Hinzufügen eines Elements zum Projekt.
Umschalt + F8 Erstellt einen neuen Ordner im Projektexplorer.
Strg + linke Markiert das mit gedrückter Strg-Taste markierte Element zusätzlich zu be-
Maustaste reits markierten Elementen.
Umschalt + Markiert den gesamten Bereich zwischen einem bereits markierten Ele-
linke Maus- ment und dem bei gedrückter Umschalttaste angeklickten Element.
taste
Strg + Pfeil Springt zum Ende des Worts.

nach rechts
Strg + Pfeil Springt zum Anfang des Worts.

nach links
Strg + Umschalt Markiert von der Cursorposition bis zum Ende des Worts.
+ Pfeil nach
rechts
Strg + Umschalt Markiert von der Cursorposition bis zum Anfang des Worts.
+ Pfeil nach
links
EASY UI Designer
Version: 3.0
27.04.2023 Page 6/130
Designer
Strg + S Speichert das aktive Dokument.
Strg + Umschalt Speichert alle im Designer geladenen Dokumente.

+S
Umschalt + Verschiebt die Ansicht im Designer nach links oder nach rechts.
Scrollrad
Scrollrad Verschiebt die Ansicht im Designer nach oben oder nach unten.
Strg + Scrollrad Vergrößert bzw. verkleinert die Ansicht im Designer.
Leertaste + Erlaubt das Verschieben der Ansicht im Designer per Maus.

linke Maus-
taste
Tabelleneditor
Strg + 1 Füllt alle markierten Zellen mit dem Inhalt der zuerst markierten Zelle aus
und erhöht den Index für den Namen jeder markierten Definition um 1.
Strg + 2 Füllt alle markierten Zellen mit dem Inhalt der zuerst markierten Zelle aus
und erhöht den Index für jede Zelle um 2.
Strg + U Füllt alle markierten Zellen mit dem Inhalt der obersten markierten Zelle
aus.
Strg + F8 Erstellt eine Kopie der markierten Definition und fügt die Kopie in die Ta-
belle ein.
Strg + Pfeil Springt zur letzten Zelle der Zeile.

nach rechts
Strg + Pfeil Springt zur ersten Zelle der Zeile.

nach links
Strg + Pfeil Springt zur ersten Zelle der Spalte.

nach oben
Strg + Pfeil Springt zur letzten Zelle der Spalte.

nach unten
EASY UI Designer
Version: 3.0
27.04.2023 Page 7/130
Umschalt + Markiert ein Zeichen weiter nach rechts.

Pfeil nach
rechts
Umschalt + Markiert ein Zeichen weiter nach links.

Pfeil nach links
Umschalt + Markiert eine Zeile weiter nach oben.

Pfeil nach oben
Umschalt + Markiert eine Zeile weiter nach unten.

Pfeil nach un-
ten
EASY UI Designer
Version: 3.0
27.04.2023 Page 8/130
2 Projekte
Welche Optionen bietet mir der Projektkonfigurator?

Wenn Sie den EASY UI Designer starten, wird zunächst der Projektkonfigurator angezeigt. Auf
der Startseite haben Sie folgende Optionen:
Aktuelle Projekte
Hier finden Sie eine Übersicht aller bereits angelegter Projekte. Um das gewünschte Projekt
einfacher aufzufinden, können Sie die Filtereinstellungen und die Suchfunktion oberhalb der
Projektkacheln nutzen.
Durch Rechtsklick auf eine Kachel stehen Ihnen weitere Optionen in einem Kontextmenü zur
Verfügung.
Mehr Informationen hierzu erhalten Sie unter Wie kann ich ein bestehendes Projekt bearbei-
ten?
Neues Projekt
Ein neues Projekt können Sie entweder durch Klick auf das Pluszeichen (+) oder auf Basis ei-
ner bereits erstellten Vorlage anlegen, welche Sie ebenfalls als Kacheln visualisiert auf der
Seite „Neues Projekt“ finden.
Weitere Informationen: Wie richte ich ein neues Projekt ein?
Beispielprojekte
Unter diesem Menüpunkt findet sich eine Übersicht von Beispielprojekten zu bestimmten
Themen.
Öffne Projekt
Hiermit kann ein Projekt von der Festplatte geöffnet werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 9/130
Wie kann ich ein bestehendes Projekt bearbeiten?
Wenn Sie den EASY UI Designer starten, wird zunächst der Projektkonfigurator angezeigt. Un-
ter Aktuelle Projekte sehen Sie eine Übersicht aller bereits vorhandener Projekte.
Auf der Startseite des Projektkonfigurators sind für alle Projekte die folgenden Optionen über
einen Rechtsklick auf die Projektkachel verfügbar:
Sollten Sie Ihr Projekt nachträglich verändern wollen, finden Sie diese Optionen unter Projekt
bearbeiten.
Muss das Projekt durch einen Wechsel des Zielgeräts angepasst werden, kann dies mithilfe
von Ändere Zielgerät projektiert werden. Nach der Auswahl öffnet sich die Konfigurations-
seite für das Gerät. Durch Auswahl eines anderen Controllers und Bestätigung der folgenden
Schritte wird das Zielgerät im Projekt aktualisiert.
Wenn neue Features genutzt werden möchten, kann das Projekte mit Aktualisiere
Projekt auf den neuesten Stand gebracht werden. Diese Option steht nur bei älteren
Projekten zur Verfügung und wird durch das orangefarbige Icon in der Projektkachel gekenn-
zeichnet.
Abmelden- Wenn das Projekt nicht mehr in der Liste der Projekte auftauchen, aber nicht ge-
löscht werden soll, kann man es abmelden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 10/130
Das endgültige Löschen eines Projekts von der Festplatte wird durch Klick auf Löschen er-
reicht.
Folgende Optionen stehen hier zur Verfügung:
• Projekt öffnen - Klicken Sie auf eines der Projekte auf der Startseite. Das Projekt wird
im EASY UI Designer geöffnet.
• Projekt suchen - Wenn die Projektliste umfangreich ist, können Sie im Suchfeld auch
nach Projektnamen, Kunden, Projektbeschreibung oder Datum suchen.
• Projekt löschen -Klicken Sie mit der rechten Maustaste auf das Projekt und wählen
Sie im Kontextmenü den entsprechenden Befehl.
Wie richte ich ein neues Projekt ein?

Wenn Sie den EASY UI Designer starten, wird zunächst der Projektkonfigurator angezeigt. Auf
der Startseite gelangen Sie durch Auswahl von „Neues Projekt“ auf eine Seite, auf der Sie ein
komplett neues Projekt anlegen können („+“) oder ein Projekt auf Basis einer bereits gespei-
cherten Vorlage erstellen können.
Neues Projekt
Um das Anlegen eines benutzerdefinierten Projekts zu beginnen, klicken Sie auf das Pluszei-
chen (+). Ein leeres Projekt kann mithilfe der rechten Maustaste und der Auswahl leer ange-
legt werden. Im letzteren Fall werden nur die absolut notwendigen Einstellungen konfiguriert,
Alternativ können sie unter Eigene Vorlagen auch ein Projekt auf Basis einer selbst angelegten
Vorlage erstellen.
Nachdem Sie auf der Startseite über das Pluszeichen (+) ein neues Projekt angelegt haben,
werden Sie durch verschiedene Dialoge geführt, um die Projekteinstellungen festzulegen:
• Projekt – Hier legen Sie die Projektdaten (Projektname, Projektpfad, Projektversion,
Entwickler, Kunde) fest.
• Gerät – Hier wählen Sie Ihre vorhandene Steuerung aus und haben einen Überblick
über die gerätespezifischen Einschränkungen.
• Features – Hier konfigurieren Sie die Funktionen, die Bestandteil Ihrer Visualisierung
sind. Benutzerverwaltung, Sprachumschaltung, Alarmsystem und Variablensystem
sind dabei fest integriert, das Rezeptmanagement und die Integration der FAST
Dienste sind optional.
Tipp: Wenn Sie die Visualisierung sofort ohne weitere Benutzerkonfiguration im EASY
UI Designer testen möchten, aktivieren Sie hier für die Benutzerverwaltung die Op-
tion „Gast-Benutzer hinzufügen“.
• Kommunikation - Um Variablen aus einem PLC-Projekt importieren zu können, muss
eine Anknüpfung an das Projekt erfolgen. Dabei stehen drei Möglichkeiten zur Verfü-
gung:
o PLC Projekt: Die kürzlich geänderten *.project – Dateien werden hier zur
Auswahl gestellt.
o EASY Export : Alle relevanten Informationen stecken auch im Lenze-Aus-
tauschformat *.easyuilpk , das hier über den …-Button gewählt werden
kann.
EASY UI Designer
Version: 3.0
27.04.2023 Page 11/130
o Symbolkonfiguration: Die Symbolkonfiguration (*.xml) mit den für die Visu-
alisierung freigegebenen Variablen wird mithilfe des … -Buttons geladen.
• Display – Hier legen Sie ein neues Client-Projekt mit allen Informationen zum Anzei-
gegerät an.
o Auswahl des Gerätetyps und der Gerätegröße/Auflösung
o Auswahl des Layouts (responsiv, fixes Menü oben, fixes Menü unten) und
des Designs für die Visualisierung (Theme, Aussehen der Steuerelemente)
o Auswahl der Ansichten, die dem Visualisierungsprojekt hinzugefügt werden
sollen
• Zusammenfassung – Hier wird Ihnen eine Zusammenfassung aller Projekteinstellun-
gen angezeigt.
o Tipp: Wenn Sie im Kästchen unter der Zusammenfassung ein Häkchen set-
zen, werden die vorgenommenen Projekteinstellungen zusätzlich als Vor-
lage für neue Projekte gespeichert.
o Klicken Sie auf die Schaltfläche , um das Projekt zu erzeugen und im
EASY UI Designer zu öffnen.
Wie ist der EASY UI Designer aufgebaut?

Die Benutzeroberfläche des EASY UI Designers teilt sich in folgende Bereiche auf:
① Titelzeile – In der Titelzeile wird der Name des geöffneten Projekts angezeigt. Die Titel-
zeile enthält auch Start- und Stopp-Schaltflächen, über die Sie die Visualisierung im Browser
starten und stoppen können.
② Menüband – Das Menüband enthält eine Reihe von Symbolleisten, mit denen Sie schnell
auf die Befehle zugreifen können, die zum Erstellen und Bearbeiten eines Projekts benötigt
werden.
③ Projekt-Explorer – Der Projekt-Explorer bietet einen Zugriff auf alle Bereiche des Projekts
in Form einer Ordnerstruktur. Die Ordner lassen sich auf- und zuklappen, um deren Inhalte
ein- bzw. auszublenden.
④ Designer-Arbeitsbereich – Im Designer-Arbeitsbereich gestalten Sie die verschiedenen

Seiten Ihrer Maschinenvisualisierung.
⑤ Dokumentgliederung – In der Dokumentgliederung wird die Gliederung der im Designer-

Arbeitsbereich geöffneten Datei angezeigt. Je nach gewähltem Layout sind hier verschiedene
Einträge zu finden.
⑥ Ausgabefenster – Im Ausgabefenster werden Meldungen der Entwicklungsumgebung an-

gezeigt.
⑦ Seiteneigenschaftenfenster – Im Seiteneigenschaftenfenster werden die Eigenschaften

der im Designer-Arbeitsbereich geöffneten Datei angezeigt und können hier auch geändert
werden.
⑧ Eigenschaftenfenster – Im Eigenschaftenfenster werden die Eigenschaften des im Desig-

ner-Arbeitsbereich ausgewählten Elements angezeigt und können hier auch geändert werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 12/130
Über die Schaltflächen und können Sie zwischen den Elementeigenschaften den Einstel-
lungen für Aktionen (Actions) wechseln.
⑨ Statuszeile – In der Statuszeile wird der Status der Entwicklungsumgebung angezeigt.

1
8
3
4 Designer
7
5
6
9
Wie ist ein Projekt aufgebaut?

Im EASY UI Designer befindet sich auf der linken Seite der Projekt-Explorer. Der Projekt-Explo-
rer bietet einen Zugriff auf alle Bereiche des Projekts in Form einer Ordnerstruktur. Die Ord-
ner lassen sich auf- und zuklappen, um deren Inhalte ein- bzw. auszublenden.
Der Standardaufbau eines Projekts besteht aus einem Client-Projekt und einem Server-Pro-
jekt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 13/130
Client-Projekt
• Das Client-Projekt enthält im Ordner Design alle inhaltlichen Bestandteile der Visuali-
sierung (Grafiken, Dialoge, Seiten und Ansichten).
• Im Ordner Project Configuration finden Sie die Einstellungen zum Zielgerät und zum
Client-Projekt.
Server-Projekt
• Das Server-Projekt enthält alle Informationen zu den Server-seitigen Funktionen
Variablen, Sprachumschaltung, Alarme und Benutzerverwaltung.
• Im Ordner Project Configuration finden Sie die Einstellungen zum Server-Projekt.
Wie kann ich ein Projekt auf dem Zielgerät starten?

Das neu angelegte Projekt enthält bereits eine ausführbare Visualisierung. Das heißt, dass Sie
das Projekt nach dem Anlegen nur auf eine Steuerung der Gerätereihe c5xx kopieren müssen
und es dann dort starten können.
Folgende Schritte sind hierfür notwendig:
1. Zielgerät verbinden
a. Wählen Sie im Menüband Projekt > Zielgerätemanager.
b. Geben Sie die IP-Adresse der Steuerung ein.
c. Wählen Sie Projekt > Verbinden. War die Verbindung erfolgreich, wird im Menü-
band der Eintrag Verbinden ausgegraut und der Eintrag Trennen auswählbar.
2. Projekt auf Zielgerät übertragen

Wählen Sie in der Übersicht die zu kopierenden Projekte aus und starten Sie den
Kopiervorgang durch die Option Projekt > Übertragen im Menüband. Im Ausgabe-
fenster gibt es eine Rückmeldung, ob der Vorgang erfolgreich war.
3. Projekt im Browser starten

Klicken Sie auf die Schaltfläche , um das Projekt im Browser zu starten. Im Brow-
ser wird für einige Sekunden ein Startlogo angezeigt, anschließend erscheint der An-
meldedialog der Visualisierung.
Tipp: Wenn Sie neben dem Browser-Namen auf den kleinen grauen Pfeil klicken,
werden in einer Liste alle auf dem System installierten Browser zur Auswahl aufgelis-
tet.
Wir empfehlen die Nutzung von Google Chrome oder Microsoft Edge. Der Microsoft
Internet Explorer wird nicht unterstützt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 14/130
4. Benutzer anmelden
Wenn Sie zuvor beim Einrichten des Projekts für die Benutzerverwaltung die Option
„Gast-Benutzer hinzufügen“ aktiviert haben, geben Sie im Anmeldedialog Name und
Passwort des Gast-Benutzers ein (Voreinstellung: Name = „guest“ und Passwort =
„guest“).
Das Projekt können Sie einfach stoppen, indem Sie das Browser-Fenster wieder
schließen.
Wie kann ich ein Projekt lokal starten?

Wenn kein Zielgerät zur Verfügung steht, kann die Visualisierung auch lokal auf dem Entwick-
lungsrechner gestartet werden.
Hierzu wählen Sie im Menüband Projekt > Ausführungsziel den Eintrag Lokal aus.
Klicken Sie auf die Schaltfläche , um das Projekt im Browser zu starten. Dort wird für ei-
nige Sekunden ein Startlogo angezeigt, anschließend erscheint der Anmeldedialog der Visuali-
sierung.
EASY UI Designer
Version: 3.0
27.04.2023 Page 15/130
3 Design
Welche Layouts stehen mir für die Hauptansicht zur Verfügung?

Im EASY UI Designer werden drei Layout-Typen für die Hauptansicht „AppShell.html“ angebo-
ten:
• FixClassical-Layout – Das „FixClassical-Layout“ besitzt eine Kopfzeile und eine Reihe
von Navigationsschaltflächen am unteren Bildschirmrand, über die die verschiede-
nen Seiten der Maschinenvisualisierung aufgerufen werden können. Elemente lassen
sich nur absolut positionieren, daher ist dieses Layout nur für Displaygrößen mit ei-
ner ähnlichen Auflösung geeignet.
• FixTop-Layout – Das „FixTop-Layout“ besitzt eine Kopfzeile, in der alle Schaltflächen
zur Navigation und für Einstellungen enthalten sind. Elemente lassen sich nur absolut
positionieren, daher ist dieses Layout nur für Displaygrößen mit einer ähnlichen Auf-
lösung geeignet.
• Responsive Layout – Das „Responsive Layout“ ist dazu geeignet, Visualisierungen auf
sehr unterschiedlichen Client-Geräten anzuzeigen (beispielsweise Desktop-PC und
Smartphone). Durch die dafür erforderliche Logik können Elemente in diesem Layout
nicht absolut positioniert werden. Das Menü kann flexibel durch ein „Burger“-Icon
ein- und ausgeklappt werden.
Das zu verwendende Layout wählen Sie beim Einrichten eines neuen Projekts im Projektkonfi-
gurator im Einstellungsschritt „Anzeige konfigurieren“ aus. Für jedes Layout stehen wiederum
drei Design-Themen zur Auswahl: „Helles Design“, „Dunkles Design“ und „Kundenspezifisches
Design“.
Wie ist das FixClassical-Layout aufgebaut?

Wie ist das FixTop-Layout aufgebaut?
Wie ist das Responsive Layout aufgebaut?
EASY UI Designer
Version: 3.0
27.04.2023 Page 16/130
Wo finde ich die Hauptansicht der Applikation?
Im EASY UI Designer befindet sich auf der linken Seite der Projekt-Explorer. Alle Benutzer-
oberflächen des Projekts sind im Client-Ordner unter Design enthalten.
1. Klappen Sie den Ordner [Projekt]_Client > Design > views auf. In diesem Ordner befindet
sich die Datei „AppShell.html“, die die Hauptansicht der Applikation definiert.
2. Doppelklicken Sie auf den Eintrag „AppShell.html“, um die Datei im Designer-Arbeitsbe-
reich zu öffnen.
Unterhalb des Projekt-Explorer wird die Dokumentgliederung zur im Designer-Arbeitsbereich
geöffneten Datei angezeigt, in diesem Fall zur Datei „AppShell.html“. Je nach gewähltem Lay-
out sind hier verschiedene Einträge zu finden. Wenn Sie auf einen Eintrag klicken, wird der zu-
gehörige Bereich im Designer-Arbeitsbereich markiert und Sie können dessen Eigenschaften
im Eigenschaftenfenster bearbeiten.
Auf der Hauptansicht „AppShell.html“ dient der Bereich AppPageNavigator als Platzhalter. In
diesem Bereich werden zur Laufzeit die verschiedenen Seiten (Pages) mit den eigentlichen In-
halten angezeigt. Fügen Sie daher in diesem Bereich keine Elemente ein.
Wie kann ich eine Seite, eine Ansicht oder einen Dialog
bearbeiten?
Im EASY UI Designer befindet sich auf der linken Seite der
Projekt-Explorer.
Alle Benutzeroberflächen des Projekts sind im Client-Ord-
ner unter Design enthalten. Doppelklicken Sie auf einen
Eintrag, um die entsprechende Datei im Designer-Arbeits-
bereich zu öffnen.
Unterhalb des Projekt-Explorer wird die Dokumentgliede-

rung zur im Designer-Arbeitsbereich geöffneten Datei an-
gezeigt. Je nach gewähltem Layout sind hier verschiedene
Einträge zu finden. Wenn Sie auf einen Eintrag klicken,
wird der zugehörige Bereich im Designer-Arbeitsbereich
markiert und Sie können dessen Eigenschaften (z.B. Texte,
Farben, Layout) im Eigenschaftenfenster bearbeiten.
EASY UI Designer
Version: 3.0
27.04.2023 Page 17/130
Welche Ansichten und Seiten sind im Projekt verfügbar?
Es gibt diverse Ansichten, die direkt im Projekt genutzt werden können. Folgende pages und
views sind bereits in den entsprechenden Knoten im Client-Projekt vorhanden oder können
durch das Kontextmenü im Projektexplorer hinzugefügt werden. Die pages stellen dabei die
inhaltlichen Seiten der Visualisierung dar und sind bereits in der Navigationsleiste (Button-
View.html) verknüpft.
• Views
o Hauptansicht (AppShell.html): Sie enthält das Grundgerüst der Applikation.
o Anmeldeansicht (LoginView.html): Sie enthält das Anmeldefenster zur Visu-
alisierung.
o Menüansichten (ButtonView.html/HeaderView.html): Je nach Projektlayout
sind in diesen Ansichten Teile des Menüs abgebildet.
o Fehleransicht (ErrorView): Ansicht zur Ausgabe der Fehler während der
Laufzeit. Diese Seite sollte nicht manipuliert werden.
• Pages
o Vorlage zur Maschinenübersicht (MachinePage.html): Hier können Sie die
Startseite Ihrer Maschine gestalten.
o Vorlage zum Rezeptmanagement (RecipesPage.html): Sie enthält die Re-
zeptmanagement-Vorlage, wenn die Rezeptfunktion im Projektkonfigurator
aktiviert wurde.
o Vorlage für Einstellungen (SettingsPage.html): Hier können Sie generische
Einstellungen hinzufügen.
o Vorlage zu Statistiken (StatisticsPage.html): Diese Seite kann mit Statistiken
oder Leistungsindikatoren Ihrer Maschine gefüllt werden.
o Vorlage für Diagnoseinformationen (DiagnosticsPage.html): Geben Sie den
Benutzern hier Informationen zur Diagnose von Fehlern.
o Übersicht über aktuelle Alarme (CurrentAlarmsPage.html): Sie enthält eine
Alarmliste, die zur Laufzeit mit den aktuellen Alarmen gefüllt wird.
o Übersicht der historischen Alarme (HistoricalAlarmsPage.html): Sie enthält
die Liste der historischen Alarme.
Wie kann ich eine neue Seite (page), Ansicht (view) oder einen Dialog hinzufügen?
EASY UI Designer
Version: 3.0
27.04.2023 Page 18/130
Wie ist das FixClassical-Layout aufgebaut?
Das FixClassical-Layout besitzt eine Kopfzeile und eine Reihe von Navigationsschaltflächen am
unteren Bildschirmrand, über die die verschiedenen Ansichten aufgerufen werden können.
HeaderRegion → View „HeaderView.html“
AppPageNavigator → Pages
ButtonRegion → View „ButtonView.html“
Die Schaltflächen (Benutzer) und (Einstellungen) in der

Kopfzeile beziehen sich auf die Server-seitigen Funktionen Benutzerverwaltung und
Sprachumschaltung.
Dokumentgliederung
Die zugehörige Hauptansicht „AppShell.html“ enthält in der Dokumentgliederung die Ele-
mente HeaderRegion, AppPageNavigator und ButtonRegion.
• Die HeaderRegion enthält die Kopfzeile. In der Voreinstellung wird in dieser Region
die Ansicht „HeaderView.html“ angezeigt.
• Der AppPageNavigator zeigt zur Laufzeit die verschiedenen Seiten mit den eigentli-
chen Inhalten an. Fügen Sie daher in diesem Bereich keine Elemente ein, sondern er-
stellen Sie die Visualisierung auf der jeweiligen Seite, beispielsweise „Machine-
Page.html“.
• Die ButtonRegion enthält die Schaltflächen zur Navigation. In der Voreinstellung wird
in dieser Region die Ansicht „ButtonView.html“ angezeigt.
Alle Benutzeroberflächen des Projekts sind im Client-Ordner unter Design enthalten. Doppel-
klicken Sie auf einen Eintrag, um die entsprechende Datei im Designer-Arbeitsbereich zu öff-
nen.
EASY UI Designer
Version: 3.0
27.04.2023 Page 19/130
Wie ist die Kopfzeile beim FixClassical-Layout aufgebaut?
Die Ansicht „HeaderView.html“ definiert die Kopfzeile der Applikation.
① ② ③ ④⑤
① Das Image-Element kann beispielsweise für ein Logo verwendet werden. Die anzuzei-
gende Grafik können Sie im Eigenschaftenfenster für das Image-Element unter Image >
Image auswählen.
② Durch das Label-Element wird der aktuell eingeloggte Nutzer angezeigt. Es wird im
Hintergrund über die Eigenschaft DataContext aktualisiert.
③ Die Schaltfläche (Benutzer) öffnet über die unter projektierte showDialogAc-

tion den Dialog UserDialog.html, in dem diverse Einstellungen zur Benutzerverwaltung
angeboten werden. In den Einstellungen der Action im Eigenschaftenfenster der Schalt-
fläche kann über Dialog > Mode projektiert werden, ob der Dialog eine Interaktion (z.B.
schließen, bestätigen) erfordert (Modal) oder ob er durch Klick auf andere Elemente
ohne weitere Interaktion verschwindet (NonModal).
④ Die Schaltfläche (Einstellungen) ist ein Button-Element, das den Dialog Settings-
Dialog.html aufruft.
⑤ Die Zeit-/Datumsanzeige ist ein Clock-Element.
⑥ Die untere Zeile ist ein AlarmLine-Element, das im Falle eines ausgelösten Alarms zur
Laufzeit die entsprechenden Informationen anzeigt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 20/130
Wie sind die Navigationsschaltflächen beim FixClassical-Layout
aufgebaut?
Die Ansicht „ButtonView.html“ definiert die Schaltflächen zur Navigation.
• Wie in der Dokumentgliederung zu sehen, enthält die View ein TabBar-Steuerele-

ment, das wiederum für jede Navigationsschaltfläche ein TabButton-Element enthält.
• Die Seite, die beim Start der Visualisierung geladen werden soll, können Sie im Eigen-
schaftenfenster für das TabBar-Element unter Navigation > StartPageName auswäh-
len.
• Jedem TabButton-Element ist im Eigenschaftenfenster unter Text > LocalizableText
ein in der Sprache umschaltbarer Text zugeordnet.
• Die Zielseite für ein TabButton-Element können Sie im Eigenschaftenfenster für das
TabButton-Element unter Navigation > PageName auswählen.
• In der Voreinstellung sind folgende Zielseiten für die Schaltflächen definiert:
o Machine → „pages/MachinePage.html“
o Recipes → „pages/RecipesPage.html“
o Statistics → „pages/StatisticsPage.html“
o Settings → „pages/ SettingsPage.html“
o Diagnostics → „pages/DiagnosticsPage.html“
o Alarms → „pages/CurrentAlarmsPage.html“
Wie kann ich dem FixClassical- oder FixTop-Layout eine Navigationsschaltfläche hinzufügen?
Wie ist das FixTop-Layout aufgebaut?

Das FixTop-Layout besitzt eine Kopfzeile, in der alle Schaltflächen zur Navigation und für Ein-
stellungen enthalten sind.
MenuRegion → View „HeaderView.html“
Die Schaltflächen (Benutzer) und (Einstellungen) in der Kopfzeile beziehen sich auf
die Server-seitigen Funktionen Benutzerverwaltung und Sprachumschaltung.
EASY UI Designer
Version: 3.0
27.04.2023 Page 21/130
Dokumentgliederung
Die zugehörige Hauptansicht „AppShell.html“ enthält in der Dokumentgliederung die Ele-
mente MenuRegion und AppPageNavigator.
• Die MenuRegion enthält die Kopfzeile. In der Voreinstellung wird in dieser Region die
Ansicht „HeaderView.html“ angezeigt.
Page.html“.
nen.
Wie ist die Kopfzeile beim FixTop-Layout aufgebaut?

Die Ansicht „HeaderView.html“ definiert die Kopfzeile der Applikation.
① ② ③ ④ ⑤
① Das Image-Element kann beispielsweise für ein Logo verwendet werden. Die anzuzei-
gende Grafik können Sie im Eigenschaftenfenster für das Image-Element unter Image >
Image auswählen.
② Die Schaltflächen zur Navigation sind in einer eigenen View, der „ButtonView.html“,
definiert. Daher wird hier das Steuerelement Region genutzt, in der die Ansicht hineinge-
laden wird. Änderungen bezüglich des Navigationsmenüs sind daher in der ButtonView
vorzunehmen.
③ Die Schaltfläche (Benutzer) öffnet über die unter projektierte showDialogAc-

tion den Dialog UserDialog.html, in dem diverse Einstellungen zur Benutzerverwaltung
angeboten werden. In den Einstellungen der Action im Eigenschaftenfenster der Schalt-
fläche kann über Dialog > Mode projektiert werden, ob der Dialog eine Interaktion (z.B.
schließen, bestätigen) erfordert (Modal) oder ob er durch Klick auf andere Elemente
ohne weitere Interaktion verschwindet (NonModal).
④ Die Schaltfläche (Einstellungen) ist ein Button-Element, das den Dialog Settings-
Dialog.html aufruft.
⑤ Die Zeit-/Datumsanzeige ist ein Clock-Element.
⑥ Die untere Zeile ist ein AlarmLine-Element, das im Falle eines ausgelösten Alarms zur
Laufzeit die entsprechenden Informationen anzeigt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 22/130
Wie sind die Navigationsschaltflächen beim FixTop-Layout
umgesetzt?
Die Ansicht „ButtonView.html“ definiert die Schaltflächen zur Navigation.
• Die Dokumentgliederung enthält ein TabBar-Element, das wiederum für jede Naviga-
tionsschaltfläche ein TabButton-Element enthält.
• Die Seite, die beim Start der Visualisierung geladen werden soll, können Sie im Eigen-
schaftenfenster für das TabBar-Element unter Navigation > StartPageName auswäh-
len.
• Jedem TabButton-Element ist im Eigenschaftenfenster unter Text > LocalizableText
ein in der Sprache umschaltbarer Text zugeordnet.
• Die Zielseite für ein TabButton-Element können Sie im Eigenschaftenfenster für das
TabButton-Element unter Navigation > PageName auswählen.
• In der Voreinstellung sind folgende Zielseiten für die Schaltflächen definiert:
o Machine → „pages/MachinePage.html“
o Recipes → „pages/RecipesPage.html“
o Diagnostics → „pages/DiagnosticsPage.html“
o Alarms → „pages/CurrentAlarmsPage.html“
• Die Schaltfläche „STATISTICS“ ist als Menü-Schaltfläche (TabMenuButton) mit drei
Einträgen (MenuItem) definiert:
o Statistik → „pages/StatisticsPage.html“
o Page 1 → noch keine Zielseite definiert
o Page 2 → noch keine Zielseite definiert
Jedem MenuItem ist im Eigenschaftenfenster unter Text > LocalizableText ein in der
Sprache umschaltbarer Text zugeordnet.
Die Zielseite für ein MenuItem-Element können Sie im Eigenschaftenfenster für das
MenuItem-Element unter Navigation > PageName auswählen.
Wie kann ich dem FixClassical-/ FixTop-Layout eine Navigations-

schaltfläche hinzufügen?
Im „FixClassical-Layout“ wie auch im „FixTop-Layout“ sind die Schaltflächen zur Navigation in
der Ansicht „ButtonView.html“ definiert.
So fügen Sie eine Schaltfläche hinzu:
1. Klappen Sie im Projekt-Explorer den Ordner [Projekt]_Client > Design > views auf.
2. Doppelklicken Sie auf den Eintrag „ButtonView.html“, um die Datei im Designer-Ar-
beitsbereich zu öffnen.
3. Selektieren Sie in der Dokumentgliederung das TabBar-Element.
4. Klicken Sie im Eigenschaftenfenster unter Common Properties > Items (Collection) auf
die Schaltfläche .
EASY UI Designer
Version: 3.0
27.04.2023 Page 23/130
Das Dialogfeld „Collection Editor“ wird angezeigt:
5. Im Auswahlfeld können Sie einen TabButton oder einen TabMenuButton (Button mit
Untermenü) auswählen und mittels der Schaltfläche Add hinzuzufügen.
Tipp: Mit den beiden Schaltflächen können Sie einen selektierten Eintrag an
die gewünschte Position verschieben.
6. Passen Sie die Eigenschaften der Schaltfläche an.
• Unter Favorites > PageName können Sie die Zielseite auswählen, die bei Be-
tätigung der Schaltfläche angezeigt werden soll.
• Unter Favorites > LocalizableText können Sie der Schaltfläche einen in der
Sprache umschaltbaren Text zuordnen.
7. Betätigen Sie die Schaltfläche OK, um die Änderungen zu übernehmen.
Wie kann ich eine Visualisierung mit absolutem Layout skalieren?

Projekte, die in einem fixen Design angelegt wurden (FixTop oder FixClassical), sind grundsätz-
lich für eine bestimmte Auflösung gestaltet. Wenn sich im Rahmen von neuer Hardware oder
weiteren Bediengeräten mit ähnlichen Auflösungen jedoch die Anforderung ergibt, die bereits
verfügbare Visualisierung weiter zu nutzen, ohne die Position der einzelnen Steuerelemente
ändern zu müssen, kann dies mithilfe eines speziellen Layout-Elementes erfüllt werden.
Das viewBox-Steuerelement ist in den Seitenvorlagen von Projekten mit fixem Design bereits
integriert. In der Dokumentstruktur liegt es unterhalb einer Page und beinhaltet ein Absolu-
teLayout als Kindelement. Die Objekte, die sich innerhalb des AbsoluteLayouts befinden, wer-
den skaliert, wenn die Eigenschaft Stretch mode der viewBox auf uniform gesetzt wird und die
originale Auflösung des Endgeräts in den Eigenschaften Width und Height im AbsoluteLayout
EASY UI Designer
Version: 3.0
27.04.2023 Page 24/130
eingetragen ist (s. Readme.html im FixTop und FixClassical-Projekt). Mittels der Eigenschaft
Stretch Direction kann konfiguriert werden, in welche Richtung die Skalierung sich auswirken
soll.
Was muss ich bei der Projektierung von responsiven

Visualisierungen beachten?
Die dafür erforderliche Logik hat Konsequenzen in Bezug auf die Positionierung der Elemente.
Folgende Aspekte sind wichtig für die Erstellung einer solchen Anwendung.
• Der Container für die Steuerelemente ist ein FlexLayout. Es ordnet die enthaltenen
Elemente automatisch zeilen- oder spaltenweise an, je nach Einstellung der Eigen-
schaft orientation des FlexLayouts. Das FlexLayout kann die „überschüssigen“ Ele-
mente einer Zeile in die nächste Zeile verschieben, wenn z. B. das Browserfenster
verkleinert wird.
• Elemente im FlexLayout können nicht absolut mit x- und y-Koordinaten in den Eigen-
schaften top/bottom/left/right platziert werden, da ihre Position automatisch ermit-
telt wird. Die Position von Elementen kann in diesem Ansatz durch folgende
Eigenschaften verändert werden.
o orientation legt fest, ob die Elemente vertikal oder horizontal angeordnet
werden sollen
o alignItems gibt an, wie die Elemente im Container positioniert werden -
diese Eigenschaft funktioniert nur, wenn die Eigenschaft wrap nicht selek-
tiert ist
o justifyContent definiert, ob alle Komponenten hintereinander oder mit ei-
nem Abstand zueinander platziert werden
o alignContent stellt die Verteilung von Elementen im Container ein – diese
Eigenschaft funktioniert nur, wenn die Eigenschaft wrap aktiviert worden ist
Was bewirkt die Eigenschaft orientation?

Die Eigenschaft orientation legt fest, wie die Elemente angeordnet werden.
Das linke Bild zeigt die zeilenweise Anordnung (horizontal), rechts ist die spaltenweise Aus-
richtung (vertical) zu sehen.
EASY UI Designer
Version: 3.0
27.04.2023 Page 25/130
Was bewirkt die Eigenschaft wrap?
Ist die Eigenschaft wrap auf true
gesetzt, bewirkt dies, dass Ele-
mente, die nicht mehr genügend
Platz in der Breite bzw. Höhe des
Containers haben, in die nächste
Zeile umgebrochen werden. Wie
dieses Element dargestellt wird
legt die Eigenschaft overflow fest.
Overflow kann die Werte visible,

hidden, scroll oder auto anneh-
men.
Was bewirkt die Eigenschaft alignItems?

Die Eigenschaft alignItems gibt an, ob die Positionierung der Elemente am Anfang (start), in
der Mitte der Seite (center) oder am Ende der Ansicht (end) erfolgen soll, baseline ordnet alle
auf Basis des Elements mit den größten Dimensionen an, während stretch alle Elemente auf
eine einheitliche Größe skaliert.
Diese Eigenschaft funktioniert nur, wenn die Eigenschaft wrap auf false gesetzt ist.
EASY UI Designer
Version: 3.0
27.04.2023 Page 26/130
Was bewirkt die Eigenschaft justifyContent?
Die Eigenschaft justifyContent definiert, ob alle Komponenten direkt hintereinander platziert
werden sollen (start/center/end) oder ob es einen gleichmäßigen Abstand zwischen den Kom-
ponenten geben soll (space-between, space-around, space-evenly).
Was bewirkt die Eigenschaft alignContent?

Die Eigenschaft alignContent stellt die Verteilung von Elementen im Raum ein. Die Eigenschaf-
ten entscheiden darüber, ob die Elemente am Anfang des Containers ausgerichtet werden
sollen (start), in der Mitte (center), am Ende (end) oder ob sie gleichmäßig verteilt (space-
around) oder am Rand ausgerichtet werden (space-between).
Diese Eigenschaft funktioniert nur, wenn die Eigenschaft wrap ebenfalls aktiviert worden ist
EASY UI Designer
Version: 3.0
27.04.2023 Page 27/130
Wie ist das Responsive Layout aufgebaut?
Das Responsive-Layout besitzt ein Menü, über das die verschiedenen Ansichten aufgerufen
werden können. In diesem Layout können die Elemente durch die dafür erforderliche Logik
nicht absolut positioniert werden.
Was muss ich bei der Projektierung von responsiven Visualisierungen beachten?
AppDrawHeader AppBar
AppNavMenu
Die Schaltflächen (Benutzer) und (Einstellungen) in der Kopfzeile beziehen sich auf
die Server-seitigen Funktionen Benutzerverwaltung und Sprachumschaltung.
EASY UI Designer
Version: 3.0
27.04.2023 Page 28/130
Dokumentgliederung
Die zugehörige Hauptansicht „AppShell.html“ enthält in der Dokumentgliederung unter ande-
rem die Elemente AppDrawerHeader, AppNavMenu, AppBar und AppPageNavigator.
• Der AppDrawerHeader enthält ein Image- und ein Label-Element für das Menü.
• Das AppNavMenu enthält die Elemente für die einzelnen Menüeinträge.
• Die AppBar enthält die Elemente der Kopfzeile.
Page.html“.
nen.
Wie kann ich dem Responsive-Menü weitere Elemente

hinzufügen?
Das Menü enthält in der Voreinstellung bereits Menüeinträge, Submenüs und Trennstriche.
Weitere Elemente können Sie einfach per Copy & Paste hinzufügen.
So erweitern Sie das Menü um weitere Elemente:
1. Sofern noch nicht geschehen, öffnen Sie die Hauptansicht „AppShell.html“ im Desig-
ner-Arbeitsbereich.
2. Selektieren Sie im Designer-Arbeitsbereich einen vorhandenen Menüeintrag, ein vor-
handenes Submenü oder einen vorhandenen Trennstrich (je nachdem, was für ein
Element Sie dem Menü hinzufügen möchten).
3. Wählen Sie im Kontextmenü (rechte Maustaste) den Befehl Copy und anschließend
den Befehl Paste.
• Das kopierte Element wird am Ende des Menüs eingefügt.
• Wir empfehlen, zunächst alle benötigten Menüelemente dem Menü hinzu-
zufügen und erst anschließend die Reihenfolge der Elemente und dessen Ei-
genschaften festzulegen.
4. Wenn Sie weitere Elemente hinzufügen möchten, wiederholen Sie die Schritte 2
und 3.
5. Passen Sie die Reihenfolge der Elemente an.
Wie kann ich im Responsive-Menü die Reihenfolge der Menüele-

mente ändern?
So ändern Sie die Reihenfolge der Menüelemente:
1. Sofern noch nicht geschehen, öffnen Sie die Hauptansicht „AppShell.html“ im Desig-
ner-Arbeitsbereich.
EASY UI Designer
Version: 3.0
27.04.2023 Page 29/130
2. Um die Reihenfolge der Hauptelemente anzupassen, selektieren Sie in der Doku-
mentgliederung das AppNavMenu-Element.
• Um die Reihenfolge von Submenüeinträgen zu ändern, selektieren Sie in der
Dokumentgliederung stattdessen das entsprechende Submenu-Element.
3. Klicken Sie im Eigenschaftenfenster unter Menu > MenuItems (Collection) auf die
Schaltfläche .
Das Dialogfeld „Collection Editor“ wird angezeigt:
4. Nehmen Sie die gewünschten Anpassungen vor.

• Über die Schaltflächen können Sie die Position des selektierten Ele-
ments innerhalb des Menüs ändern.
• Über die Schaltfläche Add können Sie einen Menüeintrag hinzufügen.
Unter Navigation > PageName können Sie die Zielseite auswählen, die bei
Auswahl des Menüeintrags angezeigt werden soll.
• Unter Text > LocalizableText können Sie dem Menüeintrag einen in der
Sprache umschaltbaren Text zuordnen.
5. Betätigen Sie die Schaltfläche OK, um die Änderungen zu übernehmen.
Wie kann ich eine neue Seite (page), Ansicht (view) oder einen
Dialog hinzufügen?
Über den Projekt-Explorer können Sie dem Projekt eigene Inhalte hinzufügen.
So fügen Sie eine leere Seite hinzu:
EASY UI Designer
Version: 3.0
27.04.2023 Page 30/130
1. Klappen Sie den Ordner [Projekt]_Client > Design auf.
2. Klicken Sie mit der rechten Maustaste auf den entsprechenden Unterordner pages,
views oder dialogs, um dessen Kontextmenü zu öffnen.
3. Wählen Sie im Kontextmenü den Befehl Neues Element hinzufügen.
Das Dialogfeld „Neues Element hinzufügen“ wird angezeigt:
4. Wählen Sie in der Ordnerstruktur auf der linken Seite den Ordner Pages, Views oder
Dialogs aus.
5. Wählen Sie im rechten Feld das gewünschte Layout aus.
6. Geben Sie in das Textfeld Dateiname einen Dateinamen für die Seite ein. Bei views
können Sie In den Eingabefeldern Höhe und Breite die Größe der Ansicht anpassen.
Alternativ stehen vorgefertigte Inhaltsseiten in den entsprechenden Unterordnern

zur Verfügung. Hier sind die Dateinamen vordefiniert und können nicht angepasst
werden.
7. Betätigen Sie die Schaltfläche Hinzufügen, um die Seite dem Projekt hinzuzufügen.
Die Seite wird automatisch im Designer-Arbeitsbereich geöffnet.
Was ist der Unterschied zwischen einer Page und einer View?
EASY UI Designer
Version: 3.0
27.04.2023 Page 31/130
Wie kann ich eine vorhandene HTML-Datei als Seite, Ansicht oder
Dialog hinzufügen?
Über den Projekt-Explorer können Sie dem Projekt eigene Inhalte hinzufügen.
So fügen Sie eine vorhandene HTML-Datei als Seite, Ansicht oder Dialog hinzu:
1. Klappen Sie den Ordner [Projekt]_Client > Design auf.
2. Je nachdem, ob die HTML-Datei als Seite, Ansicht oder Dialog hinzugefügt werden
soll: Klicken Sie mit der rechten Maustaste auf den entsprechenden Unterordner
pages, views oder dialogs, um dessen Kontextmenü zu öffnen.
3. Wählen Sie im Kontextmenü den Befehl Vorhandenes Element hinzufügen.
4. Wählen Sie im Auswahldialog die hinzuzufügende HTML-Datei aus.
5. Betätigen Sie die Schaltfläche Öffnen, um die HTML-Datei dem Projekt hinzuzufügen.
Wie kann ich Steuerelemente auf einer Seite oder Ansicht

einfügen?
Die zur Verfügung stehenden Steuerelemente finden Sie im Menüband Start im Bereich
Controls.
So fügen Sie ein Steuerelement auf einer Seite oder Ansicht ein:
1. Sofern noch nicht geschehen, öffnen Sie die zu bearbeitende Seite oder Ansicht im
Designer-Arbeitsbereich.
2. Wählen Sie im Menüband Start im Bereich Controls das gewünschte Steuerelement
aus.
3. Klicken Sie im Designer-Arbeitsbereich auf die Position, an der das Steuerelement
platziert werden soll.
4. Mit gedrückter linker Maustaste können Sie das Steuerelement im Arbeitsbereich
verschieben oder über die Ankerpunkte dessen Größe ändern.
5. Passen Sie im Eigenschaftenfenster die Eigenschaften des Steuerelements an.
Wie kann ich einem Steuerelement eine Action hinzufügen?

Wie kann ich einem Steuerelement eine Variable zuweisen?
Wie kann ich mehrere Steuerelemente zu einem eigenen

Steuerelement zusammenfassen?
Mit dem Benutzersteuerelement ist es möglich, aus mehreren Basis-Steuerelementen ein ei-
genes Steuerelement zusammenzusetzen, abzuspeichern und wiederzuverwenden. Dazu sind
folgende Schritte notwendig:
1. Navigieren Sie im Projektexplorer zum Ordner Design, öffnen Sie per Rechtsklick das
Kontextmenü und wählen sie dort Neues Element hinzufügen. Jetzt können Sie eine
EASY UI Designer
Version: 3.0
27.04.2023 Page 32/130
Vorlage für ein UserControl auswählen. Dabei stehen als Basislayout das FlexLayout
oder das AbsoluteLayout zur Verfügung.
2. Haben Sie sich für eine Variante entschieden, öffnet sich eine leere Seite, die mit
Steuerelementen aus dem Menü gefüllt werden kann.
3. Nachdem das Steuerelement fertig entworfen ist, kann man einzelne Eigenschaften
der Steuerelemente in das gesamte Steuerelement übernehmen, damit diese bei der
Projektierung des neuen Steuerelements im Eigenschaftenfenster zur Verfügung ste-
hen. Hierzu muss man dem Basiselement zuerst eine ID geben. Für dieses Beispiel
wurde das Switch-Element gewählt und als Name Switch vergeben.
EASY UI Designer
Version: 3.0
27.04.2023 Page 33/130
4. Nun klickt man in der eingeblendeten Kopfzeile des Fensters auf die Schaltfläche
Veröffentlichte Eigenschaften.
5. Es öffnet sich ein Dialog, in dem bereits die drei Eigenschaften width, height und
margin vorhanden sind. Durch Klick auf das + öffnet sich ein neues Fenster. In die-
sem wird das eben benannte Element selektiert. Nun kann die freizugebende Eigen-
schaft, ein geeigneter Name, eine Beschreibung und eine Kategorie ausgewählt wer-
den. Ein Klick auf OK veröffentlicht die Eigenschaft.
EASY UI Designer
Version: 3.0
27.04.2023 Page 34/130
6. Das Steuerelement ist nun im Hauptmenü neben den anderen Elementen verfügbar.
7. Es kann beliebig häufig auf Seiten platziert und über die freigegebenen Eigenschaften
angepasst werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 35/130
Wie kann ich meinem Steuerelement einen eigenen Style
zuweisen?
Um ein einheitliches Design zu gewährleisten und Zeit beim Gestalten der Steuerelemente
einzusparen, gibt es die Möglichkeit, für jedes Steuerelement einen eigenen Style abzuspei-
chern und wiederzuverwenden.
Dazu sind folgende Schritte nötig:

1. Platzieren Sie das gewünschte Steuerelement auf einer Seite und selektieren Sie es.
2. Wählen Sie im Menüband unter Start > Style. Hier gibt es folgende Optionen, die alle
in eine Styling-Ansicht führen, in der Eigenschaften als Standard für das Steuerele-
ment definiert werden können
a. Aktuellen bearbeiten: diese Option ist nur verfügbar, wenn bereits ein Style
für das Steuerelement angelegt ist
b. Kopie bearbeiten: möchte man auf einem Style eines Controls aufsetzen
(z.B. VisiWin.UI.Button.Lenze.Default) und nur zusätzlich ein paar Eigen-
schaften setzen, wählt man diesen Eintrag
c. Neuen erstellen: diese Option versetzt das Steuerelement in seinen
(ungestylten) Default-Zustand, so dass es nun von Grund auf gestaltet wer-
den kann
Die beiden Optionen Kopie bearbeiten und Neuen erstellen öffnen folgendes Dialogfenster, in
dem ein neuer Name für den Style vergeben wird.
EASY UI Designer
Version: 3.0
27.04.2023 Page 36/130
Die Style-Familie dient als Bezeichnung zur Gruppierung von Steuerelementen, die stilistisch
zusammengehören. Beispielsweise sind alle Steuerelemente unter der Bezeichnung Lenze vi-
suell konsistent zueinander gestaltet, so dass die Nutzung aller Objekte dieser Klasse zu einem
einheitlichen Look & Feel führt.
Der Name beschreibt die verschiedenen Ausprägungen des Steuerelements in der Style-Fami-
lie. So hat der Button in der Lenze-Familie beispielsweise die Style-Arten Default und
Outlined.
In der Styling-Ansicht stehen mehr Eigenschaften zur Verfügung, da hier die Gestaltung im
Vordergrund steht. Über die Checkboxen neben den Eigenschaften kann sich der Nutzer das
Eigenschaftenmenü für das Steuerelement selbst konfigurieren. Alle selektierten Eigenschaf-
ten sind dann im Eigenschaftenfenster jeder Instanz des Steuerelements verfügbar, unselek-
tierte werden ausgeblendet.
Wurden alle Eigenschaften in der Styling-Ansicht konfiguriert, speichert und schließt man die
Seite. Das ursprünglich ausgewählte Steuerelement nimmt automatisch den eben angelegten
Style an. Er kann auf alle anderen Instanzen des Steuerelements durch Auswahl des entspre-
chenden Eintrags in der Style-Eigenschaft gesetzt werden.
Was ist eine Region und wie arbeite ich mit ihnen?
Regions sind Elemente, mit denen sich eine Visualisierung strukturieren und Inhalte zur Lauf-
zeit ausgetauscht werden können. Sie können als Platzhalter verstanden werden, in die Views
geladen werden.
Beispiele für eine Region finden sich in den Menü-Vorlagen für das FixClassical- und das
FixTop-Layout (AppShell.html). Hier ist die Seite in verschiedene Bestandteile unterteilt wor-
den, die für mehr Übersichtlichkeit in der Dokumentgliederung sorgen. Kopf- und ggf. Fußzei-
len sind eigene Views, die durch das Region-Steuerelement über die Eigenschaft Navigation >
viewName referenziert werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 37/130
Die Inhaltsseiten werden durch ein anderes Platzhalter-Element namens AppPageNavigator
ausgetauscht. Hier werden im Unterschied zur Region Pages statt Views zur Laufzeit hineinge-
laden.
Welche Dialoge gibt es und wie zeige ich sie an?

Dialoge sind Pop-up-Fenster, die sich über den Bildschirm legen und eine Benutzerinteraktion
erfordern. Es gibt bereits einige Dialoge, die direkt genutzt werden können:
• Meldung anzeigen (AlertDialog.html):
o z.B. für Warnhinweise oder Systemmeldungen einzusetzen
o kann nicht stilistisch angepasst werden
• Rezeptdialoge:
o Rezept laden (LoadRecipe.html)
o Rezept speichern (SaveRecipe.html), speichern als (SaveAsRecipe.html)
o Rezept löschen (DeleteRecipe.html)
• Benutzerverwaltungsdialoge:
o Benutzer anlegen (AddUserDialog.html)
o Benutzer wechseln (ChangeUserDialog.html)
o Passwort ändern (ChangePasswordDialog.html)
o Benutzer anmelden (LogonDialog.html)
o Benutzer abmelden (LogoutDialog.html)
o Benutzer löschen (RemoveUserDialog.html)
o Benutzereinstellungen (UserDialog.html)
• Tastaturen:
o Alphanumerische Tastatur (AlphabeticalKeyboardDialog.html)
o Numerische Tastatur (NumericKeyboardDialog.html)
• Allgemeine Einstellungen zu Sprache/Theme (SettingsDialog.html)
• Vorlage für eigenen Dialog (ContentDialog.html)
Um Dialoge anzuzeigen, wird die ShowDialogAction benötigt, im Fall des AlertDialogs die
ShowAlertDialogAction. Möchte man beispielsweise einen Dialog durch Klick auf ein Steue-
relement öffnen, sind die folgenden Schritte nötig.
EASY UI Designer
Version: 3.0
27.04.2023 Page 38/130
1. Durch Auswahl der Schaltfläche + wird der in
der DropDownBox sichtbare ControlEventTrig-
ger zum Element hinzugefügt. In den Einstellun-
gen ist auswählbar auf welches Ereignis er rea-
gieren soll, z.B. onButtonClick.
2. Ein Rechtsklick auf den Trigger und Auswahl
von Add new action öffnet ein Dialogfenster, in
dem alle verfügbaren Actions aufgelistet sind
und selektiert werden können.
3. In den darunter stehenden Eigenschaften der
Action kann der entsprechende Dialog eingetra-
gen werden. Die Option Mode gibt an, ob eine
Interaktion mit dem Fenster erforderlich ist
(„modal“) oder ob die Oberfläche im Hinter-
grund weiterhin bedient werden kann
(„nonmodal“).
Wie rufe ich Tastatur-Dialoge auf?

Es gibt zwei verschiedene Tastaturen (alphanumerisch/numerisch), die bei Bedarf an Eingabe-
Elemente wie das NumericVarIn und das TextVarIn angebunden werden können. Dafür müs-
sen die Dialoge AlphabeticalKeyboardDialog.html bzw. NumericKeyboardDialog.html im Cli-
ent-Ordner unter dialogs > keyboards abgelegt sein. Den Aufruf des entsprechenden Dialogs
projektiert man am Steuerelement selbst durch das Anbinden der Action Lenze.Actions.Show-
KeyboardDialogAction an den ControlEventTrigger. Je nach Elementtyp wird die alphanumeri-
sche bzw. die numerische Tastatur durch Klick auf das Eingabefeld zur Laufzeit angezeigt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 39/130
4 Actions
Wie kann ich einem Steuerelement eine Action hinzufügen?

So fügen Sie einem Steuerelement eine Action hinzu:
1. Wählen Sie in der Dokumentgliederung oder im Designer-Arbeitsbereich das Steue-
relement aus, dem Sie eine Action zuweisen möchten.
2. Klicken Sie im Eigenschaftenfenster auf die Schaltfläche , um die Einstellungen für
Actions anzuzeigen.
3. Wählen Sie im Listenfeld den Trigger aus, der die Action auslösen soll:
4. Klicken Sie auf die Schaltfläche , um den gewählten Trigger dem Steuerelement
hinzuzufügen.
5. Klicken Sie mit der rechten Maustaste auf den hinzugefügten Trigger und wählen Sie
im Kontextmenü den Befehl Neue Action hinzufügen.
Das Dialogfeld „Neue Action hinzufügen“ wird angezeigt:
EASY UI Designer
Version: 3.0
27.04.2023 Page 40/130
6. Wählen Sie im Dialogfeld „Neue Action hinzufügen“ die gewünschte Action aus.
7. Schließen Sie das Dialogfeld über die Schaltfläche OK.
8. Passen Sie die Eigenschaften der Action an.
Tipp: Einem Trigger lassen sich auch mehrere Actions zuweisen.

Tipp: Einige Actions sind auch als vordefinierte Bausteine im Menüband unter
Start > Functions zu finden und können per Drag & Drop auf Elemente angewendet werden.
Welche Trigger gibt es, um eine Action auszulösen?

Als Auslöser für eine Action muss dem Steuerelement im Eigenschaftenfenster in den Einstel-
lungen für Actions zunächst mithilfe des +-Symbols ein Trigger hinzugefügt werden. Dieser
beschreibt auf welches Ereignis hin eine Funktion aufgerufen werden soll.
Folgende Trigger stehen zur Auswahl:
• ControlEventTrigger – Der ControlEventTrigger löst aus, wenn ein Element ein
bestimmtes Ereignis generiert. Das auslösende Ereignis definieren Sie über die Trig-
ger-Eigenschaft EventName, beispielsweise „onButtonClick“ für den Klick auf eine
Schaltfläche. Die Auswahl an verfügbaren Ereignissen hängt vom Steuerelement ab.
Die gängigsten sind:
o onClick – ausgelöst durch Klick/Touch (onDown + onUp)
auf das Steuerelement
o onDown – ausgelöst durch Herunterdrücken der Maustaste bzw. Berühren
des Bildschirms
o onUp – ausgelöst durch Loslassen der Maustaste bzw. Heben des Fingers
o onInitialized – ausgelöst beim ersten Laden des Steuerelements
(Anmerkung: beim Dialog ist dies bei jedem Öffnen der Fall)
o onAttached – ausgelöst bei jedem erneuten Laden des Steuerelements
o onDetached – ausgelöst bei jedem Schließen des Steuerelements
Weitere beziehen sich z.B. auf Statusänderungen wie hover, visibility, value, etc.
• ControlPropertyTrigger – Der ControlPropertyTrigger wird ausgelöst, wenn sich eine
Eigenschaft eines Controls ändert. Das auslösende Ereignis kann über die Eigenschaft
PropertyName definiert werden,
• VariableTrigger – Der VariableTrigger löst aus, wenn sich eine Variable ändert. Den
Namen der Variable und die auslösende Eigenschaft (z.B. value für den Wert) werden
über variableName und variableProperty definiert.
Welche Actions gibt es?

Nach der Auswahl eines Triggers für ein Steuerelement kann dem Trigger entweder über das
+-Symbol oder über das Kontextmenü (rechte Maustaste) und den Befehl Neue Action hinzu-
fügen die gewünschte Action hinzugefügt werden.
Im Dialogfeld „Neue Action hinzufügen“ sind die Actions thematisch in folgende Kategorien
einsortiert:
EASY UI Designer
Version: 3.0
27.04.2023 Page 41/130
• Variable – Die Kategorie „Variable“ enthält Actions zum Ändern von Variablenwer-
ten.
• User – Die Kategorie „User“ enthält Actions der Benutzerverwaltung (Einloggen, Aus-
loggen, Passwort ändern)
• Theme & Style – Die Kategorien „Theme“ und „Style“ enthalten Actions zum Ändern
des Designs der Visualisierung.
• Property – Die Kategorie „Property“ enthält Actions zum Ändern von Eigenschaften
eines Elements.
• Language – Die Kategorie „Language“ enthält Actions zur Sprachumschaltung.
• Dialog – Die Kategorie „Dialog“ enthält Actions für Dialoge, beispielsweise einen Hin-
weisdialog anzeigen oder auf eine Antwort im Dialog reagieren.
• Class – Die Kategorie „Class“ enthält Actions zum Anbinden von Klassen. Über Klas-
sen ist beispielsweise ein Wechsel zwischen zwei Stati möglich.
• Actions – Die Kategorie „Actions“ enthält Actions für grundlegende Funktionen, bei-
spielsweise die Anzeige einer bestimmten Seite oder das Quittieren eines Alarms.
Jede Action verfügt über Eigenschaften, die sich im Eigenschaftenfenster anpassen las-
sen.
Wie setze ich Eigenschaften mit der setPropertyAction?

Die Veränderung von Eigenschaften eines Controls kann mithilfe der setPropertyAction gelöst
werden. In diesem Beispiel wird die Farbe eines Buttons als Reaktion auf eine Variablenände-
rung umgeschaltet. Wenn der Variablenwert false ist, soll der Button grün dargestellt werden,
sonst rot.
Der VariableTrigger wird über das +-Symbol zum Button hinzugefügt. In den Einstellungen des
Triggers wird die gewünschte Variable verbunden, in diesem Beispiel eine boolesche Variable.
Durch Rechtsklick auf den Trigger öffnet sich ein Auswahlfenster, in dem die setPropertyAc-
tion ausgewählt werden muss. In den Eigenschaften der Action wird folgendes eingetragen:
EASY UI Designer
Version: 3.0
27.04.2023 Page 42/130
Bedingung
• die Bedingung ist optional und kann mithilfe der Checkbox aktiviert werden
• als Operand kann durch das Dropdown-Menü der Wert des Triggers (trigger value) oder
eine Variable ausgewählt werden; es ist zusätzlich möglich konkrete Werte in das Text-
feld zu schreiben
• als Operatoren stehen folgende zur Verfügung:
o > (größer) und >= (größer gleich)
o < (kleiner) und <= (kleiner gleich)
o == (gleich) und != (ungleich)
o <> (innerhalb) und !<> (außerhalb); die Grenzwerte müssen bei diesen Operato-
ren durch zwei Punkte getrennt werden, z.B. Variable1 <> 1..20
Aktion
• set property: Eigenschaft, die gesetzt werden soll; in diesem Fall die Hintergrundfarbe des
Buttons BackgroundColor
• of target: das Element, auf das die Änderung angewendet werden soll, hier es das
Button-Element selbst, also self
Hinweis: wenn ein anderes Element verändert werden soll, muss diesem vorher eine ID
gegeben und diese im Dropdown-Menü selektiert werden
• to: gewünschter Wert; in diesem Fall die Farbe, die der Button annehmen soll, wenn die
Bedingung erfüllt ist (@SuccessColor)
Hinweis: wenn eine Kollektion von Werten angelegt wurde (Zuordnungstabelle), kann
diese mittels Klick auf das Rechteck ausgewählt werden; in einem separaten Dialog wer-
den alle Zuordnungstabellen angeboten, die zu der ausgewählten Eigenschaft kompatibel
sind
EASY UI Designer
Version: 3.0
27.04.2023 Page 43/130
• else to: eine Alternative ist optional und kann mithilfe der Checkbox aktiviert werden; in
diesem Beispiel soll der Button rot dargestellt werden, wenn die Bedingung nicht erfüllt
ist (@ErrorColor)
Was sind Zuordnungstabellen und wie lege ich sie an?

Zuordnungstabellen sind Listen von Eingangs- und Ausgangswerten und dienen dazu dyna-
misch auf verschiedene Variablenwerte reagieren zu können.
Als Eingangswerte sind numerische Datentypen erlaubt. Die Ausgabewerte sind Strings, je
nach Tabellentyp. Es stehen folgende Arten von Zuordnungstabellen zur Verfügung:
Text:
"name": "textCollection1",
"propertyType": "text",
"states": [
{
"value": "<0",
"propertyValue": "Text <0"
},
{
"value": "0",
"propertyValue": "Text 0"
},
{
"value": "1..20",
"propertyValue": "Text 1..20"
},
{
"value": "21,23,25,27,29",
"propertyValue": "Text 21,23,25,27,29"
},
{
"value": "22,24,26,28",
"propertyValue": "Text 22,24,26,28"
},
{
EASY UI Designer
Version: 3.0
27.04.2023 Page 44/130
"value": ">=30",
"propertyValue": "Text >30"
}
]
},
Farben:
{
"value": ">=30",
"propertyValue": "black"
}
Bilder:
{
"value": "1..20",
"propertyValue": "images/bitmaps/flags/germany.png"
}
Die entsprechenden Dateien finden sich im Client-Ordner des Projekts unter resources/state-
collections. Anpassungen können in einem Texteditor vorgenommen werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 45/130
5 Variablen
Wie lege ich eine Symbolkonfiguration an?

Die Variablen, die im EASY UI Designer an Elemente gebunden werden, stammen aus einem
SPS-Projekt. Im PLC Designer werden sie in einer expliziten Datei „ProjectName.applica-
tion.xml“ zusammengefasst. Diese ist auch als Symbolkonfiguration bekannt und wird unter
Application > Add object > Symbol configuration erstellt. Mehr Informationen zum PLC Desig-
ner finden Sie in der dort integrierten Hilfe.
EASY UI Designer
Version: 3.0
27.04.2023 Page 46/130
Wie kann ich Variablen aus einem PLC-Projekt importieren?
Um Daten der Maschinen anzuzeigen oder Benutzereingaben an die Maschine weiterzuleiten,
müssen die visuellen Elemente mit den entsprechenden Variablen des PLC-Projekts verknüpft
werden.
Erforderliche Einstellungen im Projektkonfigurator (Vorschalttool):
Im Projektkonfigurator lässt sich unter Projekt > Kommunikation die erforderlichen Daten aus
dem PLC Designer verknüpfen. Symbolkonfiguration (.xml) Ihres PLC-Projekts auswählen.
Hier gibt es drei Optionen:
• PLC Projekt
Bei dieser Option zeigt der Projektkonfigurator automatisch die letzte bearbeitete
*.project-Datei an, wenn sich das PLC-Projekt auf dem gleichen PC befindet.
• EASY Export
Über die Schaltfläche … wählt man die gewünschte easyuilpk-Datei aus. Das *.easyuilpk
ist ein lenzespezifisches Austauschformat für Daten zwischen dem PLC Designer und dem
EASY UI Designer. Die Datei kann im PLC Designer generiert werden. Sie enthält neben
Variableninformationen (Symbolkonfiguration) auch alle Inhalte, die für die FAST-Dienste
erforderlich sind.
• Symbolkonfiguration
Die im PLC Designer erstellte Symbolkonfiguration enthält alle Variableninformationen
aus der PLC, die für die Visualisierung freigegeben werden sollen. Die xml-Datei muss im
PLC Designer erstellt werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 47/130
Erforderliche Schritte im EASY UI Designer:
1. Klicken Sie im Projekt-Explorer mit der rechten Maustaste auf den Knoten des neu hin-
zugefügten Kanals (Standard: Server > Variablen > Kanäle > Controller: OPC UA), um
dessen Kontextmenü zu öffnen.
2. Wählen Sie im Kontextmenü den Befehl Variablen browsen.
• Der Dialog für den gewählten Browser erscheint und zeigt die im Projektkonfigu-
rator ausgewählte Symbolkonfiguration an.
3. Betätigen Sie die Schaltfläche OK.
• In einem Dialog werden die Variablen der Kommunikationskomponente als
Baumstruktur angezeigt. Dabei bilden die einzelnen Zweige sogenannte
Namensräume, die Enden der Zweige die tatsächlichen auszuwählenden
Variablen ab.
4. Setzen Sie ein Häkchen bei den Variablen, die Sie importieren möchten.
Hinweis!
Achten Sie unbedingt auf die Anzahl der Variablen. In Strukturen können sich viele Variablen
verstecken, die nicht benötigt werden. Eine zu hohe Anzahl an Variablen führt zu Leistungs-
verlusten der Visualisierung und erfordert eine große Menge an Powertags!
5. Betätigen Sie die Schaltfläche OK, um die Auswahl zu übernehmen.
Die Variablendefinitionen werden nun in das Projekt importiert. Im Projekt-Explorer ist die
Namensraumstruktur der Variablen unter dem Knoten des entsprechenden Kanals sichtbar.
Wie kann ich mir Variablendefinitionen anschauen und

bearbeiten?
Wählen Sie im Projekt-Explorer unter [Projekt]_Server > Variablen > Kanäle den Kanal und da-
rin den Namensraum aus, der die zu bearbeitenden Variablen enthält.
Durch Selektion eines Elements öffnen sich die darin definierten Variablen im Tabelleneditor.
• Eine Zeile repräsentiert eine Variablendefinition.
• In den Spalten werden einige ausgewählte Parameter der Variablendefinition ange-
zeigt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 48/130
Sie können die als Spalten angezeigten Parameter des Tabelleneditors anpassen.
Um die angezeigten Spalten anzupassen, klicken Sie mit der rechten Maustaste auf den Tabel-
leneditor und wählen Sie Optionen aus dem Kontextmenü. Mithilfe der Pfeile zwischen den
Listen können die angezeigten Spalten auf der rechten Seite verändert werden.
Den Zugriff auf alle Parameter einer Variablendefinition bietet das Fenster Eigenschaftensei-
ten, wenn Sie die Zeile der Variablendefinition im Tabelleneditor anklicken.
Wie kann ich einem Steuerelement eine Variable zuweisen?

So weisen Sie einem Steuerelement eine Variable zu:
1. Fügen Sie im Designer-Arbeitsbereich ein Steuerelement, beispielsweise
NumericVarOut, auf einer Seite oder Ansicht ein.
2. Klicken Sie im Eigenschaftenfenster unter Variable > VariablenName auf die Schalt-
fläche .
Das Dialogfeld „Variable auswählen“ wird angezeigt:
EASY UI Designer
Version: 3.0
27.04.2023 Page 49/130
3. Wählen Sie im Namensstrukturbaum die Variable aus, die dem Steuerelement zuge-
wiesen werden soll.
4. Schließen Sie das Dialogfeld über die Schaltfläche OK.
Wie kann ich Grenzen bei einer Variablen einstellen?

Steuerelemente können alle Werte der angebundenen Variablen annehmen bzw. anzeigen.
Dieser durch den Datentyp der Variablen festgelegte Wertebereich kann weiter eingegrenzt
werden. Die Grenzwerte können entweder direkt im Steuerelement festgelegt oder aus der
Variablendefinition bezogen werden.
Unabhängig von der Art der Grenzdefinition ist die Eigenschaft isLimitCheckEnabled im Eigen-
schaftenfenster unter der Kategorie Limits des Steuerelements zu aktivieren.
Sind bereits Grenzwerte in der Variablendefinition vorhanden, können diese durch das Setzen
der Eigenschaft useVariableLimits genutzt werden.
Alternativ können Minima und Maxima direkt am Steuerelement durch RawLimitMin und
RawLimitMax eingestellt werden. Sie können auch zusätzlich zu den Grenzwerten aus der Va-
riablendefinition genutzt werden, um Wertebereiche noch weiter einzuschränken, z.B. wenn
für eine bestimmte Nutzergruppe weitere Einschränkungen gelten sollen.
EASY UI Designer
Version: 3.0
27.04.2023 Page 50/130
Welche Variablentypen gibt es und wofür nutze ich sie?
Prozessvariablen sind die Prozesswerte, die im SPS-Programm definiert worden sind und den
aktuellen Status der Maschine reflektieren. Sie werden eindeutig über Ihre Adresse/ItemID
identifiziert und kennzeichnen sich durch einen bestimmten Datentyp.
Zusätzlich zur reinen Übertragung von Prozessdaten unterstützt eine Prozessvariablendefini-
tion u. a. folgende Sonderfunktionen:
• Angabe von Grenzwerten (Maximal-/Minimalwert)
• Angabe eines Ersatzwertes
• Zugriff auf Datenfelder
• Zugriff auf Strukturen
• Sprach-/variablenwertabhängige Umrechnung von Prozessvariablenwerten
Interne Variablen werden innerhalb der Applikation angelegt und haben kein Pendant in der
SPS. Sie können zu Testzwecken eingesetzt werden oder um Berechnungen zwischenzuspei-
chern. Sie werden im Server-Projekt unter dem Knoten Variablen > Kanäle > Intern angelegt,
indem im Tabelleneditor durch Rechtsklick der Eintrag Neu (F8) im Kontextmenü ausgewählt
wird.
EASY UI Designer
Version: 3.0
27.04.2023 Page 51/130
6 Sprachumschaltung
Wie kann ich eine neue Sprache zum Projekt hinzufügen?

In den meisten Fällen wird eine Visualisierung international vertrieben und muss an die ver-
schiedenen Märkte sprachlich angepasst werden. Im EASY UI Designer können Sie hierzu
Texte mehrsprachig anlegen. Das Ziel besteht darin, dass der Nutzer auf Knopfdruck alle Texte
der Visualisierung auf die ausgewählte Sprache umschalten kann.
Die momentan verfügbaren Sprachen sind:
• Englisch
• Deutsch
• Chinesisch
• Polnisch
• Russisch
• Holländisch
• Tschechisch
• Französisch
• Italienisch
• Spanisch
• Türkisch
• Schwedisch
Englisch und Deutsch sind standardmäßig integriert. Die restlichen Sprachen können Sie im
Projektkonfigurator unter Features > Sprachauswahl auswählen.
EASY UI Designer
Version: 3.0
27.04.2023 Page 52/130
Wie kann ich mir Texte anschauen und bearbeiten?
Alle Einstellungen zur Sprachumschaltung finden Sie im Projekt-Explorer unter
[Project]_Server > Sprachumschaltung.
Wenn Sie auf den Eintrag Sprachumschaltung > Konfiguration > Sprachen doppelklicken, wer-
den in einem Tabelleneditor alle im Projekt angelegten Sprachen angezeigt.
Alle weiteren Einträge unter Sprachumschaltung sind sogenannte Textgruppen, in denen die
eigentlichen Texte bzw. weitere Untergruppen mit Texten enthalten sind. Da die mitgeliefer-
ten Layouts bereits einige Texte enthalten, sind die meisten Textgruppen nicht leer.
Wenn Sie auf eine Textgruppe doppelklicken, werden in einem Tabelleneditor alle in dieser
Textgruppe enthaltenen Texte angezeigt:
Klicken Sie in ein Feld, um den entsprechenden Text zu bearbeiten. Über das Tabelleneditor-
Kontextmenü (rechte Maustaste) haben Sie weitere Optionen wie Texte hinzufügen, duplizie-
ren, löschen oder kopieren.
Wie kann ich einen mehrsprachigen Text hinzufügen?

Ihre eigenen Texte legen Sie in der Textgruppe Benutzertexte an. Die Textgruppe enthält be-
reits Texte und weitere Untergruppen mit Texten. Sie können Ihre eigenen Texte einer vor-
handenen Textgruppe hinzufügen oder für diese Texte auch eine neue eigene Untergruppe
erstellen. Zur besseren Orientierung ist es in vielen Fällen sinnvoll, Texte nach Ansichten/Sei-
ten zu kategorisieren.
So fügen Sie einen neuen Text einer Textgruppe hinzu:
1. Wenn die Textgruppe noch nicht geöffnet ist: Doppelklicken Sie im Projekt-Explorer
auf die entsprechende Textgruppe, um diese im Designer-Arbeitsbereich zu öffnen.
2. Wählen Sie im Tabelleneditor-Kontextmenü (rechte Maustaste) den Befehl Neu.
3. Geben Sie in die neu hinzugefügte Zeile den Namen für den Text, optional eine Be-
schreibung sowie die zugehörigen Texte in den erforderlichen Sprachen ein.
Beispiel: Name: „WelcomeText“, German: „Willkommen“, English: „Welcome“
EASY UI Designer
Version: 3.0
27.04.2023 Page 53/130
Über das Tabelleneditor-Kontextmenü (rechte Maustaste) haben Sie weitere Optionen wie
Texte hinzufügen, duplizieren, löschen oder kopieren.
Der neu hinzugefügte Text kann nun im Eigenschaftenfenster eines visuellen Elements über
die Eigenschaft LocalizableText dem Element zugewiesen werden.
Wie kann ich eine eigene Textgruppe für meine Texte hinzufügen?
So fügen Sie im Projekt-Explorer eine neue Untergruppe für Benutzertexte ein:
1. Klappen Sie den Ordner [Projekt]_Server > Sprachumschaltung auf.
2. Selektieren Sie den darin befindlichen Ordner Benutzertexte.
3. Betätigen Sie die Funktionstaste <F8>, um im selektierten Ordner eine neue Unter-
gruppe hinzuzufügen.
Die neue Textgruppe hat zunächst den Namen „Textgruppe1“. Den Namen können
Sie im Fenster Eigenschaftenseiten im Feld Name ändern.
Die neue Textgruppe wird automatisch im Designer-Arbeitsbereich geöffnet.
Wie kann ich einem Element einen mehrsprachigen Text zuwei-

sen?
Ein vorhandener mehrsprachiger Text kann im Eigenschaftenfenster eines visuellen Elements
über die Eigenschaft LocalizableText dem Element zugewiesen werden.
Für numerische Werte (z. B. Element NumericVarOut) kann auch die zugehörige Einheit mehr-
sprachig angelegt werden. Für solche Elemente erfolgt die Zuweisung der Texte über die Ei-
genschaft LocalizableUnitText.
Wie kann ich einen mehrsprachigen Text hinzufügen?
Wie funktioniert die Sprachumschaltung?

Die Sprache wird über die Action setLanguageAction umgeschaltet. In den Layout-Vorlagen
wird diese Action über das Steuerelement LanguageSelector im Dialog „SettingsDialog.html“
ausgelöst.
In der Visualisierung kann der Anwender diesen Dialog über die Schaltfläche (Einstellun-
gen) in der Kopfzeile öffnen:
EASY UI Designer
Version: 3.0
27.04.2023 Page 54/130
Die Schaltfläche ist in der Ansicht HeaderView.html enthalten und enthält die Action
ShowDialogAction zum Öffnen des Dialogs SettingsDialog.html.
Der Dialog SettingsDialog.html enthält einen LanguageSelector, der die Sprachen im System
automatisch ausliest und in der gerade gewählten Sprache zur Auswahl anbietet.
Die Liste der Sprachen ist im Eigenschaftenfenster des Steuerelements unter Menu Items in
der Eigenschaft MenuItemsLocalTextList verknüpft.
Wie füge ich dynamische Informationen zu lokalisierbaren Texten

hinzu?
Mit Hilfe des Dialogs Lokalisierbaren Text bearbeiten können Sie dynamische Daten in einen
lokalisierbaren Text einbinden:
• Variablenwerte in unterschiedlichen Formaten
• andere Texte aus dem Systemmodul Sprachumschaltung
• Datum und Uhrzeit
• Texte aus Alarmdefinitionen oder Alarmtypdefinitionen (ParentText)
Das Einbinden erfolgt mit Hilfe von Formatierungsanweisungen. Eine Formatierungsanwei-

sung beginnt und endet mit einem @-Zeichen und enthält Parameter, Trenn- und Formatie-
rungszeichen. Zur Laufzeit werden die Formatierungsanweisungen aufgelöst und z. B. der ak-
tuelle Wert der Variablen angezeigt.
Um den Dialog aufzurufen, öffnen Sie eine Definition im Tabelleneditor und klicken Sie im
Fenster Eigenschaftenseiten auf die Schaltfläche … neben dem Parameter Text.
Im Prinzip können Sie in jeden beliebigen lokalisierbaren Text eine oder mehrere Formatie-
rungsanweisungen einfügen. Daher steht der Dialog Lokalisierbaren Text bearbeiten in allen
Systemmodulen zur Verfügung, die mit lokalisierbaren Texten arbeiten.
EASY UI Designer
Version: 3.0
27.04.2023 Page 55/130
Variablenwert
Variablentext
Lokalisierbarer Text
Lokalisierbarer Text abhängig von einer Variable
SystemTime
ParentText
EASY UI Designer
Version: 3.0
27.04.2023 Page 56/130
7 Alarme
Wie ist das Alarmsystem aufgebaut?

Alle Einstellungen zu Alarmen finden Sie im Projekt-Explorer im Server-Ordner unter Alarme.
Hier können Sie unter anderem definieren, welche Variable einen Alarm auslöst, wie der
Alarm dargestellt wird und welche weiteren Informationen die Alarmmeldung enthalten soll.
Folgende grundlegende Definitionen sind konfigurierbar:
• Alarmgruppe: Eine Alarmgruppe fasst mehrere Alarme und ggf. weitere Unter-Alarm-
gruppen logisch zu einer Einheit zusammen.
• Alarm: Ein Alarm überwacht eine Prozessvariable und zeigt bei einem bestimmten
Zustand einen lokalisierten Text in der Oberfläche an.
• Alarmklasse: Eine Alarmklasse definiert verschiedene Einstellungen wie z. B. Farben
und Quittierungsart für einen Alarm.
• Alarmtyp: Ein Alarmtyp definiert eine komplexe Struktur für die Interpretation der
Prozessvariablen in einem Alarm.
• Zuordnung: Eine Zuordnung stellt die Beziehung zwischen einem Wert bzw. einem
Bit und den Daten einer vereinfachten Alarmdefinition her.
Zum besseren Verständnis dient die folgende Übersicht:
EASY UI Designer
Version: 3.0
27.04.2023 Page 57/130
Welche Schritte sind nötig, um das Alarmsystem aufzusetzen?
Um das Alarmsystem zu nutzen, sind einige Schritte in der folgenden Reihenfolge nötig:
1. Konfiguration der Alarmzustände:
Öffnen Sie den Knoten Alarme > Konfiguration. Im Eigenschaftenfenster sind die ver-
schiedenen Alarmzustände (z.B. aktiv, inaktiv,…) zu sehen. Selektieren Sie alle, die Sie
in Ihrer Visualisierung benutzen möchten.
2. Alarmklassen festlegen und konfigurieren:
Durch Auswahl des darauffolgenden Knoten Alarmklassen gelangen Sie in die Über-
sicht der Alarmklassen, die das Erscheinungsbild und die Quittierungsart der Alarme
als Vorlagen definieren.
3. Alarmtypen: Wenn numerische Alarme genutzt werden sollen, ist hier eine neue
Liste durch Auswahl von Neu aus dem Kontextmenü oder F8 zu erstellen.
4. Alarmgruppe anlegen, z.B. für alle Alarme eines Maschinenmoduls
5. Alarme in den Alarmgruppen anlegen
Welche Alarmzustände gibt es?
Zustand Status Beschreibung Quittierungsart

(bit-
codiert)
Zurück- Quittier- Doppelt quit- Nicht quittier-

setzen pflichtig tierpflichtig pflichtig
inaktiv/ 000 Der Alarm ist nicht aktiv bzw. x x x x

gelöscht** wurde gelöscht.
gekommen 100 Der Alarm ist aktiv. x x x x
gekommen 011 Der Alarm ist aktiv. Der Benut- -* x x x

quittiert zer hat den aktiven Alarm quit-
tiert.
gegangen 010 Der Alarm war aktiv, ist jetzt je- - x x -

doch nicht mehr aktiv. Der Be-
nutzer hat den Alarm im akti-
ven Zustand nicht quittiert.
quittiert 001 Der Alarm war aktiv. Der Be- - - x -

gegangen nutzer hat den Alarm im akti-
ven Zustand quittiert. Jetzt ist
der Alarm nicht mehr aktiv. Die
Deaktivierung des Alarms muss
erneut quittiert werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 58/130
Zustand Status Beschreibung Quittierungsart
(bit-
codiert)
reaktiviert 101 Der Alarm war inaktiv, ist je- - x x -

doch wieder aktiv geworden,
ohne dass er quittiert wurde.
Dieser Zustand ist nicht sta-
tisch. Er wird nur gemeldet.
Der Alarm geht wieder in den
gekommen-Zustand über.
* Die Quittierung eines Alarms dieser Quittierungsart setzt direkt das Ereignisbit zurück. Dies
setzt voraus, dass das Bit in der SPS nicht dauerhaft auf einem Zustand gehalten wird.
** Inaktiv und gelöscht ist derselbe Zustand. Vom zeitlichen Ablauf meint gelöscht, dass der
Alarm vorher aktiv/gekommen war. Der Übergang nach inaktiv wird in der Alarmhistorie als
Ereignis gelöscht aufgezeichnet. Ein Ereignis inaktiv gibt es nicht.
Was ist eine Alarmklasse und wofür wird sie genutzt?
Alarmklassen sind Vorlagen für Alarmparameter. Sie bestimmen das Erscheinungsbild und die
Quittierungsart von Alarmen.
Beispiele für Alarmklassen sind Fehler, Warnungen oder Infomeldungen. Einige Alarmklassen
sind bereits vordefiniert und können genutzt werden. Sie finden sich im Server-Projekt unter
Alarme > Alarmklassen. Die folgenden Eigenschaften werden tabellarisch angezeigt:
• Name
• Text
• Quittierungsart
• Einzelquittierpflichtig
• Speichern
• Kommentar
Weitere Eigenschaften können bei Bedarf über Rechtsklick und Auswahl von Optionen über
einen Auswahldialog zur Tabelle hinzugefügt werden.
Im Eigenschaftenfenster, das sich standardmäßig am unteren Bildschirmrand befindet, kön-
nen im Tab Common der Name, die Quittierungsart und die Darstellung konfiguriert werden.
In dem Tab Erweitert können die Farben der Icons eingestellt werden.
Das Anlegen neuer Alarmklassen wird in der aktuellen Version noch nicht vollständig unter-
stützt.
EASY UI Designer
Version: 3.0
27.04.2023 Page 59/130
Wie gruppiere ich Alarme?
Alarme werden in Alarmgruppen zu logischen Einheiten zusammengefasst. Um eine neue
Alarmgruppe anzulegen, klicken Sie im Projektexplorer im Server-Projekt auf den Knoten
Alarme > Alarmgruppen. Es öffnet sich eine Übersichtsseite, auf der mindestens die Gruppe
Systemalarme zu sehen ist, die automatisch angelegt wird und nicht umbenannt oder ge-
löscht werden kann. Sie beinhaltet alle Alarme der Serverapplikationen (z.B. Fehlermeldungen
der Kommunikation).
Ein Rechtsklick auf den grauen Bereich öffnet das Kontextmenü, in dem durch Klick auf Neu
eine neue Gruppe angelegt wird. In dem am unteren Bildschirmrand erscheinenden Eigen-
schaftenfenster können der Name, der Text, das Icon und weitere Einstellungen für die
Gruppe geändert werden.
Wie lege ich einen Alarm an?

Da jeder Alarm zu einer Alarmgruppe gehört, ist es vor der Erstellung eines einzelnen Alarms
erforderlich, eine Alarmgruppe anzulegen. Eine weitere Voraussetzung ist die Definition einer
Variable in der SPS, die den Alarm in der Visualisierung auslösen soll. Zu Testzwecken kann
eine interne Variable angelegt werden, d.h. eine Variable, die im EASY UI Systemmodul Vari-
ablen definiert ist, jedoch kein Pendant in einer SPS hat.
Ein neuer Alarm wird in dem entsprechenden Alarmgruppen-Knoten angelegt, zum Beispiel
unter Alarme > Alarmgruppen > Module1_Alarms. Im grauen Übersichtsfenster wird durch
Rechtsklick Neu ein Alarm erstellt. Die folgenden Parameter lassen sich in der Zeile einstellen:
• Name: Eindeutige Bezeichnung für den Alarm
• Typ: Numerisch oder Bit s. Alarmtypen
• Ereignisvariable: Bestimmt den Namen der Variablen, die den Alarm auslöst. Je nach
Alarmtyp hat die Ereignisvariable eine unterschiedliche Funktion.
• Bitnummer: Beim Alarmtyp Bit dient die Bitnummer zum Spezifizieren des auslösen-
den Bits.
• Text: Lokalisierbarer Text, der bei Auftreten des Alarms angezeigt wird.
• Priorität: Die Priorität legt die Wichtigkeit eines Alarms fest. Der ganzzahlige Wert
kann im Bereich 0 bis 231-1 (=2.147.483.647) liegen. Je höher der Wert ist, desto
wichtiger ist die Priorität.
• Alarmklasse: Verweis auf die Alarmklasse, die das Erscheinungsbild und andere Funk-
tionen des Alarms festlegt.
• Kommentar: Feld für optionale Notizen
Welche Alarmtypen gibt es und wie werden sie angewendet?

Numerisch: Numerische Alarme eignen sich, wenn Fehlercodes in Form von Zahlenwerten de-
finiert sind. Um die Fehlercodes mit den anzuzeigenden Alarminformationen zu verknüpfen,
ist es notwendig, eine Tabelle der Codes anzulegen.
Diese Tabelle wird im Serverprojekt unter Alarme > Alarmtypen > Numerisch im Kontextmenü
Neu oder durch <F8> erstellt. In den Zeilen lässt sich nun jeder Fehlercode mit verschiedenen
Parametern hinterlegen:
EASY UI Designer
Version: 3.0
27.04.2023 Page 60/130
• Name
• Wert
• Text
• Priorität
• Alarmklasse
• Kommentar
Bit: Bei Bit-Alarmen nutzt man ein spezielles Bit einer Variablen, um einen Alarm auszulösen.
Um Bit-Alarme anzulegen, wählt man im [Projekt]_Server > Alarme > Alarmgruppen den Kno-
ten aus, zu dem Alarme hinzugefügt werden sollen. In dem Tabelleneditor können nun mit F8
einzelne Alarme angelegt werden. In der Zelle Typ wird Bit gewählt, in der Spalte Ereignisvari-
able die auszulösende Variable gewählt und bei Bit das Bit spezifiziert, das den Alarm auslöst.
Wie verbinde ich Alarme mit einer numerischen Liste?

Wenn eine numerische Liste angelegt ist, müssen die Fehlercodes mit konkreten Alarmen ver-
knüpft werden. Dies geschieht mittels Zuordnungen.
Um eine Zuordnung erstellen zu können, müssen sowohl eine numerische Liste unter Alarme
> Alarmtypen > Numerisch als auch die entsprechenden Alarme in einer Alarmgruppe unter
Alarme > Alarmgruppe angelegt worden sein. Die Zuordnung lässt sich dann folgendermaßen
herstellen:
1. Auswahl eines Alarms in der Alarmgruppe
2. In der Eigenschaft Typ wählen Sie numerisch und in der Auswahlliste die bereits an-
gelegte, numerische Liste
3. Im Feld Ereignisvariable legen Sie den Verweis auf die auslösende Variable an
4. Klick Sie in das Feld Text und wählen Sie dort die Schaltfläche …, um den Dialog für
das Bearbeiten des lokalisierbaren Texts zu öffnen.
5. Im Dialog verknüpfen Sie die Text-Informationen aus den Alarmen durch Auswahl
des letzten Parameter-Icons ParentText und Klick auf Einfügen
Wie füge ich dynamische Informationen zu lokalisierbaren Texten hinzu?
Wie zeige ich Alarme in einer Alarmzeile an?

Das Steuerelement AlarmLineCollection ist für die Anzeige einer Alarmzeile zuständig. Es ist in
allen Vorlagen enthalten, kann aber auch im Menüband unter Start > System > AlarmLine aus-
gewählt werden.
Die AlarmLineCollection ist entsprechend des Namens eine Sammlung von Alarmen. Über die
Eigenschaft AlarmItems > AlarmLineItems und die Auswahl der Schaltfläche öffnet sich ein
Editor, in dem mehrere AlarmItems zu der Zeile hinzugefügt werden können. Dabei kann bei
jedem Item in der Eigenschaft Alarms > DesiredAlarmClasses eingetragen werden, welche
Alarmklassen angezeigt werden sollen (z.B. Systemalarm, Alarm). Zusätzlich sind in dieser An-
sicht auch Farben und Icons für die einzelnen AlarmLineItems konfigurierbar.
EASY UI Designer
Version: 3.0
27.04.2023 Page 61/130
8 Benutzerverwaltung
Wie kann ich Benutzergruppen anlegen?

Benutzer können im Server-Projekt unter Benutzerverwaltung projektiert werden.
1. Klicken Sie doppelt auf Benutzergruppen.
2. In dem sich nun geöffneten grauen Bereich haben Sie eine Übersicht über alle Benut-
zergruppen und können durch Rechtsklick Neu (F8) eine weitere anlegen.
3. ergeben Sie einen Namen, z.B. Operator und binden Sie ggf. einen lokalisierbaren
Text als Bezeichnung in der zweiten Spalte an.
4. In den Eigenschaftenseiten können Sie weitere gruppenspezifische Einstellungen vor-
nehmen:
• Zeit bis zum automatischen Abmelden
• Benutzer dieser Gruppe dürfen gelöscht werden
• Passworterneuerungsintervall
• Maximal erlaubte Anmeldeversuche
Wie kann ich Benutzer anlegen?

Benutzer sind an eine Benutzergruppe gebunden, so dass mindestens eine Gruppe angelegt
sein muss.
1. Klappen Sie im Projektexplorer unter Server > Benutzerverwaltung den Eintrag Be-
nutzergruppen auf. Hier sehen Sie die bereits angelegten Benutzergruppen.
2. Selektieren Sie die Benutzergruppe, zu der Sie einen Benutzer hinzufügen möchten.
3. Fügen Sie durch Rechtsklick Neu (F8) im nun geöffneten Bereich eine neue Zeile ein
und tragen Sie hier die Benutzerdaten und weitere Einstellungen ein.
Wie kann ich Rechte anlegen und zuweisen?

Eine rechteorientierte Benutzerverwaltung ist sinnvoll, wenn es Benutzergruppen gibt, die zu-
sätzlich auch Rechte besitzen, die die anderen Benutzergruppen nicht haben.
Sie werden an zwei Stellen einer Applikation verwendet:
• Benutzergruppen können mehrere Rechte zugeordnet werden.
• Einem Steuerelement kann über die Eigenschaft Authorization jeweils ein Recht
zugeordnet werden.
Rechte finden sich im Serverprojekt unter Benutzerverwaltung > Rechte. Sie können folgen-
dermaßen projektiert werden:
1. Ein neues Recht kann im Tabelleneditor durch F8 hinzugefügt werden. Es kann
beispielsweise „darf Rezept anlegen“ heißen.
2. Ist eine Zeile selektiert, werden unten in den Eigenschaften alle Benutzergruppen
aufgelistet, so dass die Zuordnung der Rechte für bestimmte Gruppen direkt vorge-
nommen werden kann.
EASY UI Designer
Version: 3.0
27.04.2023 Page 62/130
Wie kann ich einem Element ein Recht zuweisen?
Steuerelemente können in Abhängigkeit von den Rechten des angemeldeten Benutzers aus-
geblendet (hidden) oder gesperrt (disabled) werden. Für dieses Verhalten sind folgende
Eigenschaften zuständig:
• AuthorizationRight: Erwartet den Namen einer Rechtedefinition aus der Projektdatei.
Ein Benutzer, der über seine Gruppe einen Bezug auf das hier angegebene Recht hat,
darf das Steuerelement bedienen. Wird in der Eigenschaft kein Recht angegeben, ist
das Steuerelement immer freigeschaltet.
• AuthorizationMode : Die Eigenschaft legt fest, wie das Steuerelement bei der Autori-
sierung reagieren soll.
o Disabled: Bei fehlender Freigabe wird das Steuerelement deaktiviert, d. h.

es kann nicht bedient werden. Bei vielen Steuerelementen ist dieser Zu-
stand dann auch grafisch zu erkennen (z.B. indem die BorderColor und die
ForegroundColor auf grau eingestellt sind).
Wie das Steuerelement im Zustand Disabled zur Laufzeit aussieht, können
Sie zur Entwicklungszeit testen, wenn Sie die Eigenschaft Disabled aktivie-
ren.
o Hidden: Bei fehlender Freigabe wird das Steuerelement unsichtbar.
o Collapse: Diese Eigenschaft ist besonders in responsiven Anwendungen

sinnvoll. Bei fehlender Freigabe wird auch hier das Steuerelement unsicht-
bar, jedoch rücken die nachfolgenden Elemente in einem FlexLayout an den
Platz dieses Elements. Im AbsoluteLayout wird es lediglich ausgeblendet
und hat keine Auswirkung auf andere Elemente.
EASY UI Designer
Version: 3.0
27.04.2023 Page 63/130
9 Rezepte
Visualisierungsrezepte beschreiben Sätze von Prozesswerten. Diese legen üblicherweise die

Einstellungen einer Maschine zur Fertigung eines Produktes aus einer Produktpalette fest.
Über das Schreiben von Rezepten zur SPS kann damit zwischen den einzelnen zu fertigenden
Produkten umgeschaltet werden. Die Rezepte werden im PLC Designer festgelegt. Das im
EASY UI Designer verfügbare Template ist mit dem Baustein verknüpft und liest die Daten au-
tomatisch aus.
Wie aktiviere ich die Rezeptfunktion im EASY UI Designer?

Um das CoDeSys-Rezeptsystem im EASY UI Designer nutzen zu können, müssen folgende Ein-
stellungen im Projektkonfigurator vorgenommen werden.
1. Klappen Sie den Eintrag Features > Rezeptsystem auf und aktivieren Sie den
Toggle-Button, um die Vorlage für das Rezeptsystem zum Projekt hinzuzufü-
gen.
2. Laden Sie die CoDeSYS Export-Datei durch Klick auf das Icon herunter. Sie
enthält den erforderlichen SPS-Baustein für die Rezeptfunktion.
3. Pausieren Sie die Erstellung des Visualisierungsprojekts und wechseln Sie
zum PLC Designer.
In ihrem bereits angelegten SPS-Projekt im PLC Designer führen Sie bitte folgende Schritte
durch:
EASY UI Designer
Version: 3.0
27.04.2023 Page 64/130
1. Selektieren Sie im Projektbaum den Knoten Application.
2. Wählen Sie im Menü Projekt > CoDeSYS import. Im darauffol-
genden Schritt wählen Sie die heruntergeladene export-Datei
aus und bestätigen mit Öffnen. Im Dialogfenster selektieren Sie
bitte alle Elemente und bestätigen mit OK.
3. Erzeugen Sie eine neue Symbolkonfiguration durch Add Object
> Symbol configuration. Dabei achten Sie bitte darauf, das
Häkchen bei OPC UA zu setzen, da dies der Kommunikations-
kanal ist. Die Rezeptvariablen werden automatisch zu der
Symbolkonfiguration hinzugefügt und können nicht einzeln
ausgewählt werden.
EASY UI Designer
Version: 3.0
27.04.2023 Page 65/130
4. Bitte stellen Sie sicher, dass im Recipe Manager der File Path auf \sdcard\plc\recipes ge-
setzt ist.
5. Erzeugen Sie nun die export-Datei für den EASY UI Designer, indem Sie im Menü unter
Build > Build the program > Generate code klicken.
Kehren Sie nun zum Projektkonfigurator des EASY UI Designers zurück.

1. Geben Sie unter Communication > Offline den Pfad der soeben generierten Symbol-
konfiguration an.
2. Konfigurieren Sie das Visualisierungsprojekt zu Ende und warten Sie bis der EASY UI
Designer startet.
3. Die Rezeptvariablen sind unter Variablen > Kanäle > Controller OPC UA > PLC >
Application > Recipes zu finden.
4. Die Rezeptseite ist im Client-Projekt unter pages zu sehen. Sie enthält bereits alle
Variablenverknüpfungen zum PLC-Baustein und muss funktional nicht angepasst
werden. Die Rezept-Dialoge sind im Order dialogs enthalten und ebenfalls bereits
konfiguriert.
EASY UI Designer
Version: 3.0
27.04.2023 Page 66/130
10 Glossar
Page? View? Region? AppShell? Ich verstehe nur Bahnhof…

AbsoluteLayout – Ein Layout-Container, in dem die visuellen Elemente absolut durch x- und y-
Koordinaten positioniert werden.
Action – Actions dienen dazu, ein bestimmtes Verhalten an ein visuelles Element zu binden.
Beispielsweise können Sie einer Schaltfläche eine Action hinzufügen, die beim Betätigen der
Schaltfläche eine bestimmte Seite oder einen Dialog anzeigt. Zu den Einstellungen für Actions
gelangen Sie über die Schaltfläche im Eigenschaftenfenster.
Alarm – Alarme dienen zur Ausgabe von Betriebsfehlern, Meldungen und Hinweisen einer
Maschine. Ein wesentlicher Bestandteil einer Visualisierung ist daher die Erfassung, Anzeige
und Quittierung von Alarmen.
AppPageNavigator – Der AppPageNavigator ist ein Platzhalter für die inhaltlichen Seiten der
Visualisierung, beispielsweise „MachinePage.html“. Pro Visualisierung gibt es immer nur ei-
nen AppPageNavigator.
AppShell – Die Datei „AppShell.html“ definiert die Hauptansicht der Visualisierung. Sie enthält
das grundsätzliche Layout der Visualisierung, das aus mindestens einem Menü und dem
AppPageNavigator besteht.
Benutzerverwaltung – Die Benutzerverwaltung dient zur Vergabe von personenbezogenen
Berechtigungen innerhalb der Visualisierung. Dadurch lassen sich visuelle Elemente zur Steue-
rung und Ausgabe von Informationen für bestimmte Benutzergruppen sperren.
FixClassical Layout – Eine Layout-Vorlage, die eine Kopfzeile mit Einstellungen und eine Fuß-
zeile mit einem Navigationsmenü beinhaltet. Steuerelemente können hier absolut positioniert
werden.
FixTop Layout – Eine Layout-Vorlage, die eine Kopfzeile mit Einstellungen und einem Navigati-
onsmenü beinhaltet. Steuerelemente können hier absolut positioniert werden.
FlexLayout – Ein Layout-Container, der eine responsive Anzeige von visuellen Elementen be-
wirkt.
Page – Eine Page ist eine Seite, die die eigentlichen Inhalte der Visualisierung zeigt. Ein Bei-
spiel ist eine Diagnoseseite für die Maschine (DiagnosticsPage.html).
Region – Eine Region ist ein Platzhalter für eine View. Auf einer Seite kann es mehrere Regi-
ons geben. In den FixLayout-Vorlagen wird eine Region beispielsweise für die Kopfzeile be-
nutzt.
Responsive Layout – Eine Layout-Vorlage, die die Navigation in einem seitlichen Menü zur
Verfügung stellt. Die Responsive-Vorlage passt sich flexibel an alle Endgeräte an. Aus diesem
Grund werden die Steuerelemente hier nicht absolut, sondern flexibel (auf einem FlexLayout)
positioniert.
Rezept – Ein Rezept beschreibt einen Satz von Prozesswerten, welche üblicherweise die Ein-
stellungen einer Maschine zur Fertigung eines Produktes aus einer Produktpalette festlegen.
Durch das Schreiben von Rezepten zur Steuerung lässt sich über die Visualisierung zwischen
den einzelnen zu fertigenden Produkten umschalten.
EASY UI Designer
Version: 3.0
27.04.2023 Page 67/130
Steuerelemente (Controls) – Als Steuerelemente werden die visuellen Objekte bezeichnet,
die man auf eine Seite legen kann. Beispiele sind Buttons, DonutGauge oder ein FlexLayout.
Trigger – Ein Trigger überwacht verschiedene Eigenschaften, beispielsweise ein Objekt oder
eine Variable und gibt Änderungen an diesen bekannt. Auf Basis solcher Ereignisse können
Actions ausgelöst werden.
View – Eine View ist eine bestimmte Ansicht, die mehrfach in der Visualisierung genutzt wer-
den kann. Sie wird in eine Region gelegt, welche zur Laufzeit Views austauschen kann. Ein Bei-
spiel ist eine Ansicht mit Navigationsschaltflächen (ButtonView.html). Die Kapselung in einer
Ansicht ermöglicht einen flexiblen Austausch der Navigationsschaltflächen während des Be-
triebs.
EASY UI Designer
Version: 3.0
27.04.2023 Page 68/130
EASY UI Designer
Documentation (ENG)
EASY UI Designer
Version: 3.0
27.04.2023 Page 69/130
Table of Contents
1 Basics ...................................................................................................................... 72
Which EASY Engineering Tool License do I need? ..................................................................... 72
Which system requirements does the EASY UI Designer need? ................................................ 72
Which controllers are required? ................................................................................................ 72
Which hardware is required? .................................................................................................... 73
Which browsers are supported? ............................................................................................... 73
Which shortcuts are provided? ................................................................................................. 73
2 Projects................................................................................................................... 76
Which options does the project configurator offer? ................................................................. 76
How do I edit an existing project? ............................................................................................. 76
How do I set up a new project? ................................................................................................. 78
How is the EASY UI Designer structured? .................................................................................. 79
How is a project structured? ..................................................................................................... 80
How do I start a project in the browser? ................................................................................... 81
How can I start a project locally? ............................................................................................... 82
3 Design ..................................................................................................................... 83
Which layouts are available to me for the main view? ............................................................. 83
Where can I find the main view of the application? .................................................................. 83
How can I edit a page, a view or a dialog? ................................................................................. 84
Which pages and views are available inside the project? ......................................................... 84
How is the FixClassical layout structured?................................................................................. 85
How is the header structured in the FixClassical layout? .......................................................... 86
How are the navigation buttons structured in the FixClassical layout? ................................... 86
How is the FixTop layout structured? ........................................................................................ 87
How is the header structured in the FixTop layout? ................................................................. 88
How are the navigation buttons implemented in the FixTop layout? ....................................... 88
How can I add a navigation button to the FixClassical or FixTop layout? ................................. 89
How can I scale a visualization when using absolute positioning? ............................................ 90
What do I have to consider when designing responsive visualizations? .................................. 90
What does the property orientation do? .................................................................................. 91
What does the property wrap do? ............................................................................................ 91
What does the alignItems property do? .................................................................................... 91
What does the justifyContent property do? .............................................................................. 92
What does the alignContent property do? ................................................................................ 93
How is the Responsive Layout built up? .................................................................................... 94
How can I add more elements to the Responsive menu? ......................................................... 94
How can I change the order of menu items in Responsive Layout? .......................................... 95
How can I add a new page, view or dialog? ............................................................................... 96
How can I add an existing HTML file as a page, view or dialog? ................................................ 97
How can I insert controls on a page or view? ............................................................................ 97
How can I group several controls into one user control? .......................................................... 97
EASY UI Designer
Version: 3.0
27.04.2023 Page 70/130
How can I create and save my own style for a control? .......................................................... 100
What is a region and how do I work with them? ..................................................................... 102
What dialogs are there and how do I display them? ............................................................... 102
How do I open keyboard dialogs? ........................................................................................... 103
4 Actions ................................................................................................................. 104
How can I add an action to a control? ..................................................................................... 104
What triggers are there to trigger an action? .......................................................................... 105
What actions are there? .......................................................................................................... 105
How do I set properties with the setPropertyAction? ............................................................. 106
What are state collections and how do I use them? ............................................................... 107
5 Variables............................................................................................................... 109
How do I create a symbol configuration? ................................................................................ 109
How can I import variables from a PLC project? ..................................................................... 109
How can I view and edit variable definitions? ......................................................................... 111
How can I assign a variable to a control? ................................................................................ 112
How can I set limits on a variable? .......................................................................................... 112
Which variable types are there and what do I use them for? ................................................. 112
6 Language switching .............................................................................................. 114
How can I add a new language to the project? ....................................................................... 114
How can I view and edit texts? ................................................................................................ 115
How can I add a multilingual text? .......................................................................................... 115
How can I add a custom text group for my texts? ................................................................... 116
How can I assign a multilingual text to an element? ............................................................... 116
How does the language switching work? ................................................................................ 116
How do I add dynamic information to localizable texts? ........................................................ 117
7 Alarms .................................................................................................................. 119
How is the alarm system structured? ...................................................................................... 119
What steps are necessary to set up the alarm system? .......................................................... 119
What alarm states are there? .................................................................................................. 120
What is an alarm class and what is it used for? ....................................................................... 121
How do I group alarms? ........................................................................................................... 121
How do I create an alarm? ....................................................................................................... 121
What are the alarm types and how are they applied? ............................................................ 122
How do I associate alarms with a numerical list? .................................................................... 122
How do I display alarms in an alarm line? ............................................................................... 123
8 User management ................................................................................................ 124
How can I create user groups? ................................................................................................ 124
How can I create users? ........................................................................................................... 124
How can I create and assign rights? ........................................................................................ 124
How can I assign a right to an element? .................................................................................. 125
9 Recipes ................................................................................................................. 126
How do I activate the recipe function in the EASY UI Designer? ............................................. 126
10 Glossary ................................................................................................................ 129
Page? View? Region? AppShell? It’s all Greek to me… ............................................................ 129
EASY UI Designer
Version: 3.0
27.04.2023 Page 71/130
1 Basics
The EASY UI Designer can be used to implement individual machine visualizations as a web
application. No web development experience is required for this. Various templates that can
be customized make it easy to compile the content.
Which EASY Engineering Tool License do I need?

The EASY UI Designer is part of the EASY Engineering Tool License "EASY Professional".
With the EASY Professional license, you have access to all products of the Lenze Engineering
tool chain, which supports you from planning to implementation in the demanding tasks that
arise in the context of machine development.
Which system requirements does the EASY UI Designer need?
Recommended
PC with Windows 10
Processor 2.2 GHz (Dual Core) or faster
Memory 4 GB or more
Screen resolution 1920 x 1080 pixels or higher
Graphics hardware acceleration DirectX 9 or higher
Hard disk space for installation 1.5 GB
Which controllers are required?

A Lenze controller of the c5xx device series is required to
create a web application, as FAST UI Runtime is integrated
on these devices.
Communication with the controller is exclusively via OPC UA.

The functionalities required for this must be explicitly acti-
vated in the PLC Designer under Settings > Support OPC UA
functionalities. The check mark must also be set when creat-
ing the symbol configuration.
EASY UI Designer
Version: 3.0
27.04.2023 Page 72/130
Which hardware is required?
To run the web visualization, both a c5xx series controller and a display device are required.
Lenze offers the WebPanel v450 for the latter.
For project configuration, however, your engineering PC with a Chromium-based browser is
sufficient in the first step.
Which browsers are supported?

From a technological perspective, the web visualization can be displayed in all common
browsers. However, we do not recommend using versions that are too old (Internet Explorer
11 or older) to avoid possible display problems. The use of Google Chrome or the Chromium-
based Microsoft Edge is recommended.
Which shortcuts are provided?

General
General keyboard shortcuts apply to the entire development environment or at least to the
component named in each case, such as the Project Explorer. Specific keyboard commands
for the Designer and the Table Editor are listed in tables below.
Keyboard
command Function
Ctrl + S Saves the currently opened project.
Ctrl + C Copies the selected element or elements to the clipboard.
Ctrl + V Pastes the clipboard contents (one or more elements) to the selected lo-
cation.
Ctrl + X Removes the selected element or elements and copies them to the clip-
board.
Ctrl + A Selects the entire contents of an editor or text box.
Ctrl + Z Undoes the last action.
Ctrl + Y Repeats the last action that was undone.
Del Deletes the selected element.
Enter Displays the item selected in the project explorer in the corresponding
editor.
Ctrl + F Opens a dialog to search for words in the document or table.
EASY UI Designer
Version: 3.0
27.04.2023 Page 73/130
Keyboard
command Function
Ctrl + H Opens a dialog to automatically replace one word with another.
F2 Opens a dialog to rename the file selected in the project explorer.
F3 Marks the next instance of the search word.
F4 Opens the properties window if it was closed.
Alt + F4 Closes the development environment.
F5 Compiles and starts the project.
F8 Opens the dialog for adding an element to the project.
Shift + F8 Creates a new folder in the project explorer.
Ctrl + left mouse Selects the element selected with the Ctrl key pressed in addition to ele-
button ments already selected.
Shift + left Selects the entire area between an already selected element and the ele-
mouse button ment clicked on while holding down the shift key.
Ctrl + right arrow Jumps to the end of the word.
Ctrl + left arrow Jumps to the beginning of the word.
Ctrl + Shift + Marks from the cursor position to the end of the word.
right arrow
Ctrl + Shift + left Marks from the cursor position to the beginning of the word.
arrow
Designer
Keyboard
command Function
Ctrl + S Saves the active document.
Ctrl + Shift + S Saves all documents loaded in the designer.
Shift + scroll Moves the view in the designer to the left or to the right.
wheel
EASY UI Designer
Version: 3.0
27.04.2023 Page 74/130
Keyboard
command Function
Scroll wheel Moves the view up or down in the designer.
Ctrl + scroll Increases or decreases the size of the view in the designer.
wheel
Space bar + left Allows moving the view in the designer by mouse.
mouse button
Table editor
Keyboard com-
mand Function
Ctrl + 1 Fills all selected cells with the content of the first selected cell and incre-
ments the index for the name of each selected definition by 1.
Ctrl + 2 Fills all selected cells with the content of the first selected cell and in-
creases the index for each cell by 2.
Ctrl + U Fills all selected cells with the content of the topmost selected cell.
Ctrl + F8 Creates a copy of the selected definition and inserts the copy into the ta-
ble.
Ctrl + right arrow Jumps to the last cell of the row.
Ctrl + left arrow Jumps to the first cell of the row.
Ctrl + arrow up Jumps to the first cell of the column.
Ctrl + arrow Jumps to the last cell of the column.

down
Shift + right ar- Marks one character further to the right.

row
Shift + left arrow Marks one character further to the left.
Shift + arrow up Marks one line further up.
Shift + arrow Marks one line further down.

down
EASY UI Designer
Version: 3.0
27.04.2023 Page 75/130
2 Projects
Which options does the project configurator offer?

When you start the EASY UI Designer, the project configurator is displayed first. On the start
page you have the following options:
Current projects
Here you will find an overview of all projects that have already been created. To find the de-
sired project more easily, you can use the filter settings and the search function above the
project tiles.
By right-clicking on a tile, further options are available in a context menu. You can find more
information about this under How do I edit an existing project?
New project
You can create a new project either by clicking on the plus sign (+) or based on an already cre-
ated template, which you can also find visualized as tiles on the "New project" page.
More information under How do I set up a new project?
Example projects
This menu item provides an overview of sample projects on specific topics.
Open project
Opens a project from the hard disk.
How do I edit an existing project?

When you start EASY UI Designer, the project configurator is displayed first.
Under Current Projects you can see an overview of all existing projects.
On the start page of the project configurator, the following options are available for all pro-
jects by right-clicking the project tile:
EASY UI Designer
Version: 3.0
27.04.2023 Page 76/130
If you want to change your project afterwards, you will find these options under Edit project.
If the project has to be adapted due to a change of the target device, this can be projected
using Change target. After the selection, the configuration page for the device opens. By se-
lecting another controller and confirming the following steps, the target device is updated in
the project.
If you want to use the newest visualization features, you can update your project click-
ing on the entry Update project. This option is only available for older projects and is
marked by an orange icon on the project tile.
Deregister – If you don’t want to see the project in this list anymore, you can deregister it. It
will not be deleted.
Final deletion of a project from the hard disk is achieved by clicking Delete.
The following options are available here:
• Open project - Double-click one of the projects on the start page. The project will be
opened in the EASY UI Designer.
• Search project - If the project list is extensive, you can also search by project name,
customer, project description or date in the search field.
• Delete project - right-click the project and select the appropriate command from the
context menu.
EASY UI Designer
Version: 3.0
27.04.2023 Page 77/130
How do I set up a new project?
When you start the EASY UI Designer, the project configurator is displayed first. On the start
page, selecting "New Project" will take you to a page where you can create a completely new
project ("+") or create a project based on an already saved template.
New project
To start creating a custom project, click the plus sign (+). An empty project can be created us-
ing the right mouse button and the selection empty. In the latter case, only the absolutely
necessary settings are configured,
Alternatively, you can create a project based on a template you created yourself under
Custom Templates.
After you have created a new project on the start page via the plus sign (+), you will be guided
through various dialogs to define the project settings:
• Project – Here you define the project data (project name, project path, project version,
developer, customer).
• Device – Here you select your existing controller and have an overview of the device-spe-
cific restrictions.
• Features - Here you configure the functions that are part of your visualization. User man-
agement, language switching, alarm system, and variable system are permanently inte-
grated; recipe management and integration of FAST services are optional.
• Tip: If you want to test the visualization immediately without further user configuration
in the EASY UI Designer, activate the Add guest user option here for user management.
• Communication - To import variables from a PLC project, a link to the project must be es-
tablished. There are three possibilities available:
o PLC Project: The recently changed *.project files are provided here for selection.
o EASY export : All relevant information is also stored in the Lenze exchange for-
mat *.easyuilpk , which can be selected here using the ... button.
o Symbol configuration: The symbol configuration (*.xml) with the variables ena-
bled for visualization is loaded using the ... button.
• Display – Here you create a new client project with all information about the display de-
vice.
o Selection of the device type and device size/resolution.
o Selection of the layout (responsive, fixed top menu, fixed bottom menu) and the
design for the visualization (theme, appearance of the controls).
o Selection of views to be added to the visualization project
• Summary – A summary of all project settings is displayed here.
o Tip: If you check the box below the summary, the project settings you have
made will also be saved as a template for new projects.
o Click the button to create the project and open it in the EASY UI De-
signer.
EASY UI Designer
Version: 3.0
27.04.2023 Page 78/130
How is the EASY UI Designer structured?
The EASY UI Designer user interface is divided into the following areas:
① Title – The title bar displays the name of the opened project. The title bar also contains
start and stop buttons that you can use to start and stop the visualization in the browser.
② Ribbon – The ribbon contains a number of tools that allow you to quickly access the com-
mands needed to create and edit a project.
③ Project Explorer – The project explorer provides access to all areas of the project in the
form of a folder structure. The folders can be expanded and collapsed to show or hide their
contents.
④ Designer In the designer workspace you design the different pages of your machine visu-
alization.
⑤ Document outline – In the document outline, the outline of the file opened in the de-
signer workspace is displayed. Depending on the selected layout, different entries can be
found here.
⑥ Output - Messages of the development environment are displayed in the output window.
⑦ Property Page - In the property page window, the properties of the file opened in the de-
signer workspace are displayed and can also be changed here.
⑧ Properties – In the properties window, the properties of the element selected in the de-
signer workspace are displayed and can also be changed here. Via the buttons and you
can switch between the element properties and the settings for actions.
⑨ Status bar – The status of the development environment is displayed in the status bar.
1
EASY UI Designer
Version: 3.0
27.04.2023 Page 79/130
2
8
3
4 Designer
7
5
6
9
How is a project structured?

In the EASY UI Designer, the project explorer is located on the left side. The project explorer
provides access to all areas of the project in the form of a folder structure. The folders can be
expanded and collapsed to show or hide their contents.
The standard structure of a project consists of a client project and a server project.
Client project
• The client project contains all content components of the visualization (graphics, dia-
logs, pages and views) in the design folder.
EASY UI Designer
Version: 3.0
27.04.2023 Page 80/130
• The project configuration folder contains the settings for the target device and the
client project.
Server project
• The Server project contains all information about the server-side functions variables,
language switching, alarms and user management.
• In the project configuration folder you will find the settings for the server project.
How do I start a project in the browser?

The newly created project already contains an executable visualization. This means that after
creating the project, you only need to copy it to a controller of the c5xx device series and then
start it there.
The following steps are necessary for this:
1. Connect target device
a. Select Project > Target device manager in the menu ribbon.

b. Enter the IP address of the controller.
c. Select Project > Connect. If the connection was successful, the Connect entry in the ribbon is
grayed out and the Disconnect entry becomes selectable.
2. Transfer project to target device

Select the projects to be copied in the overview and start the copy process by selecting
Project > Deploy in the ribbon. EASY UI Designer gives feedback in the output window
whether the process was successful.
3. Start project in the browser
Click the button to start the project in the browser.

A start logo is displayed in the browser for a few seconds, then the visualization login dialog
appears.
Tip: If you click on the small gray arrow next to the browser name, all browsers installed on
the system are listed for selection.
We recommend using Google Chrome or Microsoft Edge. Microsoft Internet Explorer is not
supported.
EASY UI Designer
Version: 3.0
27.04.2023 Page 81/130
4. User login
If you have previously activated the "Add guest user" option when setting up the project for
user management, enter the name and password of the guest user in the login dialog
(default: name = "guest" and password = "guest").
You can stop the project simply by closing the browser window again.
How can I start a project locally?

If there is no target device at hand, the visualization can be started locally on the
engineering PC.
To do this, select the entry Local in the menu ribbon Project > Execution target.
Click the button to start the project in the browser.

A start logo is displayed in the browser for a few seconds, then the visualization login dialog
appears.
EASY UI Designer
Version: 3.0
27.04.2023 Page 82/130
3 Design
Which layouts are available to me for the main view?

In the EASY UI Designer, three layout types are offered for the main "AppShell.html" view:
• FixClassical layout - The "FixClassical layout" has a header and a row of navigation
buttons at the bottom of the screen, which can be used to access the different pages
of the machine visualization. Elements can only be positioned absolutely, so this lay-
out is only suitable for display sizes with a similar resolution.
• FixTop layout - The "FixTop layout" has a header that contains all buttons for naviga-
tion and settings. Elements can only be positioned absolutely, so this layout is only
suitable for display sizes with a similar resolution.
• Responsive Layout - The "Responsive Layout" is suitable for displaying visualizations
on very different client devices (for example, desktop PC and smartphone). Due to
the logic required for this, elements in this layout cannot be positioned absolutely.
The menu can be flexibly expanded and collapsed using a "burger" icon.
You select the layout to be used when setting up a new project in the Project Configurator in
the "Configure display" settings step. For each layout, there are again three design themes to
choose from: "Light Design", "Dark Design" and "Custom Design".
How is the FixClassical layout structured?
How is the FixTop layout structured?
How is the Responsive Layout built?
Where can I find the main view of the application?

In the EASY UI Designer, the Project Explorer is located on the left side. All user interfaces of
the project are contained in the client folder under Design.
1. Expand the folder [Projekt]_Client > Design > views. In this folder you will find the file
"AppShell.html", which defines the main view of the application.
2. Double-click the AppShell.html entry to open the file in the designer workspace.
Below the Project Explorer, the Document Outline to the file opened in the Designer work-
space is displayed, in this case to the file "AppShell.html". Depending on the selected layout,
different entries can be found here. If you click on an entry, the associated area in the De-
signer workspace is highlighted and you can edit its properties in the Properties window.
On the main view "AppShell.html" the area AppPageNavigator serves as a placeholder. This
area displays the various pages with the actual content at runtime. Therefore, do not insert
any elements in this area.
EASY UI Designer
Version: 3.0
27.04.2023 Page 83/130
How can I edit a page, a view or a dialog?
In the EASY UI Designer, the Project Explorer is located on
the left side.
All user interfaces of the project are contained in the
client folder under Design. Double-click an entry to open
the corresponding file in the Designer workspace.
Below the Project Explorer, the Document Outline for the

file opened in the Designer workspace is displayed. De-
pending on the selected layout, different entries can be
found here. If you click on an entry, the corresponding
area in the Designer workspace is highlighted and you can
edit its properties (e.g. texts, colors, layout) in the Proper-
ties window.
Which pages and views are available inside the project?

There are various views that can be used directly in the project. The following pages and
views are already available in the corresponding nodes in the client project or can be added
via the context menu in the Project Explorer. The pages represent the content pages of the
visualization and are already linked in the navigation bar (ButtonView.html).
• Views
o Main view (AppShell.html): It contains the basic framework of the application.
o Login view (LoginView.html): It contains the login window for visualization.

o Menu views (ButtonView.html/HeaderView.html): Depending on the project lay-
out, parts of the menu are displayed in these views.
o Error view (ErrorView): View that shows system errors during runtime; this view
should not be manipulated.
o
• Pages
o Machine overview template (MachinePage.html): Here you can design the start
page of your machine.
EASY UI Designer
Version: 3.0
27.04.2023 Page 84/130
o Recipe management template (RecipesPage.html): It contains the recipe man-
agement template if the recipe function has been activated in the project config-
urator.
o Settings template (SettingsPage.html): Here you can add generic settings.
o Template for statistics (StatisticsPage.html): This page can be filled with statistics
or performance indicators of your machine.
o Template for diagnostic information (DiagnosticsPage.html): Give the users here
information to diagnose errors.
o Overview of current alarms (CurrentAlarmsPage.html): It contains an alarm list
that is filled with the current alarms at runtime.
o Historical alarms overview (HistoricalAlarmsPage.html): It contains the list of his-
torical alarms.
How can I add an existing HTML file as a page, view or dialog?
How is the FixClassical layout structured?

The FixClassical layout has a header and a set of navigation buttons at the bottom of the
screen that can be used to access the different views.
HeaderRegion → View „HeaderView.html“
ButtonRegion → View „ButtonView.html“
The (User) and (Settings) buttons in the header refer to the server-side user manage-
ment and language switching functions.
Document Outline
The corresponding main view "AppShell.html" contains in the document structure the ele-
ments HeaderRegion, AppPageNavigator and ButtonRegion.
• The HeaderRegion contains the header. By default, the HeaderView.html view is dis-
played in this region.
• The AppPageNavigator displays the various pages with the actual content at
runtime. Therefore, do not insert any elements in this area, but create the visualiza-
tion on the respective page, for example MachinePage.html.
• The ButtonRegion contains the buttons for navigation. By default, the But-
tonView.html view is displayed in this region.
EASY UI Designer
Version: 3.0
27.04.2023 Page 85/130
All user interfaces of the project are contained in the client folder under Design. Double-click
an entry to open the corresponding file in the Designer workspace.
How is the header structured in the FixClassical layout?

The HeaderView.html view defines the header of the application.
① ② ③ ④⑤
① The Image element can be used for a logo, for example. You can select the graphic to
be displayed in the Properties for the Image element under Image > Image.
② The Label element displays the currently logged in user. It is updated in the back-
ground via the DataContext property.
③ The user button opens the dialog UserDialog.html via the showDialogAction con-
figured in the actions menu , in which various settings for user administration are of-
fered. In the settings of the action in the properties window it can be configured via Dia-
log > Mode whether the dialog requires an interaction (e.g. close, confirm) (Modal) or
whether it disappears by clicking on other elements without further interaction (Non-
Modal).
④ The settings button is a Button control that calls the SettingsDialog.html dialog
via the showDialogAction.
⑤ The presentation of date and time is projected with a Clock control.
⑥ The bottom line is an AlarmLine element that displays the corresponding information
at runtime in case of a triggered alarm.
How are the navigation buttons structured in the FixClassical

layout?
The view ButtonView.html defines the buttons for navigation.
• As visible in the Document Outline, the view contains a TabBar control, which in turn
contains a TabButton element for each navigation button.
• You can select the page that is to be loaded when the visualization is started in the
properties window for the TabBar element under Navigation > StartPageName.
EASY UI Designer
Version: 3.0
27.04.2023 Page 86/130
• A language-switchable text is assigned to each TabButton element in the properties
window under Text > LocalizableText.
• You can select the target page for a TabButton element in the Properties for the Tab-
Button element under Navigation > PageName.
• By default, the following target pages are defined for the buttons:
o Machine - "pages/MachinePage.html"
o Recipes - "pages/RecipesPage.html"
o Statistics - "pages/StatisticsPage.html"
o Settings - "pages/ SettingsPage.html"
o Diagnostics - "pages/DiagnosticsPage.html"
o Alarms - "pages/CurrentAlarmsPage.html"
How can I add a navigation button to the FixClassical or FixTop layout?
How is the FixTop layout structured?

The FixTop layout has a header that contains all the buttons for navigation and settings.
MenuRegion → View „HeaderView.html“
The user and the settings button in the header refer to the server-side user manage-
ment and language switching functions.
Document Outline
The corresponding main view "AppShell.html" contains the elements MenuRegion and
AppPageNavigator in the document structure.
• The MenuRegion contains the header. By default, this region displays the Header-
View.html view.
runtime. Therefore, do not insert any elements in this region, but create the visuali-
zation on the respective page, for example "MachinePage.html".
an entry to open the corresponding file in the Designer workspace.
EASY UI Designer
Version: 3.0
27.04.2023 Page 87/130
How is the header structured in the FixTop layout?
The view HeaderView.html defines the header of the application.
① ② ③ ④ ⑤
① The Image element can be used for a logo, for example. You can select the graphic to
be displayed in the Properties for the Image element under Image > Image.
② The buttons for navigation are defined in a separate view, the "ButtonView.html".
Therefore, the Region control is used here, where the view is loaded into. Changes re-
garding the navigation menu must therefore be made in the ButtonView.
③ The user button opens the dialog UserDialog.html via the showDialogAction con-
figured in the actions menu , in which various settings for user administration are of-
fered. In the settings of the action in the properties window it can be configured via
Dialog > Mode whether the dialog requires an interaction (e.g. close, confirm) (Modal) or
whether it disappears by clicking on other elements without further interaction (Non-
Modal).
④ The settings button is a Button control that calls the SettingsDialog.html dialog
via the showDialogAction.
⑤ The presentation of date and time is projected with a Clock control.
⑥ The bottom line is an AlarmLine element that displays the corresponding information
at runtime in case of a triggered alarm.
How are the navigation buttons implemented in the FixTop layout?

The view "ButtonView.html" defines the buttons for navigation.
• The document outline contains a TabBar element, which in turn contains a TabBut-
ton element for each navigation button.
• You can configure the page that should be loaded when the visualization is started in
the properties window for the TabBar element under Navigation > StartPageName.
• Each TabButton element is assigned a language-switchable text in the properties
window under Text > LocalizableText.
• You can select the target page for a TabButton element in the properties window for
the TabButton element under Navigation > PageName.
EASY UI Designer
Version: 3.0
27.04.2023 Page 88/130
• By default, the following target pages are defined for the buttons:
o Machine - "pages/MachinePage.html"
o Recipes - "pages/RecipesPage.html".
o Diagnostics - "pages/DiagnosticsPage.html"
o Alarms - "pages/CurrentAlarmsPage.html"
o The "Statistics" button is defined as a menu button (TabMenuButton) with
three items (MenuItem):
▪ Statistics - "pages/StatisticsPage.html"
▪ Page 1 - no target page defined yet
▪ Page 2 - no target page defined yet
Each MenuItem is assigned a language-switchable text in the properties window under

Text > LocalizableText.
You can select the target page for a MenuItem element in the properties window for the
MenuItem element under Navigation > PageName.
How can I add a navigation button to the FixClassical or

FixTop layout?
In the FixClassical layout as well as in the FixTop layout the buttons for navigation are defined
in the view "ButtonView.html".
To add a button:
1. In the Project Explorer, expand
the [Project]_Client > Design >
views folder.
2. Double-click the But-
tonView.html entry to open the
file in the Designer workspace.
3. Select the TabBar element in the
document outline.
4. Open the Collection Editor via
the button under Common
Properties > Items (Collection) in
the Properties window.
5. Select a TabButton or a Tab-

MenuButton (button with sub-
menu) in the drop down box and
click Add.
Tip: You can use the two buttons

to move a selected entry
to the desired position.
6. Customize the properties of the button.
EASY UI Designer
Version: 3.0
27.04.2023 Page 89/130
• Under Favorites > PageName, you can select the target page to be displayed
when the button is pressed.
• Under Favorites > LocalizableText you can assign a language-switchable text to
the button.
7. Click the OK button to apply the changes.
How can I scale a visualization when using absolute positioning?

Projects that have been set up in a fixed layout (FixTop or FixClassical) are generally designed
for a specific resolution. In the context of new hardware or further panels, the need to scale
the visualization without changing the individual elements’ positions can arise. The EASY UI
Designer provides this feature using a special layout element called viewBox.
The viewBox element is already integrated in the page templates of FixTop or FixClassical pro-
jects. Concerning the document structure of those pages, the viewBox is included in the root
Page control and contains an AbsoluteLayout as a child element. All objects inside the Abso-
luteLayout are scaled when the stretch mode property of the viewBox is set to uniform and
the resolution of the original device is inserted in the width and height properties of the Abso-
luteLayout (see Readme.html in both Fix project types). The stretch direction property lets
you configure in which direction the scaling should take effect.
What do I have to consider when designing responsive

visualizations?
The logic required for responsive design has consequences in terms of the positioning of the
elements. The following aspects are important for creating such an application.
The container for the controls is a FlexLayout. It automatically arranges the contained ele-
ments by rows or columns, depending on the setting of the orientation property of the
FlexLayout. The FlexLayout can move the "excess" elements of a row to the next row if, for
example, the browser window is made smaller.
Elements in the FlexLayout cannot be placed absolutely with x and y coordinates in the
top/bottom/left/right properties, because their position is determined automatically. The po-
sition of elements can be changed in this approach by the following properties.
• orientation specifies whether the elements should be placed vertically
or horizontally
• alignItems specifies how the elements are positioned in the container -
this property works only if the wrap property is not selected
• justifyContent defines whether all components are placed one behind
the other or at a distance from each other
• alignContent sets the distribution of elements in the container - this
property works only if the property wrap has been enabled
EASY UI Designer
Version: 3.0
27.04.2023 Page 90/130
What does the property orientation do?
The orientation property determines how
the elements are arranged.
The left image shows the line-by-line ar-
rangement (horizontal), the right image
shows the
column-by-column orientation (vertical).
What does the property wrap do?

If the wrap property is set
to true, elements that do
not have enough space in
the width or height of the
container are wrapped to
the next line. How this ele-
ment is displayed is deter-
mined by the overflow
property.
Overflow can take the val-
ues visible, hidden, scroll or
auto.
What does the alignItems property do?

The alignItems property specifies whether the positioning of the items should be at the begin-
ning (start), in the middle of the page (center), or at the end of the view (end), baseline ar-
ranges them all based on the item with the largest dimensions, while stretch scales all items
to a uniform size.
This property works only if the wrap property is set to false.
EASY UI Designer
Version: 3.0
27.04.2023 Page 91/130
What does the justifyContent property do?
The justifyContent property defines whether all components should be placed directly behind
each other (start/center/end) or whether there should be an even space between the compo-
nents (space-between, space-around, space-evenly).
EASY UI Designer
Version: 3.0
27.04.2023 Page 92/130
What does the alignContent property do?
The alignContent property sets the distribution of elements in space. You can choose whether
they should be aligned at the beginning of the container (start), in the middle (center), at the
end (end), or whether they should be evenly distributed (space-around) or aligned at the
edge (space-between).
This property works only if the wrap property has also been enabled
EASY UI Designer
Version: 3.0
27.04.2023 Page 93/130
How is the Responsive Layout built up?
The Responsive layout has a menu that can be used to access the different views. In this lay-
out, the elements cannot be positioned absolutely due to the logic required for the flexible
scaling.
What do I have to consider when projecting responsive visualizations?
AppDrawHeader AppBar
AppNavMenu
The user and the settings button in the header refer to the server-side functions user
management and language switching.
Document outline
The corresponding main view "AppShell.html" contains in the document structure among oth-
ers the elements AppDrawerHeader, AppNavMenu, AppBar and AppPageNavigator.
• The AppDrawerHeader contains an image and a label element for the menu.
• The AppNavMenu contains the elements for the individual menu items.
• The AppBar contains the elements for the header.
runtime. Therefore, do not insert any elements in this area, but create the visualiza-
tion on the respective page, for example "MachinePage.html".
on an entry to open the corresponding file in the Designer workspace.
How can I add more elements to the Responsive menu?

By default, the menu already contains menu items, submenus and separators. You can add
further elements simply by copying and pasting.
To add more items to the menu:
EASY UI Designer
Version: 3.0
27.04.2023 Page 94/130
6. If you haven't already done so, open the main AppShell.html view in the Designer
workspace.
7. In the Designer workspace, select an existing menu item, submenu, or separator (de-
pending on the item you want to add to the menu).
8. Select Copy from the context menu (right mouse button) and then Paste.
9. The copied element will be pasted at the end of the menu.
10. We recommend that you first add all the necessary menu elements to the menu and
then define the order of the elements and their properties.
11. If you want to add more elements, repeat the steps 2 and 3.
12. Adjust the order of the elements.
How can I change the order of menu items in Responsive Layout?

To change the order of the menu items:
6. If you have not already done so, open the AppShell.html main view in the Designer
workspace.
7. To change the order of the main items, select the AppNavMenu item in the
Document Outline.
8. To change the order of submenu items, select the corresponding submenu item in
the Document Outline instead.
9. Click the button under Menu > MenuItems (Collection) in the Properties panel.
The Collection Editor dialog box appears:
Make the desired adjustments:
EASY UI Designer
Version: 3.0
27.04.2023 Page 95/130
• With the arrow buttons you can change the position of the element
inside the menu.
• You can add a menu item via the Add button.
• Under Navigation > PageName you can select the target page that is to be
displayed when the menu item is selected.
• Under Text > LocalizableText you can assign a language-switchable text to
the menu entry.
Click the OK button to apply the changes.
How can I add a new page, view or dialog?
You can add your own content to the project using the Project Explorer.
To add a blank page.
1. Expand the [Project]_Client > Design folder.
2. Right-click the corresponding pages, views, or dialogs subfolder to open its context
menu.
3. Select Add New Item from the context menu.
The Add New Item dialog box appears:
4. Select the Pages, Views, or Dialogs folder in the folder tree on the left.
5. Select the desired layout in the right panel.
6. Enter a file name for the page in the File name text box. For views, you can adjust the
size of the view in the Height and Width input fields.
Alternatively, predefined content pages are available in the corresponding subfolders. Here,
the file names are predefined and cannot be customized.
Click the Add button to add the page to the project. The page is automatically opened in the
Designer workspace.
What is the difference between a page and a view?
EASY UI Designer
Version: 3.0
27.04.2023 Page 96/130
How can I add an existing HTML file as a page, view or dialog?
You can add your own content to the project using the Project Explorer.
To add an existing HTML file as a page, view, or dialog.
1. Expand the [Project]_Client > Design folder.
2. Depending on whether you want to add the HTML file as a page, view, or dialog.
Right-click the appropriate pages, views, or dialogs subfolder to open its context
menu.
3. Select the Add Existing Item command in the context menu.
4. Select the HTML file to be added in the selection dialog.
5. Click the Open button to add the HTML file to the project.
How can I insert controls on a page or view?

The available controls can be found in the Start ribbon in the Controls area.
To insert a control on a Page or View:
1. If you have not already done so, open the page or view you want to edit in the
Designer workspace.
2. In the Start ribbon, select the desired control in the Controls area.
3. In the Designer workspace, click the position where you want to place the control.
4. Hold down the left mouse button to move the control in the work area or to resize it
using the anchor points.
5. In the Properties window, adjust the properties of the control.
How can I add an action to a control?

How can I assign a variable to a control?
How can I group several controls into one user control?

With the user control feature it is possible to group several base controls into one custom ele-
ment which can then be re-used. The following steps describe what you need to do:
1. In the project explorer, navigate to the folder Design. Open the context menu and
select Add new item. Now you can choose a UserControl template, which is either
based on a flexible layout or an absolute one.
EASY UI Designer
Version: 3.0
27.04.2023 Page 97/130
2. After selection, an empty page opens. This canvas can be filled with all the base ele-
ments that are available in the main menu.
3. When you’re done, you can publish specific properties of the base controls to the
newly created user control. This is necessary when you want to configure each in-
stance of your control individually using the properties in the property grid. First you
have to give a name to your base control. In this example, we chose Switch as an ID
for your switch control.
4. Now you need to click on the button Published properties in the header of the view.
EASY UI Designer
Version: 3.0
27.04.2023 Page 98/130
5. A dialog opens that already contains the three properties width, height and margin.
Clicking on + will open a new window. Here, you can select the base control via its
given ID. Below you can fill in the property that you want to publish, its name, a
description and a category. A click on OK publishes the property.
EASY UI Designer
Version: 3.0
27.04.2023 Page 99/130
6. The newly created user control is now added to the main menu.
7. It can be used like any other control and be configured with the published
properties.
How can I create and save my own style for a control?

To ensure a consistent design and to save time when designing controls, the EASY UI Designer
offers the possibility to create, save and reuse a customized style.
The following steps are necessary to do this:

1. Place a control on a page and select it.
2. In the ribbon, select Start > Style. There are three options. All of them lead you to a
styling view where you can define the design standard for your selected control.
a. Edit current: this option is only available when you’ve already created a
style; by selecting it, you can adapt your customized style
b. Edit a copy: if you would like to base your style on an existing one (e.g.
VisiWin.UI.Button.Lenze.Default) and just change a few properties, you
need to select this entry
c. Create new: this option sets the control to its default style so you can start
from scratch with your design
EASY UI Designer
Version: 3.0
27.04.2023 Page 100/130
The options Edit a copy and Create new open the following dialog where you need to name
your style.
The style family is a name for a group of stylistically consistent controls. For example, all con-
trols with the style family Lenze visually belong together. This means that by using all objects
of this class, you will achieve a consistent look & feel in your visualization.
The name property describes the different variations of a control within a style family. A but-
ton in the Lenze family has a Default and an Outlined version, for example.
In the styling view, there are more properties than in the usual property grid since design is
the focus here. With the checkboxes that are next to the properties, you can configure your
property grid for that specific style. All selected properties are visible in every instance of the
control in that style whereas the unselected ones are not shown.
EASY UI Designer
Version: 3.0
27.04.2023 Page 101/130
When you’ve designed and configured everything, you save and close the view. The originally
selected control will automatically change to the edited style. The style can be set in all in-
stances of the control by selecting the corresponding entry in the style property.
What is a region and how do I work with them?

Regions are elements that can be used to structure a visualization and exchange content at
runtime. They can be understood as placeholders into which views are loaded.
Examples of a region can be found in the menu templates for the FixClassical and FixTop lay-
outs (AppShell.html). Here the page has been divided into different components, which pro-
vide more clarity in the document layout. Headers and footers are separate views referenced
by the Region control through the Navigation > viewName property.
The content pages are replaced by another placeholder element called AppPageNavigator.
Here, unlike the region, pages are loaded in at runtime instead of views.
What dialogs are there and how do I display them?

Dialogs are pop-up windows that overlay the screen and require user interaction. There are
already some dialogs that can be used directly:
• Display Message (AlertDialog.html):
o to be used e.g. for warnings or system messages.
o cannot be customized stylistically
• Recipe dialogs:
o Load recipe (LoadRecipe.html)
o Save recipe (SaveRecipe.html), save as (SaveAsRecipe.html)
o Delete recipe (DeleteRecipe.html)
• User management dialogs:
o Create user (AddUserDialog.html)
o Change user (ChangeUserDialog.html)
o Change password (ChangePasswordDialog.html)
o Log in user (LogonDialog.html)
o Log out user (LogoutDialog.html)
o Delete user (RemoveUserDialog.html)
o User settings (UserDialog.html)
• Keyboards:
o Alphanumeric keyboard (AlphabeticalKeyboardDialog.html)
o Numeric keyboard (NumericKeyboardDialog.html)
• General settings for language/theme (SettingsDialog.html)
• Template for own dialog (ContentDialog.html)
EASY UI Designer
Version: 3.0
27.04.2023 Page 102/130
To display dialogs the ShowDialogAction is needed, in case of the AlertDialog the
ShowAlertDialogAction. For example, if you want to open a dialog by clicking on a control ele-
ment, the following steps are necessary.
1. By selecting the + button, the ControlEventTrig-

ger visible in the drop-down box is added to the el-
ement. In the settings you can select which event it
should react to, e.g. onButtonClick.
2. Right-clicking on the trigger and selecting Add

new action opens a dialog box in which all available
actions are listed and can be selected.
3. The corresponding dialog can be entered in the

properties of the action below. The Mode option
specifies whether interaction with the window is
required ("modal") or whether the interface can
still be operated in the background ("nonmodal").
How do I open keyboard dialogs?

There are two different keyboards (alphanumeric/numeric) that can be linked to input ele-
ments such as the NumericVarIn and the TextVarIn if required. For this, the dialogs
AlphabeticalKeyboardDialog.html or NumericKeyboardDialog.html must be stored in the cli-
ent folder under dialogs/keyboards. The call of the corresponding dialog is projected on the
control itself by attaching the action Lenze.Actions.ShowKeyboardDialogAction to the
ControlEventTrigger. Depending on the element type, the alphanumeric or numeric keyboard
is displayed by clicking on the input field at runtime.
EASY UI Designer
Version: 3.0
27.04.2023 Page 103/130
4 Actions
How can I add an action to a control?

To add an action to a control.
9. In the Document Outline or Designer workspace, select the control to which you
want to assign an action.
10. Click the button in the Properties panel to display the Actions settings.
11. In the list box, select the trigger you want to use for the action.
12. Click the button to add the selected trigger to the control.
13. Right-click the added trigger and select Add New Action from the context menu.
The Add New Action dialog box appears:
EASY UI Designer
Version: 3.0
27.04.2023 Page 104/130
14. In the Add New Action dialog box, select the desired action.
15. Close the dialog box by clicking the OK button.
16. Adjust the properties of the action.
Tip: Several actions can be assigned to a trigger.

Tip: Some actions can also be found as predefined modules in the ribbon under
Start > Functions and can be applied to elements via drag & drop.
What triggers are there to trigger an action?

As a trigger for an action, a trigger must first be added to the control in the properties win-
dow in the settings for actions . This describes the event on which a function is to be called.
The following triggers are available for selection:
• ControlEventTrigger – The ControlEventTrigger fires when an element generates a
specific event. You define the triggering event via the EventName trigger property,
for example onButtonClick for the click on a button. The available events depend on
the control. The most common are:
o onClick – raised when clicking/touching (onDown + onUp) the control
o onDown – raised when pressing down the mouse key or touching the
interface
o onUp – raised when lifting up the mouse key or the finger
o onInitialized – raised when the control is loaded for the first time
(note: in dialogs the event is raised every time it is opened)
o onAttached – raised every time the control is loaded
o onDetached – raised when the control is closed
There are a few others that have to do with status changes such as hover, visibility,
value, etc.
• ControlPropertyTrigger – The ControlPropertyTrigger is triggered when a property of
a control changes. The triggering event can be defined via the PropertyName prop-
erty,
• VariableTrigger – The VariableTrigger triggers when a variable changes. The name of
the variable and the triggering property (e.g. value for the value) are defined via vari-
ableName and variableProperty.
What actions are there?

After selecting a trigger for a control, the desired action can be added to the trigger via the
context menu (right mouse button) and the Add New Action command.
In the Add New Action dialog box, the actions are sorted thematically into the following cate-
gories:
• Variable - The "Variable" category contains actions for changing variable values.
• User - The "User" category contains actions for user administration (logging in, log-
ging out, changing password).
EASY UI Designer
Version: 3.0
27.04.2023 Page 105/130
• Theme & Style - The "Theme" and "Style" categories contain actions for changing the
design of the visualization.
• Property - The "Property" category contains actions for changing the properties of an
element.
• Language - The "Language" category contains actions for switching languages.
• Dialog - The "Dialog" category contains actions for dialogs, such as displaying a mes-
sage dialog or reacting to a response in the dialog.
• Class - The "Class" category contains actions for linking classes. Classes can be used,
for example, to switch between two statuses.
• Actions - The "Actions" category contains actions for basic functions, such as display-
ing a specific page or acknowledging an alarm.
Each action has properties that can be customized in the properties window.
How do I set properties with the setPropertyAction?

Changing the properties of a control can be solved using the setPropertyAction. In this exam-
ple, the color of a button is toggled in response to a variable change. If the variable value is
false, the button is to be displayed green, otherwise red.
The VariableTrigger is added to the button via the + symbol. In the settings of the trigger, the
desired variable is connected, in this example a Boolean variable. By right-clicking on the trig-
ger, a selection window opens in which the setPropertyAction must be selected. The following
is entered in the properties of the action:
EASY UI Designer
Version: 3.0
27.04.2023 Page 106/130
Condition
• the condition is optional and can be activated via the checkbox
• in the operand fields it is possible to select either the trigger value or a variable via the
drop-down menu; furthermore a concrete value can by typed in
• the following operators can be chosen
o > (greater) and >= (greater or equal to)
o < (less) and <= (less than or equal to)
o == (equal to) and != (not equal to)
o <> (within range) and !<> (not within range); the limits have to be specified by
two dots, e.g. Variable1 <> 1..20
Action
• set property: Property that should be changed; in this case the BackgroundColor of the
button
• of target: chose the element that should be changed, here the button element itself,
called self
Note: when another element should be changed, you need to give it an ID in the name
field which is located at the top of the property grid; this ID can the be selected inside the
drop-down menu
• to: desired value; in this case the color of the button when the condition is true
(@SuccessColor)
Note: when a collection of values should be used (see state collections), the option can
be selected via click on the rectangle on the right; a separate dialogue opens and pre-
sents all state collections that are compatible to the selected property
• else to: an alternative is optional and can be activated via the checkbox; in this example
the background color of the button should be set to red when the condition is false
(@ErrorColor)
What are state collections and how do I use them?

State collections are lists of input and their corresponding output values. They are used to re-
act dynamically to different variable values. Input values need to have a numeric datatype,
the output values are strings. There are three different types of state collections.
Text:
"name": "textCollection1",
"propertyType": "text",
"states": [
{
EASY UI Designer
Version: 3.0
27.04.2023 Page 107/130
"value": "<0",
"propertyValue": "Text <0"
},
{
"value": "0",
"propertyValue": "Text 0"
},
{
"value": "1..20",
"propertyValue": "Text 1..20"
},
{
"value": "21,23,25,27,29",
"propertyValue": "Text 21,23,25,27,29"
},
{
"value": "22,24,26,28",
"propertyValue": "Text 22,24,26,28"
},
{
"value": ">=30",
"propertyValue": "Text >30"
}
]
},
Colors:
{
"value": ">=30",
"propertyValue": "black"
}
Images:
{
"value": "1..20",
"propertyValue": "images/bitmaps/flags/germany.png"
}
The corresponding files (textcollection.json, colorcollection.json, imagecollection.json) can be

found in the client folder of the project under resources/statecollections. Values can be adap-
ted Ising a text editor.
EASY UI Designer
Version: 3.0
27.04.2023 Page 108/130
5 Variables
How do I create a symbol configuration?

The variables that are bound to elements in EASY UI Designer originate from a PLC project. In
the PLC Designer, they are summarized in a specific file called “ProjectName.application.xml”.
This file is also known as symbol configuration and can be created under Application > Add
object > Symbol configuration. More information about the PLC Designer can be found in the
help integrated in the software.
How can I import variables from a PLC project?

To display data of the machines or to forward user inputs to the machine, the visual elements
must be linked to the corresponding variables of the PLC project.
Necessary settings in the project configurator:

In the project configurator under Project > Communication the required data from the PLC
Designer can be linked. Select symbol configuration (.xml) of your PLC project.
EASY UI Designer
Version: 3.0
27.04.2023 Page 109/130
There are three options here:
• PLC project
With this option the project configurator automatically shows the last edited
*.project file if the PLC project is on the same PC.
• EASY export
The desired easyuilpk file is selected via the ... button. The *.easyuilpk is a Lenze
specific exchange format for data between the PLC Designer and the EASY UI De-
signer. The file can be generated in the PLC Designer. In addition to variable infor-
mation (symbol configuration), it also contains all the contents required for the FAST
services.
• Symbol configuration
The symbol configuration created in the PLC Designer contains all variable infor-
mation from the PLC that is to be made available for visualization. The xml file must
be created in the PLC Designer.
Required steps in EASY UI Designer:
1. In the Project Explorer, right-click the node of the newly added channel (Default:
Server > Variables > Channels > Controller: OPC UA) to open its context menu.
2. Select the command Browse variables in the context menu.
• The dialog for the selected browser appears and displays the symbol configura-
tion selected in the project configurator. 3.
3. Press the OK button.
• The variables of the communication component are displayed as a tree structure
in a dialog. The individual branches represent so-called namespaces, the ends of
the branches represent the actual variables to be selected.
4. Place a check mark next to the variables you want to import.
EASY UI Designer
Version: 3.0
27.04.2023 Page 110/130
Attention!
Pay attention to the number of variables. Structures can hide many variables that are
not needed. A too high number of variables leads to performance losses of the
visualization and requires a large amount of power tags!
5. Press the OK button to accept the selection.
The variable definitions are now imported into the project. In the Project Explorer,
the namespace structure of the variables is visible under the node of the correspond-
ing channel.
How can I view and edit variable definitions?

In the Project Explorer under [Project]_Server > Variables > Channels, select the channel and
therein the namespace that contains the variables to be edited.
By selecting an element, the variables defined in it open in the table editor.
• A row represents a variable definition.
• In the columns some selected parameters of the variable definition are dis-
played.
You can customize the parameters of the table editor displayed as columns.
To customize the displayed columns, right-click the Table Editor and select Options from the
context menu. Using the arrows between the lists you can change the displayed columns on
the right side.
Access to all parameters of a variable definition is provided by the Properties window when
you click on the variable definition row in the Table Editor.
EASY UI Designer
Version: 3.0
27.04.2023 Page 111/130
How can I assign a variable to a control?
To assign a variable to a control:
1. In the Designer workspace, insert a control, such as a NumericVarOut, on a page or
view.
2. In the Properties panel, click the button under Variable > VariableName.
The Select Variable dialog box appears:
3. Select the variable to be assigned to the control in the name structure tree.
4. Close the dialogue box by clicking the OK button.
How can I set limits on a variable?

Controls can accept or display all values of the linked variables. This value range, which is de-
fined by the data type of the variable, can be further limited. The limit values can either be
defined directly in the control or obtained from the variable definition.
Regardless of the type of limit definition, the isLimitCheckEnabled property must be enabled
in the properties window under the Limits category of the control.
If limits are already present in the variable definition, they can be used by setting the property
useVariableLimits.
Alternatively, minima and maxima can be set directly on the control by RawLimitMin and
RawLimitMax. They can also be used in addition to the limits from the variable definition to
restrict value ranges even further, e.g. if further restrictions are to apply to a specific user
group.
Which variable types are there and what do I use them for?
Process variables are the process values that have been defined in the PLC program and re-
flect the current status of the machine. They are uniquely identified by their
address/ItemID and are characterized by a specific data type.
EASY UI Designer
Version: 3.0
27.04.2023 Page 112/130
In addition to the pure transfer of process data, a process variable definition supports the
following special functions, among others:
• Specification of limits (maximum/minimum value)
• Specification of a substitute value
• Access to data fields
• Access to structures
• Language/variable value-dependent conversion of process variable values
Internal variables are created within the application and have no counterpart in the PLC. They
can be used for test purposes or to buffer calculations. They are created in the server project
under the node Variables > Channels > Internal by right-clicking in the table editor and select-
ing the entry New (F8) in the context menu.
EASY UI Designer
Version: 3.0
27.04.2023 Page 113/130
6 Language switching
How can I add a new language to the project?

In most cases, a visualization is distributed internationally and must be adapted to the differ-
ent markets in terms of language. In the EASY UI Designer, you can create multilingual texts
for this purpose. The goal is to enable the user to switch all texts of the visualization to the se-
lected language at the push of a button.
The currently available languages are:
• English
• German
• Chinese
• Polish
• Russian
• Dutch
• Czech (Czech)
• French
• Italian
• Spanish
• Turkish
• Swedish
English and German are integrated by default. You can select the remaining languages in the
project configurator under Features > Language Selection.
EASY UI Designer
Version: 3.0
27.04.2023 Page 114/130
How can I view and edit texts?
All settings for language switching can be found in the Project Explorer under
[Project]_Server > Language Switching.
If you double-click on the entry Language switching > Configuration > Languages, all
languages created in the project are displayed in a table editor.
All other entries under Language switching are so-called text groups, which contain the actual
texts or further subgroups with texts. Since the layouts supplied with the program already
contain some texts, most text groups are not empty.
If you double-click on a text group, all texts contained in this text group are displayed in a
table editor:
Click in a field to edit the corresponding text. Using the table editor context menu (right
mouse button) you have further options like add, duplicate, delete or copy texts.
How can I add a multilingual text?

You create your own texts in the text group User texts. The text group already contains texts
and further subgroups with texts. You can add your own texts to an existing text group or cre-
ate a new subgroup for these texts. For better orientation, it is often useful to categorize texts
according to views/pages.
To add a new text to a text group.
1. If the text group is not already open: double-click the corresponding text group in
the Project Explorer to open it in the Designer workspace
2. Select the New command in the Table Editor context menu (right mouse button).
3. In the newly added row, enter the name for the text, optionally a description, and
the related texts in the required languages.
Example: Name: "WelcomeText", German: "Willkommen", English: "Welcome".

Using the table editor context menu (right mouse button) you have further options like add,
duplicate, delete or copy texts.
The newly added text can now be assigned to the element in the properties window of a vis-
ual element via the LocalizableText property.
EASY UI Designer
Version: 3.0
27.04.2023 Page 115/130
How can I add a custom text group for my texts?
To add a new subgroup for user texts in the Project Explorer.
1. Expand the [Project]_Server > Language switching folder.
2. Select the User texts folder in it.
3. Press the <F8> function key to add a new subgroup in the selected folder.
The new text group is initially named "Textgroup1". You can change the name in the Name
field in the Property Pages window.
The new text group is automatically opened in the Designer workspace.
How can I assign a multilingual text to an element?

An existing multilingual text can be assigned to the element in the properties window of a vis-
ual element via the LocalizableText property.
For numeric values (e.g. NumericVarOut element), the associated unit can also be created
multilingual. For such elements the assignment of the texts is done via the
LocalizableUnitText property.
How can I add a multilingual text?
How does the language switching work?

The language is switched via the setLanguageAction action. In the layout templates, this
action is triggered via the LanguageSelector control in the SettingsDialog.html dialog.
In the visualization, the user can open this dialog via the button (Settings) in the header.
EASY UI Designer
Version: 3.0
27.04.2023 Page 116/130
The button is contained in the HeaderView.html view and contains the ShowDialogAction
action for opening the SettingsDialog.html dialog.
The SettingsDialog.html dialog contains a LanguageSelector that automatically reads the lan-
guages in the system and offers them for selection in the currently selected language.
The list of languages is linked in the properties window of the control under Menu Items in
the property MenuItemsLocalTextList.
How do I add dynamic information to localizable texts?

You can use the Edit Localizable Text dialog to include dynamic data in a localizable text:
• variable values in different formats
• other texts from the Language Switching system module
• date and time
• texts from alarm definitions or alarm type definitions (ParentText)
The embedding is done with the help of formatting instructions. A formatting instruction be-
gins and ends with an @ character and contains parameters, separators and formatting
characters. At runtime, the formatting statements are resolved and, for example, the current
value of the variable is displayed.
To access the dialog, open a definition in the Table Editor and click the ... button next to the
Text parameter in the Property Pages window.
In principle, you can insert one or more formatting instructions into any localizable text.
Therefore, the Edit Localizable Text dialog is available in all system modules that work with
localizable texts.
EASY UI Designer
Version: 3.0
27.04.2023 Page 117/130
Variable value
Variable text
Localized text
Localized text dependent on a variable
SystemTime
ParentText
EASY UI Designer
Version: 3.0
27.04.2023 Page 118/130
7 Alarms
How is the alarm system structured?

All settings for alarms can be found in the Project Explorer under [Project]_Server >
Alarms. Here you can define, among other things, which variable triggers an alarm, how
the alarm is displayed and what other information the alarm message should contain.
The following basic definitions are configurable:
• Alarm group: An alarm group logically combines several alarms and possibly further
sub-alarm groups into one unit.
• Alarm: An alarm monitors a process variable and displays a localized text in the inter-
face when a certain condition occurs.
• Alarm class: An alarm class defines various settings such as colors and acknowledge-
ment type for an alarm.
• Alarm type: An alarm type defines a complex structure for the interpretation of the
process variables in an alarm.
• Assignment: An assignment creates a relation between a value or a bit and the data
of a rudimentary alarm definition.
The following overview serves for a better understanding:
What steps are necessary to set up the alarm system?

To use the alarm system, a few steps are necessary in the following order:
6. Configuration of the Alarm states:
Open the node Alarms > Configuration. In the properties window you can see the dif-
ferent alarm states (e.g. active, inactive,...). Select all of them that you want to use in
your visualization.
7. Definition of Alarm classes:
By selecting the following node Alarm classes you get to the overview of the alarm
classes, which define the appearance and the acknowledgement type of the alarms
as templates.
EASY UI Designer
Version: 3.0
27.04.2023 Page 119/130
8. Alarm types: If numeric alarms are to be used, a new list must be created here by
selecting New from the context menu or by pressing F8.
9. Create Alarm group, e.g. for all alarms of a machine module
10. Create Alarms in the alarm groups
What alarm states are there?
State State Description Acknowledgement type

(bit-coded)
Reset Acknowled- Double ack- No acknow-

gement nowledge- ledgement
required ment required
required
inactive/ 000 The alarm is not active or has x x x x

cleared** been cleared.
active 100 The alarm is active. x x x x
active 011 The alarm is active. The user -* x x x

acknowledged acknowledged the active alarm.
inactive 010 The alarm was active but is no - x x -

longer active. The user has not
acknowledged the alarm in the
active state.
inactive 001 The alarm was active. The user - - x -

acknowledged has acknowledged the alarm in
the active state. Now the alarm
is no longer active. The
deactivation of the alarm must
be acknowledged again.
reactivated 101 The alarm was inactive but has - x x -

become active again without
being acknowledged. This state
is not static. It is only reported.
The alarm returns to the active
state.
* Acknowledging an alarm of this acknowledgement type directly resets the event bit. This
requires that the bit in the PLC is not permanently held at a state.
EASY UI Designer
Version: 3.0
27.04.2023 Page 120/130
** Inactive and cleared are the same state. From the time sequence cleared means that the
alarm was active before. The transition to inactive is recorded in the alarm history as an event
cleared. There is no inactive event.
What is an alarm class and what is it used for?
Alarm classes are templates for alarm parameters. They determine the appearance and the
acknowledgement type of alarms.
Examples of alarm classes are errors, warnings or info messages. Some alarm classes are al-
ready predefined and can be used. They can be found in the server project under Alarms >
Alarm classes. The following properties are displayed in tabular form:
• Name
• Text
• Acknowledgement type
• Single acknowledgement required
• Save
• Comment
Further properties can be added to the table if required by right-clicking and selecting
Options via a selection dialog.
In the Property Pages window, which is located at the bottom of the screen by default, the
name, the acknowledgement type and the display can be configured in the Common tab. In
the tab Extended the colors of the icons can be set.
The creation of new alarm classes is not yet fully supported in the current version.
How do I group alarms?

Alarms are combined into logical units in alarm groups. To create a new alarm group, click in
the project explorer in the server project on the node Alarms > Alarm groups. An overview
page opens showing at least the System alarms group, which is created automatically and
cannot be renamed or deleted. It contains all alarms of the server applications (e.g. error
messages of the communication).
Right-clicking on the gray area opens the context menu, where a new group is created by
clicking on New. In the properties window that appears at the bottom of the screen, the
name, text, icon and other settings for the group can be changed.
How do I create an alarm?

Since each alarm belongs to an alarm group, it is necessary to create an alarm group before
creating a single alarm. Another prerequisite is the definition of a variable in the PLC that is to
trigger the alarm in the visualization. For test purposes, an internal variable can be created,
i.e. a variable that is defined in the EASY UI system module Variables, but has no counterpart
in a PLC.
EASY UI Designer
Version: 3.0
27.04.2023 Page 121/130
A new alarm is created in the corresponding alarm group node, for example under Alarms >
Alarm groups > Module1_Alarms. In the gray overview window, an alarm is created per right-
click and selecting New. The following parameters can be set in the line:
• Name: Unique name for the alarm
• Type: Numeric or bit, see Alarm types
• Event variable: Defines the name of the variable that triggers the alarm. Depending
on the alarm type, the event variable has a different function.
• Bit number: For the alarm type Bit, the bit number is used to specify the triggering
bit.
• Text: Localizable text that is displayed when the alarm occurs.
• Priority: The priority defines the importance of an alarm. The integer value can be in
the range 0 to 231-1 (=2,147,483,647). The higher the value, the more important the
priority.
• Alarm class: Reference to the alarm class that defines the appearance and other
functions of the alarm.
• Comment: Field for optional notes
What are the alarm types and how are they applied?
Numerical: Numerical alarms are suitable when error codes are defined in the form of numer-
ical values. To link the error codes with the alarm information to be displayed, it is necessary
to create a table of the codes.
This table is created in the server project under Alarms > Alarm types > Numerical in the con-
text menu New or by <F8>. Each error code can now be stored in the rows with different pa-
rameters:
• Name
• Value
• Text
• Priority
• Alarm class
• Comment
Bit: Bit alarms use a special bit of a variable to trigger an alarm. To create bit alarms, select
the node to which alarms are to be added under [Project]_Server > Alarms > Alarm groups. In
the table editor, individual alarms can now be created with F8. Select Bit in the Type cell, se-
lect the variable to be triggered in the Event variable column and specify the bit that triggers
the alarm in Bit.
How do I associate alarms with a numerical list?

If a numerical list is created, the error codes must be linked to concrete alarms. This is done
by means of assignments.
To be able to create an assignment, both a numerical list under Alarms > Alarm types > Nu-
merical and the corresponding alarms in an alarm group under Alarms > Alarm group must
have been created. The assignment can then be created as follows:
EASY UI Designer
Version: 3.0
27.04.2023 Page 122/130
1. Select an alarm in the alarm group.
2. In the property Type select numerical and in the selection list select the already created
numerical list.
3. In the Event variable field create the reference to the triggering variable.
4. Click in the Text field and select the ... button there to open the dialog for editing the lo-
calizable text.
5. In the dialog link the text information from the alarms by selecting the last parameter
icon ParentText and clicking Insert.
How do I add dynamic information to localizable texts?
How do I display alarms in an alarm line?

The AlarmLineCollection control is responsible for displaying an alarm line. It is included in all
templates but can also be selected in the ribbon under Start > System > AlarmLine.
According to its name, the AlarmLineCollection is a collection of alarms. Via the property
AlarmItems > AlarmLineItems and the selection of the button an editor opens, in which
several AlarmItems can be added to the line. For each item in the property
Alarms > DesiredAlarmClasses it can be entered, which alarm classes should be displayed (e.g.
system alarm, alarm). In addition, colors and icons for the individual AlarmLineItems can be
configured in this view.
EASY UI Designer
Version: 3.0
27.04.2023 Page 123/130
8 User management
How can I create user groups?

Users can be configured under [Project]_Server > User management.
1. Double-click on User groups.
2. In the gray area that opens now you have an overview of all user groups and you can
create another one by right-click and selecting New (F8).
3. Give a name, e.g. “Operator” and, if necessary, include a localizable text in the
second column.
4. In the Property Pages you can make further group specific settings:
• Time until automatic logout
• Users of this group may be deleted
• Password change interval
• Maximum permitted login failures
How can I create users?

Users are bound to a user group, so at least one group must be created.
1. In the Project Explorer, under Server > User Management > User Groups you can see
the user groups that have already been created.
2. Select the user group to which you want to add a user.
3. Insert a new line per right-click and selecting New or (F8) in the now opened area
and enter the user data and further settings there.
How can I create and assign rights?

A rights-oriented user management is useful when there are user groups that also have rights
that the other user groups do not have.
They are used in two places of an application:
• User groups can be assigned multiple rights.
• One right can be assigned to each control via the Authorization property.
Rights can be found in the server project under User administration > Rights. They can be con-
figured as follows:
1. A new right can be added in the table editor by pressing F8. For example, it can be
called "may create recipe".
2. If a line is selected, all user groups are listed in the Property Pages at the bottom, so
that the assignment of rights for certain groups can be made directly.
EASY UI Designer
Version: 3.0
27.04.2023 Page 124/130
How can I assign a right to an element?
Controls can be hidden or disabled depending on the rights of the logged-in user. The follo-
wing properties are responsible for this behavior:
• AuthorizationRight: Expects the name of a rights definition from the project file. A
user who has a reference to the right specified here via his group may operate the
control element. If no right is specified in the property, the control element is always
unlocked.
• AuthorizationMode : The property specifies how the control should respond when
authorized.
o Disabled: In the absence of authorization, the control is disabled, i.e. it can-
not be operated. For many controls, this state can then also be recognized
graphically (e.g. by setting the BorderColor and Fore-groundColor to gray).
You can test how the control looks at runtime in the Disabled state at devel-
opment time by enabling the Disabled property.
o Hidden: If the control is not enabled, it becomes invisible.
o Collapse: This property is especially useful in responsive applications. If the

control is not enabled, it also becomes invisible, but the subsequent ele-
ments in a FlexLayout move to the place of this element. In an AbsoluteLay-
out it is only hidden and has no effect on other elements.
EASY UI Designer
Version: 3.0
27.04.2023 Page 125/130
9 Recipes
Visualization recipes describe sets of process values. These usually define the settings of a
machine for manufacturing one product from a product range. By writing recipes to the PLC,
it is possible to switch between the individual products to be manufactured. The recipes are
defined in the PLC Designer. The template available in EASY UI Designer is linked to the block
and reads the data automatically.
How do I activate the recipe function in the EASY UI Designer?

To use the CoDeSys recipe system in the EASY UI Designer, the following settings must be
made in the Project Configurator.
• Expand the entry Features > Recipe system and activate the toggle button to add the
recipe template to the project.
• Download the CoDeSYS export file by clicking on the icon. It contains the required
PLC block for the recipe function.
• Pause the creation of the visualization project and switch to the PLC Designer.
EASY UI Designer
Version: 3.0
27.04.2023 Page 126/130
In your already created PLC project in the PLC Designer please execute the following steps:
6. Select the Application node in the project tree.

7. Select Project > CoDeSYS import from the menu. In the follow-
ing step, select the downloaded export file and confirm with
Open. In the dialog window please select all elements and con-
firm with OK.
8. Create a new symbol configuration by Add Object >
Symbol configuration. Please make sure to check OPC UA, be-
cause this is the communication channel. The recipe variables
are automatically added to the symbol configuration and can-
not be selected individually.
EASY UI Designer
Version: 3.0
27.04.2023 Page 127/130
9. Please make sure that in the Recipe Manager the File Path is set to \sdcard\plc\recipes.
10. Now generate the export file for EASY UI Designer by clicking Build > Build the program >
Generate code in the menu.
Now return to the EASY UI Designer project configurator.

5. Under Communication > Offline, enter the path of the symbol configuration you have
just generated.
6. Finish configuring the visualization project and wait until EASY UI Designer starts.
7. The recipe variables can be found under Variables > Channels > Controller OPC UA >
PLC > Application > Recipes.
8. The recipe page can be seen in the client project under pages. It already contains all
variable links to the PLC block and does not have to be functionally adapted. The
recipe dialogs are contained in the order dialogs and also already configured.
EASY UI Designer
Version: 3.0
27.04.2023 Page 128/130
10 Glossary
Page? View? Region? AppShell? It’s all Greek to me…

AbsoluteLayout – A layout container in which the visual elements are positioned absolutely
by x and y coordinates.
Action – Actions are used to bind a specific behavior to a visual element. For example, you
can add an action to a button that displays a specific page or dialog when the button is
pressed. You can access the settings for actions via the button in the properties window.
Alarm – Alarms are used to output operating errors, messages and indications of a machine.
An essential component of a visualization is therefore the recording, display and acknowl-
edgement of alarms.
AppPageNavigator – The AppPageNavigator is a placeholder for the content pages of the vis-
ualization, for example "MachinePage.html". There is always only one AppPageNavigator per
visualization.
AppShell – The file "AppShell.html" defines the main view of the visualization. It contains the
basic layout of the visualization, which consists of at least one menu and the AppPageNavi-
gator.
Controls – Controls are the visual objects that you can put on a page. Examples are buttons, a
DonutGauge or a FlexLayout.
FixClassical Layout – A layout template that includes a header with settings and a footer with
a navigation menu. Controls can be positioned here absolutely.
FixTop Layout – A layout template that contains a header with settings and a navigation
menu. Controls can be positioned here absolutely.
FlexLayout – A layout container that causes responsive display of visual elements.
Page – A Page is an element that shows the actual contents of the visualization. An example is
a diagnostic page for the machine (DiagnosticsPage.html).
Region – A Region is a placeholder for a View. There can be multiple regions on a page. For
example, in FixLayout templates, a Region is used for the header.
Responsive Layout – A layout template that provides navigation in a side menu. The Respon-
sive template flexibly adapts to all end devices. For this reason, the controls here are not posi-
tioned absolutely, but flexibly (on a FlexLayout).
Recipe – A recipe describes a set of process values that usually define the settings of a
machine for manufacturing a product from a product range. By writing recipes to the control-
ler, it is possible to switch between the individual products to be manufactured via the visuali-
zation.
Trigger – A trigger monitors various properties, for example an object or a variable, and an-
nounces changes to them. Actions can be triggered on the basis of such events.
User management – The user administration is used to assign personal authorizations within
the visualization. This allows visual elements for the control and output of information to be
blocked for certain user groups.
EASY UI Designer
Version: 3.0
27.04.2023 Page 129/130
View – A view is a specific element that can be used multiple times in the visualization. It is
placed in a region that can exchange views at runtime. An example is a view with navigation
buttons (ButtonView.html). The encapsulation in a view allows a flexible exchange of naviga-
tion buttons during operation.
EASY UI Designer
Version: 3.0
27.04.2023 Page 130/130

EASYUI Hilfe DE ENG V3

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

EASYUI Hilfe DE ENG V3

Hochgeladen von

Copyright:

Verfügbare Formate

EASY UI Designer

Welche EASY Engineering Tool Lizenz benötige ich?

Welche Systemanforderungen hat der EASY UI Designer?

Prozessor 2.2 GHz (Dual Core) oder schneller

Arbeitsspeicher 4 GB oder mehr

Bildschirmauflösung 1920 x 1080 Pixel oder höher

Grafikhardwarebeschleunigung DirectX 9 oder höher

Benötigter Festplattenplatz zur Installation 1.5 GB

Welche Steuerungen werden unterstützt?

Die Kommunikation mit der Steuerung erfolgt ausschließlich über

Welche Browser werden unterstützt?

Welche Shortcuts gibt es?

Strg + S Speichert das aktuell geöffnete Projekt.

Strg + Z Macht die letzte Aktion rückgängig.

Strg + Y Wiederholt die letzte Aktion, die rückgängig gemacht wurde.

Entf Löscht das markierte Element.

Enter Zeigt das im Projektexplorer markierte Element im entsprechenden Editor

F2 Ruft den Dialog Datei umbenennen auf, um die im Projektexplorer mar-

F3 Markiert die nächste Instanz des Suchworts.

F4 Öffnet das Eigenschaftenfenster, falls es geschlossen wurde.

Alt + F4 Schließt die Entwicklungsumgebung.

F5 Kompiliert und startet das Projekt.

F8 Öffnet den Dialog zum Hinzufügen eines Elements zum Projekt.

Umschalt + F8 Erstellt einen neuen Ordner im Projektexplorer.

Strg + Pfeil Springt zum Ende des Worts.

Strg + Pfeil Springt zum Anfang des Worts.

Strg + S Speichert das aktive Dokument.

Strg + Umschalt Speichert alle im Designer geladenen Dokumente.

Strg + Scrollrad Vergrößert bzw. verkleinert die Ansicht im Designer.

Leertaste + Erlaubt das Verschieben der Ansicht im Designer per Maus.

Strg + Pfeil Springt zur letzten Zelle der Zeile.

Strg + Pfeil Springt zur ersten Zelle der Zeile.

Strg + Pfeil Springt zur ersten Zelle der Spalte.

Strg + Pfeil Springt zur letzten Zelle der Spalte.

Umschalt + Markiert ein Zeichen weiter nach rechts.

Umschalt + Markiert ein Zeichen weiter nach links.

Umschalt + Markiert eine Zeile weiter nach oben.

Umschalt + Markiert eine Zeile weiter nach unten.

Welche Optionen bietet mir der Projektkonfigurator?

Wie richte ich ein neues Projekt ein?

Wie ist der EASY UI Designer aufgebaut?

④ Designer-Arbeitsbereich – Im Designer-Arbeitsbereich gestalten Sie die verschiedenen

⑤ Dokumentgliederung – In der Dokumentgliederung wird die Gliederung der im Designer-

⑥ Ausgabefenster – Im Ausgabefenster werden Meldungen der Entwicklungsumgebung an-

⑦ Seiteneigenschaftenfenster – Im Seiteneigenschaftenfenster werden die Eigenschaften

⑧ Eigenschaftenfenster – Im Eigenschaftenfenster werden die Eigenschaften des im Desig-

⑨ Statuszeile – In der Statuszeile wird der Status der Entwicklungsumgebung angezeigt.

Wie ist ein Projekt aufgebaut?

Wie kann ich ein Projekt auf dem Zielgerät starten?

2. Projekt auf Zielgerät übertragen

3. Projekt im Browser starten

Wie kann ich ein Projekt lokal starten?

Welche Layouts stehen mir für die Hauptansicht zur Verfügung?

Wie ist das FixClassical-Layout aufgebaut?

Unterhalb des Projekt-Explorer wird die Dokumentgliede-

HeaderRegion → View „HeaderView.html“

ButtonRegion → View „ButtonView.html“

Die Schaltflächen (Benutzer) und (Einstellungen) in der

Die Ansicht „HeaderView.html“ definiert die Kopfzeile der Applikation.

③ Die Schaltfläche (Benutzer) öffnet über die unter projektierte showDialogAc-

• Wie in der Dokumentgliederung zu sehen, enthält die View ein TabBar-Steuerele-

Wie ist das FixTop-Layout aufgebaut?

MenuRegion → View „HeaderView.html“