OCT-Handbuch
Breadcrumbs

3.3.8.7. Editor

Der Editor kann z.B. für Startseiten einer Ebene, Zusammenfassungen, Übersichten mit Verlinkungen oder Anleitungen zur Benutzung des Bereichs Datenerfassung verwendet werden.

HTML kann im Tab-Typ “Editor” manuell per Editor erzeugt werden. Hierbei kann man sowohl über die Benutzeroberfläche Elemente einfügen/bearbeiten als auch direkt in HTML-Code schreiben.

Diesen Editor findet man auch auf der Startseite der Applikation auf Serverebene und auf der Startseite der Datenbankebene.


3.3.8.7.1. Tab “Editor” hinzufügen

Tabs können auf den Ebenen “Werk“, “Fabrik“ und “Produktlinie” in der Menüleiste über das Icon image-20240809-115013.png “Tab hinzufügen” neu erstellt werden.

image-20250820-125427.png
Tab hinzufügen - Tab-Typ “Editor”

ID

  • Dies ist das Eingabefeld für die Tab-ID für den neuen Tab. Die ID muss in dieser Ebene eindeutig sein.

Die ID eines Tabs kann nur über “Tab-ID ändern (verschieben)” geändert werden.

Typ

  • In einem Drop-down-Menü kann aus einer Auswahl von Tab-Typen der Typ ausgewählt werden.

Anzeigeposition

  • Die Eingabe legt fest, in welcher Reihenfolge die Tabs in der Tab-Leiste angezeigt werden.

  • Der Tab mit dem niedrigsten Orderindex steht in der Menüleiste ganz links und wird beim Öffnen der Ebene zuerst angezeigt. Das gilt nicht, wenn dieser Tab ausgeblendet ist.

Sichtbarkeit

  • In einem Drop-down-Menü kann die Sichtbarkeit des Tabs in der Menüleiste ausgewählt werden:

    • Sichtbarkeit “0” = wird ausgeblendet

    • Sichtbarkeit “1” = wird angezeigt

  • Ausgeblendete Tabs können über das Kontextmenü der Tabs wieder eingeblendet werden.

  • Beim ersten Tab, der hinzugefügt wird, kann die Sichtbarkeit nicht ausgewählt werden. Dazu muss der Tab erneut über “Tab bearbeiten” geöffnet werden.

Name

  • Dieser Name wird in der Menüleiste für Tabs angezeigt und sollte möglichst gut beschreiben, was der Tab beinhaltet.

Kommentar

  • Hiermit kann der Tab genauer beschrieben werden.

  • Der Kommentar erscheint als Tooltip, wenn man mit der Maus über dem Tab-Namen in der Menüleiste schwebt.


3.3.8.7.1.1. Gespeicherte Prozedur (a)

Es wird direkt ein Tab mit einem Editor angelegt. Es wird dafür keine Datenquelle benötigt.

image-20250820-125735.png

Datenquelle

  • Das Eingabefeld für eine Datenquelle muss nicht ausgefüllt werden, da die Eingabe der Daten direkt über den Editor stattfindet.

Text

  • Dieser Text kann als einleitende Beschreibung verwendet werden.

  • Er steht im Anzeigefeld ganz oben, direkt unter der Menüleiste für die Tabs.

Button “Anwenden”

  • Mit Auswahl dieses Buttons wird der neue Tab erstellt und in der Menüzeile der Tabs angezeigt.


3.3.8.7.1.2. SQL-Befehl (b)

Diese Option ist für den Tab “Editor” nicht aktiviert.

image-20250820-125838.png

3.3.8.7.2. Menüleiste für Tab “Editor”

Die Optionen der Menüleiste beziehen sich auf den Tab als Gesamtheit.

image-20250820-130016.png
Ansicht “Menüleiste für Tabs”

Icon image-20241002-085701.png “Feldliste anzeigen”

  • Für diesen Tab-Typ nicht aktiviert.

Icon image-20241002-085750.png “Optionen”

  • Für diesen Tab-Typ nicht aktiviert.

Icon image-20241002-085810.png “Speichern”

  • Über dieses Icon werden direkt alle Änderungen des Tabs gespeichert.

Icon image-20241002-085840.png “Neu laden”

  • Temporäre und nicht gespeicherte Änderungen können so verworfen werden.

