Masken-Editor (2. Generation)

Grundlagen

Das CURSOR-CRM bietet einen Masken-Editor der 2. Generation an.  Bestehende Masken aus dem CRM müssen nun nicht mehr pixelgenau sondern können responsiv erstellt werden. Durch Flex-Layout kann die Anwendung durch das verwendete Gerät und seine Darstellungsmöglichkeiten optimal angezeigt werden.  Um eine Maske bearbeiten zu dürfen, brauchen Sie eine  entsprechende Berechtigung.

Das Flex-Layout ist ausschließlich im Web Client verfügbar. Mit dem Tool bearbeiten Sie Masken sowohl für den Windows als auch den Web Client.  Allerdings werden die Masken für den Windows Client mit der reduzierten Funktionen generiert.  Vor allem Layout-Einstellungen, die im Web Client per css gesteuert werden. Wir eine pixelgenaue Maske aus dem Windows Client im Flex-Layout erstellt und gespeichert, kann sie nicht mehr pixelgenau weiter designed werden. 

C0-Masken müssen zuerst in der Admin-Konsole des Rich-Clients übersteuert werden, damit sie im Masken-Editor bearbeitet werden können.

Tipps zum Maskendesign

Bevor Sie eine Maske bearbeiten, beachten Sie folgende Punkte:

• haben Sie entsprechende Rechte

• Prüfen Sie bei Bedarf die Vorschau bei niedrieger Auflösung (Geräte-Vorschau)

• wenn Sie von dem alten "Maskenformat" in das neue migrieren, können die Änderungen mit dem neuen Masken-Editor nicht in das alte Format zurückgeführt werden.

• Selbst bei kleineren Anpassungen empfehlen wir die Umstellung auf das Responsiv-Design

• Sie müssen nicht zwangsläufig alle Entitäts-Masken  auf einmal umstellen, die Anwendung unterstützt beide Formate.

• Die vorgeschlagenen Parameter der Layout-Eigenschaften sollen nur mit Vorsicht angepasst werden. CSS-Kenntnisse sind bei der Konfiguration der Layout-Eigenschaften von Vorteil. Diese Änderungen greifen zudem nicht im Windows Client.

Editor starten

• öffnen Sie das Kontextmenü auf der zu bearbeitenden Maske mit einem Rechtsklick auf die Entitäten-Überschrift und klicken Sie auf Masken-Editor

• Alternativ drücken Sie die Tastenkombinationen STRG +ALT+ UMSCHALT ⇧+ M 

• oder wählen Sie im Hilfe-Menü Masken-Editor öffnen.

Beim Start wählen Sie, welche Maske Sie bearbeiten möchten:

Geben Sie den Entitätsnamen ein und bestätigen Sie mit übernehmen.

Allgemeine Hinweise zur Bedienung

• Überarbeitung erfolgt im Arbeitsbereich - Konfiguration im Panel rechts

• Neue Komponenten werden unter Beachtung der Hierarchie per Drag and Drop hinzugefügt

• Tabs müssen auf den Tabs-Headern abgelegt werden

• Markierte Elemente auf der Maske können Sie löschen oder verschieben oder mit der darüber liegenden Komponente markieren 

• In der Baumansicht können Komponenten per Drag and Drop anders hierarchisch angeordnet werden.

• Felder können gefiltert werden

• Ein/Ausklappen der Komponenten in der Baumansicht ist möglich

• Mehrauswahl von Komponenten und gleichzeitiges Bearbeiten  ist ebenfalls möglich

• Beim Verlassen erscheint ein Sicherheitsdialog, ob Änderungen gespeichert werden sollen

Aufbau

Wurde eine Maske gewählt kann Sie nun überarbeitet werden.

Abbildung: Ansicht einer Maske im Editor

Das Editor-Fenster kann man in folgende Bereiche aufteilen:

• Schalterleiste

• Device-Vorschau

• Arbeitsbereich

• Konfigurationsbereich

Masken importieren/exportieren

Maskendesigner können nun Flex-Masken aus dem Maskeneditor heraus als Datei zwischenspeichern, um auf diverse Zwischenstände zugreifen zu können und darüber hinaus Masken aus einem Sandbox-System in ein Entwicklungssystem zu übertragen.