Icon image-20241002-085855.png “Importieren”

  • Ein Tab kann mit all seinen Inhalten inklusive Layout importiert werden.

  • Es öffnet sich ein Dialog, in welchem die zu importierende Datei mit der Dateierweiterung “.sql” über den Button “Datei öffnen” von einem Speicherort ausgewählt bzw. importiert werden kann.

  • Nachdem eine Datei ausgewählt wurde, werden die zugehörigen Daten automatisch im Dialog eingetragen.

  • Die Quell-Tab-ID wird im Eingabefeld für die Ziel-Tab-ID automatisch übernommen und kann da bearbeitet werden. Des Weiteren muss in der Baumstruktur der Zielort, wo der Tab eingefügt werden soll, ausgewählt werden.

image-20250917-081638.png

Icon image-20241002-085934.png “Exportieren”

  • Der Tab kann über das Icon image-20250820-085409.png in der Menüleiste oder über das Rechtsklick-Kontextmenü exportiert werden.

  • Es bestehen dazu drei Möglichkeiten: “Tabdefinition exportieren”, “Nach PDF exportieren” und “Drucken”. Die Option “Nach Excel exportieren” ist nicht verfügbar.

  • Bei Auswahl von “Tabdefinition exportieren” öffnet sich ein Dialog, in welchem der Dateiname “tab_<Tab-ID>” vorausgefüllt ist. Dieser Name kann manuell angepasst werden. Der Tab wird mit allen öffentlichen und privaten Layouts als SQL-Datei exportiert.

image-20251124-142008.png
  • Bei Auswahl von “Nach PDF Exportieren” gibt es zwei Optionen des PDF-Formats zur Auswahl: Hochformatmodus oder Querformatmodus. Nach Auswahl eines der Modi wird direkt der Download als PDF-Datei gestartet.

  • Bei Auswahl von “Drucken” kann der Inhalt des Tabs gedruckt werden.

Die Optionen “Nach Excel exportieren” und “Nach PDF exportieren” sind je nach Tab-Typ (de-)aktiviert.

Icon image-20240809-115013.png “Tab hinzufügen”

  • Tabs können auf den Ebenen “Werk”, “Fabrik” und “Produktlinie” neu hinzugefügt werden.

  • Bei Auswahl dieses Icons öffnet sich ein neuer Dialog, welcher im jeweiligen Unterpunkt zum Tab-Typ (3.3.8.7. Editor | 3.3.8.7.1. Tab “Editor” hinzufügen) ausführlich beschrieben wird.


3.3.8.7.3. Menüleiste des Editors

Über das Icon image-20240826-112947.png kann der Editor geöffnet werden und es werden dann alle Bearbeitungsmöglichkeiten des HTML-Containers angezeigt. Die Bearbeitungsmöglichkeiten ähneln denen eines Word-Dokuments und sind somit einfach zu benutzen.

Informationen zur Verwendung von Links im Tab-Typ “Editor” finden Sie hier: 1.5. Links in OCT (URLs) | 4.1. Links im Tab Typ “HTML Editor”

image-20260306-135218.png
Ansicht “Editor - geschlossen”
image-20260306-135317.png
Ansicht “Editor - geöffnet”

Rückgängig/Wiederholen

  • image-20260309-100016.png image-20260309-100039.png Pfeile - machen Änderungen rückgängig oder stellt sie wieder her.

Die Seitenhintergrundfarbe kann hiermit nicht zurückgesetzt werden. Dafür muss der Dialog zur Seitenhintergrundfarbe verwendet werden.

Textformatierung

  • Schriftgröße - ändert die Größe des markierten Textes.

  • Schriftart - wählt die Schriftart für den markierten Text aus.

  • image-20260309-100401.png Fett - hebt den markierten Text fett hervor.

  • image-20260309-100428.png Kursiv - stellt den markierten Text kursiv dar.

  • image-20260309-100529.png Durchgestrichen - streicht den markierten Text durch.

  • image-20260309-100558.png Unterstrichen - unterstreicht den markierten Text.

  • image-20260309-100626.png Textausrichtung - richtet den ausgewählten Text linksbündig, zentriert, rechtsbündig oder im Blocksatz aus.

  • image-20260309-100823.png Nummerierte Liste - erstellt eine nummerierte Liste.

  • image-20260309-101022.png Aufzählungsliste - erstellt eine Liste mit Aufzählungszeichen.

  • Überschrift - formatiert Text als normalen Text (Normaler Text) oder Überschrift (z.B. Überschrift 1).

  • image-20260309-101202.png Schriftfarbe - formatiert die Schriftfarbe des markierten Texts.

  • image-20260309-101758.png Hintergrundfarbe - erstellt eine Hintergrundfarbe für den markierten Text.

  • image-20260309-101847.png Seitenhintergrundfarbe - formatiert die Hintergrundfarbe der kompletten Seite. Um die Farbänderung rückgängig zu machen bzw. die Farbauswahl aufzuheben, muss im Farbauswahldialog das Icon image-20260309-104249.png “Clear value” ausgewählt werden.