• Der Export bietet die Flexmaske als XML zum Speichern im Dateisystem des Clients an.

• Der Import liest diese XML-Datei und ersetzt die aktuelle Maske im Editor.
  Die importierte Maske muss explizit gespeichert werden, um Modulzugehörigkeit etc. sicher zu stellen

Baumansicht

Unter Baumansicht kann die Hierarchie-Struktur eingesehen werden. Die Elemente können dann per Drag and Drop verschoben oder mit einem Klick auf das Auge-Symbol temporär ausgeblendet werden.

Konfiguration

Unter Konfiguration werden Parameter für die Masken-Komponenten hinterlegt.

Komponenten

Komponenten sind einzelne Maskenbestandteile, wie z.B. Container und Felder, mit welchen man eine Maske erstellt. Diese sind im Arbeitsbereich zu platzieren.

Für jede Komponente werden Layout-Eigenschaften konfiguriert.

Komponenten suchen

Es ist möglich, Komponenten nach ID-Namen zu suchen. Wird in der Baumansicht der ID-Name eingegeben, so wird die Komponente auf der Maske und in der Baumansicht hervorgehoben.

Abbildung: Suchfunktion im Masken-Editor

2 3 4 Spalten

Spaltencontainer

• Komponententyp

• Name

• Vert.vergrößern - es wird der restlich vertikal vorhandene Platz im Elterncontainer genutzt

• Umklappen - bestimmt, ob die Zeile bei kleinerer Auflösung umgebrochen werden soll (ja, nein)

Spalte

• Komponententyp

• Name

• Standardbreite

• Maximalbreite - Innerhalb dieses Bereiches skaliert die Spalte analog ihrer Flex-Breite.
  Wenn alle Spalten eine Maximalbreite besitzen und das Fenster größer als die Summe dieser wird, wird Whitespace generiert und das Layout darin zentriert. Die Spalten sind dabei zentriert und das White-Space gleichmäßig darum verteilt.
  Wenn alle Spalten eine Standardbreite besitzen und das Fenster kleiner als die Summe dieser wird, so werden die Spalten umgebrochen (Flex-Wrap)

• Mindesthöhe

• Abstand

Auswertung

• Komponententyp

• Name

• Report - zugrunde liegende Auswertung

• Automatisch ausführen in (Manuell / in Sekunden)

• Toolbar anzeigen

• Vert.vergrößern

• Mindesrhöhe (wenn Vert.vergrößern aktiviert)

Box

Simpler Container (Ersatz für frühere Panels)

• Komponententyp

• Name

• Rahmen anzeigen

• Vert.vergrößern

• Mindesthöhe

• Abstand - innerer Abstand

Button

Schalter auf der Maske

Der Button muss einer bestehende Feldgruppe hinzugefügt werden

• Komponententyp

• Name

• Text - Tooltip

• Horiz. auffüllen

• Icon 

• Standardbreite

• Höhe

• Abstand - Abstand nach außen zu anderen Komponenten

• Textausrichtung

Colapsible

• Komponententyp

• Name

• Text

• initial zugeklappt

• Vert. vergrößern

• Maximierbar

Feldgruppe

• Komponente für Container für Labels, Buttons und Felder.

• Aus der Komponentenliste hinzugefügte Felder sind bereits in einer Feldgruppe und können nicht noch einer bestehenden Feldgruppe hinzugefügt werden.

• Komponententyp

• Name

• Umklappen (ja,nein)

• Abstand - interner Abstand (Padding)

Infobaord

• Komponententyp

• Name

• Systemstandard - Als "Systemstandard" im Masken-Editor markierte Boards können von Anwendern auf den Entitätsmasken nicht editiert werden. Das Aufrufen der Boardverwaltung wird dadurch unterbunden.

• Vert. vergrößern

• Infobard - startet den Board-Konfigurator

• Mindesthöhe

• Abstand

Karte

Karten sind Container mit einem vorgefertigten Design. Eine Karte erhält also einen (fast)-weißen Hintergrund und einen leichten Schatten.

• Komponententyp

• Name

• Vert. vergrößern

• Abstand entfernen

• Maximierbar

• Mindesthöhe

• Abstand 

Weitere Eigenschaften einer Karte und ihre Verwendung mit anderen Komponenten:

• Ein TabbedPane ist als zentrales Element in der UI zu verwenden

  • Das Pane wird als Karte dargestellt; erhält genau so einen (fast)-weißen Hintergrund und einen Schatten

  • Weitere darauf platzierte TabbedPanes, Boxen, Collapsibles, Spaltenlayouts usw. werden nicht als Karten dargestellt

    • →  Keine Cards in Cards!

• Es können mehrere Karten in der UI neben-/untereinander verwenden werden

  • Auf diesen Cards können wiederum TabbedPanes, Boxen, Collapsibles verwendet werden

    • Diese untergeordneten Komponenten werden nicht mehr als Cards dargestellt

      • →  Keine Cards in Cards!

  • Die Cards werden in Spaltenlayouts organisiert

• Wenn ein TabbedPane direkt auf dem Hintergrund oder in einem Spaltenlayout platziert wird, wird dieses Pane als Karte dargestellt

• TabbedPanes, die sich in einem anderen TabbedPane oder einer Karte befinden, werden nicht mehr selber als Card dargestellt

• Dabei gelten folgende Regeln für die entsprechenden Komponenten:

• Collapsibles haben 2 Styles:

  • Ohne Rahmen: Dann liegen sie ohne Margin an den Rändern der Karte (und auch von TabbedPanes) an
    

    

    
    
    

  • Mit Rahmen: Dann liegen sie mit Margin in der Karte (und im TabbedPane), damit ein erkennbarer Abstand zwischen Karte und Rahmen existiert
    

    

• • TabbedPanes haben 2 Styles:

    • Ohne Rahmen: Dann liegen sie ohne Margin an den Rändern der Karte (und auch von weiteren Eltern-Tabs und Collapsibles) an
      

      

      
      

    • Mit Rahmen: Dann gibt es ein Margin, damit der Rahmen in der Karte sichtbar ist
      

      

      
      
      

  • Infoboards und Webviews liegen ohne Margin an den Rändern der Karte an

    • Gleiche Defaults bei de-/aktiviertem Rahmen wie oben

Label

Feldbeschreibung

• Komponententyp

• Name

• Text (Tooltip)

• Horiz. auffüllen

• Text umbrechen

• Icon

• Standardbreite

• Höhe

• Abstand

• Textausrichtung

Maskendesigner kann das zugehörige Label zu einem auf der Maske platzierten und vorher markierten Feld generieren lassen. Es wird dabei innerhalb derselben Feldgruppe vor dem entsprechenden Feld platziert. Das Label wird nur dann generiert, wenn das Feld, für das es generiert werden soll, nicht bereits das zugehörige Label im Editor besitzt.

Beim Drücken des Buttons wird geprüft wird, ob genau ein Feld ausgewählt ist. Sind mehrere Felder gleichzeitig platziert, wird eine Hinweismeldung angezeigt, dass die Funktion nur verfügbar ist, wenn genau ein Feld ausgewählt ist.

Tab

Einzelner Tab

Ein Tab muss einer bestehenden Tabgruppe hinzugefügt werden.

• Komponententyp

• Abstand

Tabgruppe

Ein Sammler für mehrere Tabs

• Komponententyp

• Name

• Vert. vergrößern

• Tabs

• Maximierbar

• Mindesthöhe 

Webview

Einbettung von Webseiten

• Komponententyp

• Name

• URL

• Login Token verwenden - relevant für Seiten, wo Anmeldung notwendig ist

• Rahmen anzeigen

• Vert. vergößern

• Mindesthöhe - (wenn Vert.vergrößern aktiviert)

• Höhe - (wenn Vert.vergrößern deaktiviert)

• Abstand

Felder

Felder befinden sich beim Hinzufügen bereits in einer Feldgruppe und können direkt auf der Maske platziert werden. Felder können in andere Feldgruppen verschoben werden, allerdings nicht in andere Container.

• Name - interner Name, der nicht geändert werden kann.

• Max width

• Flex basis - vorgeschlagene Mindest-Breite. Bei kleineren Auflösungen wird innerhalb der Feldgruppe umgebrochen

• Margin

• Besonderheit: Editor-Feld

Wenn 'Vert. vergrößern' aktiv ist, werden die Layout-Eigenschaften (Height und Flex basis) übersteuert.