image-20260309-104158.png

Inhalt einfügen

  • image-20260309-105850.png Textmarke - fügt eine Textmarke auf der Seite ein, um z.B. ein Inhaltsverzeichnis zu erstellen. Es muss eine ID bzw. ein Textmarkernamen eingegeben werden.

image-20260309-104753.png

Nachdem eine Textmarke gesetzt wurde, muss das Icon image-20260309-105829.png “Link hinzufügen” ausgewählt werden. Es öffnet sich ein Dialog, in welchem im Eingabefeld “URL” Folgendes eingegeben werden muss: “#” plus “ID der Textmarke”. Optional kann im Eingabefeld “Text” ein Anzeigetext eingegeben werden, der bestimmt, wie der Link auf der Seite angezeigt wird.

image-20260309-113217.png

Um nachträglich die ID der Textmarke einzusehen, muss die entsprechende Textmarke markiert und das Icon image-20260309-105810.png “Bild hinzufügen” ausgewählt werden. Es öffnet sich ein Dialog “Bild aktualisieren”, in welchem unter “Alternativer Text” die ID der Textmarker angezeigt wird.

image-20260309-113018.png
  • image-20260309-105829.png Link - fügt einen Link (absolute und relative Links) hinzu. Dafür muss eine URL und optional ein Text (Anzeigetext) eingegeben werden.

image-20260309-105356.png
  • image-20260309-105810.png Bild - fügt ein Bild in den Inhalt ein und ermöglicht die Bearbeitung dieses Bilds. Das Bild kann aus dem Internet hinzugefügt oder von einem lokalen Speicherort hochgeladen werden.

image-20260309-105555.png
  • image-20260309-105917.png Formate - löscht das Format des markierten Bereichs.

  • image-20260309-105957.png Codeblock - erstellt einen Bereich, in den Programmcode eingefügt werden kann.

  • image-20260309-110019.png Blockzitat - formatiert den ausgewählten Text als Zitat mit einer breiten Linie am linken Rand.

  • image-20260309-110426.png Trennlinie - fügt eine horizontale Trennlinie ein.

Tabellen

  • Rechtsklick - Kontextmenü - Mit einem Rechtsklick in eine Tabelle öffnet sich ein Kontextmenü, in welchem alle Bearbeitungsmöglichkeiten für die Tabelle (wie in der Menüleiste) verfügbar sind. Zusätzlich ist unter “Einfügen” noch die Option “Kopfzeile einfügen” verfügbar.

image-20260309-115829.png
  • image-20260309-110502.png Tabelle einfügen - fügt eine neue Tabelle ein. Es öffnet sich ein Fenster, in welchem man die Zeilen- und Spaltenanzahl anpassen kann.

image-20260309-094131.png
  • image-20260309-110624.png Tabelle löschen - löscht die ausgewählte Tabelle.

  • image-20260309-113421.png Zeilen einfügen oder löschen - Bearbeitet die Tabellenstruktur, indem neue Zeilen hinzugefügt oder Zeilen gelöscht werden können.

  • image-20260309-113707.png Spalten einfügen oder löschen - Bearbeitet die Tabellenstruktur, indem neue Spalten hinzugefügt oder Spalten gelöscht werden können.

  • image-20260309-113742.png Zellen- und Tabelleneigenschaften - Rahmen, Abmessungen, Hintergründe und Ausrichtung der Zelle oder der Tabelle können bearbeitet werden.

image-20260309-114000.png

3.3.8.7.4. Beispiel Tab-Typ “Editor”

Im Anschluss werden verschiedene Anwendungsbeispiele gezeigt.

  • Beispiel 1:

image-20260220-142328.png
  • Beispiel 2: Startseite des Moduls “Vertragsmanagement” mit Anweisungen

image-20251016-094256.png
  • Beispiel 3: Anleitung für das Anlegen eines Vertrags im Modul “Vertragsmanagement”

image-20251016-093734.png
  • Beispiel 4: Systemdokumentation des Moduls “Vertragsmanagement”

image-20251016-094644.png
image-20251016-094838.png

3.3.8.7.5. Kontextmenü des Tabs

Das Kontextmenü des Tabs ist ausführlich unter “3.3.8.1. Tabs - allgemein | 3.3.8.1.4. Kontextmenü der Tabs” beschrieben.