Felder filtern

In der Komponentenansicht können verfügbare Felder nach Namen oder Teilnamen gefiltert werden, um so schneller auf das gewünschte Feld zugreifen und die Maskengestaltung vereinfachen zu können. 

Vorlagen

Zur Verfügung stehen auch vorgefertige Layouts oder Layoutkomponenten. Diese sollen die Maskengestaltung vereinfachen.

Es gibt folgende Vorlagen:

• Komponentenkombination: Karte + Collapsible (Collapsible-Karte)

• Dreispaltiges Hedaer-Layout

• Zweispaltiges Layout

Diese Vorlagen sind nicht konfigurierbar und bleiben immer gleich.

Guidelines für Cards

Annahmen/Voraussetzungen/Rahmenbedingungen für neues Design

• Die Masken betreffen den Auslieferungszustand in Standard-Schicht

• Jeder Kunde erhält mit dem Update alle Standard-Masken im Cardlayout

• Kundenmasken-Masken, die die Standardmasken übersteuern, werden nicht überschrieben.

  • Kunden-Masken müssen manuell im neuen Maskeneditor geöffnet werden. Im dortigen Hinweisdialog muss bestätigt werden, dass man die Umstellung der Maske ins Flex-Layout vornehmen möchte.

  • Masken im Flexlayout können mittels Karten neu angeordnet werden.

  • die neuen Elemente sind über den neuen Maskeneditor zugänglich: Collapsibles, Karten und Boards auf Karten

• Besitzt ein Kunde Kunden-Masken (C2-Schicht) und Standard-Schicht-Masken, bleiben die Kunden-Masken bestehen und die Standard-Schicht-Masken werden im Cardlayout umgestellt 

  • will man dies verhindern, müssen die Standardchicht-Masken VOR dem Update übersteuert werden 

Gerüst

Die Masken sollen an das neue Card-Layout mit folgender Anatomie angepasst werden:

• Die Main-Content Area (links) soll vom Platz in einer 2/3 Relation zu der Aside-Area (rechts) stehen

  • alterantiv ist ein ein- oder drei-Karten Layout im Verhältnis (1:2:1) möglich, je nach Informationsumfang

• TableTail Felder sollen von den Masken entfernt werden

• Collapsibles sollen keinen Rahmen haben

• Bezeichner von Feldern dürfen nicht abgeschnitten werden

• Bezeichner von Feldern dürfen keine Abkürzungen enthalten

Anwendungsfälle

(1) Collapsibles sollen keinen Rahmen haben

Tabgruppen schließen bündig mit geöffneten Collapsibles ab, sodass ein gerade, stufenloser unterer Abschluss des Layouts gelingt.

(2) Anordnung der Karten

• Tabgruppen schließen bündig mit geöffneten Collapsibles ab, sodass ein gerade, stufenloser unterer Abschluss des Layouts gelingt.

• Falls Stufen nicht vermeidbar sind, sollen diese aufsteigend sein, d.h. bildschirm-füllende Elemente links und kleinere Karten rechts.

(3) Padding/Abstand in Komponenten sind einheitlich

Komponenten weisen Standardbelegungen für die Abstände auf, so dass man diese nicht manuell anpassen muss.

Diese sind (Top - right- bottom- left)

• Box: Mindesthöhe 16px

• Karte: Abstand 12- 12- 12- 12, Zusätzlich neuer Button um Abstände mit einem Klick zu entfernen

• Tabinhalt: 8- 12- 12- 12

• Collapsible-Inhalt: 2-10-8-10

• Collapsible: Rahmen anzeigen initial auf false

• Infoboard: Rahmen anzeigen initial auf false

• Felder: Standardbreite 120px (Label/Button auch, auch für non-fill-horizontal)

• (4) Hauptinformationen auf dem ersten Tab, dauerhafte Informationen auf einem aside-Collapsible

• Im Maincontent-Bereich befindet sich eine Card oder ein Tabset. Auf diesem sind alle wichtigen Informationen.

• Sekundär relevante Informationen befinden sich auf weiteren Tabs und müssen erst aktiv angewählt werden

• dauerhaft wichtige Informationen (z.B. Kontaktinformationen) sind dauerhaft sichtbar. Dies wird durch die Positionierung dieser Informationen auf einem Collapsible im aside-Bereich möglich.

(4) Hauptinformationen auf dem ersten Tab, dauerhafte Informationen auf einem aside-Collapsible

• Im Maincontent-Bereich befindet sich eine Card oder ein Tabset. Auf diesem sind alle wichtigen Informationen.

• Sekundär relevante Informationen befinden sich auf weiteren Tabs und müssen erst aktiv angewählt werden

• dauerhaft wichtige Informationen (z.B. Kontaktinformationen) sind dauerhaft sichtbar. Dies wird durch die Positionierung dieser Informationen auf einem Collapsible im aside-Bereich möglich.

(5) Eine Tabgruppe sollte kein oder mindestens zwei Tabs haben

• Eine Karte kann ohne Tabset mit Feldgruppen befüllt werden. Dies ist vor allem bei Masken mit wenig Informationen der Fall.

• Sollte nur eine Karte benötigt werden, muss kein Tabset auf die Karte gezogen werden. Ein einzelnes Tab ist obsolet und soll nicht auf Masken vorhanden sein.

• Müssen Informationen gegliedert werden, können unwichtige Informationen in den Hintergrund rücken, indem sie auf ein zweites Tab verschoben werden. Zu beachten ist (4)

(6) Fachlich/Logisch zusammengehörige Felder

• fachlich/logisch zusammenhängende Felder sind als Einheit angeordnet und gruppiert. Dazu gehören einzelne Feldgruppen (z.B. Name: xxx), sowie Gruppen von Feldern (z.B. Adressdaten: Straße, Hausnunmer, Ort...)

(7) Felder, Labels, Collapsibles und Tabs

• Die Layoutelemente sind auf allen Masken gleich angeordnet:

  • 1,2 oder 3 Spalten Layout

  • gleiches Farbschema

  • auf ähnlichen Masken sind ähnliche Felder auf derselben Position

(8) Lesbare Labels

• Labels sind immer vollständig lesbar, auch bei

  • skalliertem Bildschirm

  • unterschiedlicher Auflösung

  • Bildschirm, Tablet, Smartphone

• Feldbezeichnungen werden nicht abgeschnitten (z.B. Mitarb. statt Mitarbeiter)

  • Ausnahmen: "Nr."

• Labels beginnen immer mit einem Großbuchstaben

• Umlaute werden erkannt und richtig dargestellt: Ä,Ö,Ü,ß

• boolsche Felder/Checkboxen sind richtig beschriftet, sodass direkt ersichtlich ist, was ein Setzen des Feldes auslöst, z.B. "Ist xy"

(9) Benamung des ersten Tabs

• Der erste Tab sollte "Übersicht" heißen, wenn anwendbar, sonst "Info"

(10) Numerische und Datumsfelder

• In manchen Feldern ist naturgemäß wenig Inhalt, z.B. bei numerischen Feldern (z.B. Geldbeträge). Durch das Flexlayout werden die Werte sehr weit vom Label entfernt dargestellt. Darum sollen diese Felder nicht automatisch "horizontal auffüllen", sondern "kurz" sein.

• Dies gilt insbesondere für numerische Felder und Datumsfelder.

(11) Interne Namen von Feldern folgen einem einheitlichen Konzept

• Feldgruppen → fg<NUMMER>

• Label ohne Feldgruppe → C2xx<Name>Label

• Tabgruppe → C2xx<Name>TabSet

• Tab → C2xx<Name>Tab

• Collapsible → C2xx<Name>Collapsible

(12) Entitätsboards

• Auf Masken werden Boards integriert, sofern es für die Entität Sinn macht.

(13) Boards sind als Systemstandard

• Auf manchen Masken befinden sich Boards. Diese sollen alle auf der Maske geladen und als Systemstandard markiert sein. Manuelle Einstellungen sind nicht erforderlich (außer bei speziellen, masken-unabhängigen Board-Konfigurationen)

(14) Multiboard: Aktivitäten&History

• auf Aktivitäten-behafteten Entitäten befindet sich immer eine Tabgruppe mit zwei Tabs: "Kommentare/Aktivitäten" und "Änderungen". Auf den jeweilen Tabs sind die entsprechenden Boards hinterlegt.