Überblick über die Editoren

Mit Editoren können Sie Print-Templates zusammen stellen, damit Ihre Kunden im Frontend diese Druckvorlagen einfach gestalten können. Die Möglichkeit für die Gestaltung eines Templates steht Ihnen offen.

Vorbereitung

Sie haben die Möglichkeit, Schriften auf 2 verschiedene Wege zu konfigurieren. Beide sind hier kurz beschrieben.

Konfiguration der Schriften mit einem Wizard

Mit der Konfiguration über eines Wizards können Sie mir nur wenig Klicks die von uns kommenden Schriftarten zu konfigurieren. Klappen Sie hierfür im Dashboard die Karte "Templates" aus und wählen Sie die Wizard Tabelle aus ("Schriftarten hinzufügen"). Wählen Sie nun den Wizard in der neuen Oberfläche aus. Nun können Sie sich für verschiedene Schriftarten davon entscheiden (es sind auch mehrere wählbar). Mit einem Klick auf "weiter" und der Meldung von angelegten Datensätzen, sind die Schriftarten dann auch schon konfiguriert.

Konfiguration der Schriften manuell

Anders wie bei der Verwendung eines Wizards, können Sie hier eigene Schriftarten verwenden. Laden Sie hierfür zunächst in die Ordner /fonts und /webfonts eine Schriftart hoch (können auch mehrere sein). Damit der HTML5 Editor weis, welche Schriftart er verwenden darf, muss die Schriftart noch konfiguriert werden. Öffnen Sie hierzu die Tabelle "Schrifteinstellungen" und tragen Sie den Schrift-Namen und den tatsächlichen Dateinamen mit einem Doppelpunkt dazwischen in das Textfeld. Bei einem Dateinamen von "arial.ttf" könnte dies so aussehen: Arial:arial.ttf. Wollen Sie mehrere Schriftarten verwenden, können diese auf den selben Weg konfiguriert werden. Beachten Sie, dass im Textfeld jede Schriftart in eigene Zeile geschrieben wird.

Allgemeiner Aufbau von Editoren

Für Editoren werden verschiedene Tabellen benötigt (Vorlagen, Print-Templates und optional Bausteine). Während bei der Vorlage der Editor und das Ausgabeformat konfiguriert wird, kann beim Print-Template das Eingabeformat festgelegt werden. Außerdem findet im Print-Template die Gestaltung statt. Um Ihren Kunden die Eingabe von Texten, das Hochladen von Bildern oder sonstige Dateneingabe zu ermöglichen, können Sie verschiedenste Felder an das Print-Template verknüpfen und sogenannte Regeln für die verschiedenen Elemente einstellen. Auch das Einstellen von Farben und Schriften ist Ihnen frei.

Da jeder Editor einen Artikel braucht, muss die Vorlage an einen Artikel verknüpft werden. Das Print-Template wird dann jeweils an die Vorlage verknüpft.

Mehrere Seiten

Es ist möglich mehrere Seiten in einem Editor zu gestalten. Hierfür brauchen Sie nur zwei Print-Templates an eine Vorlage hängen. Jeder dieser Print-Templates stellt nun eine eigene Seite dar und kann individuell gestaltet werden. Mehrere Seiten werden von allen Editoren unterstützt (außer der Verschachteltes Formular ohne Vorschau und der Upload Editor, da diese keine Ausgabe anzeigen).

Verschiedene Möglichkeiten

Im folgenden Diagramm können Sie sehen, welche Editoren Sie mit den verschiedenen Ausgabe- und Eingabeformaten konfigurieren können.

Ausgabeformate bei Vorlagen

Ein Ausgabeformat ist eine Darstellung eines Templates als PDF. Nicht jedes Ausgabeformat der Vorlage ist mit jedem Eingabeformat eines Print-Templates kompatibel.

Eingabeformate bei Print-Templates

Ein Eingabeformat legt fest, in welcher Art Sie Ihr Print-Template gestalten wollen. Die Konfiguration eines Print-Templates ändert sich meist stark zwischen den verschiedenen Eingabeformaten.

Verschiedene Konfigurationen in Vorlagen

Bei folgenden Konfigurationen handelt es sich um die Checkboxen, welche in den Vorlagen konfigurierbar sind. Folglich wird die Funktion beschrieben, welche sich bei aktiver Checkbox auf die Vorlage im Frontend auswirkt. Dies wirkt sich bei allen Editoren außer dem HTML5- und weitestgehend dem Upload-Editor aus.

Umgang mit Regeln

Um im Frontend Benutzereingaben in der PDF oder dem Word-Dokument anzeigen zu lassen, werden Felder benötigt. Diese Felder besitzen Regeln damit das möglich ist. Regeln können einen Text in einem Feld, einem Text-Element auf dem Print-Template zuweisen (je nach Konfiguration unterschiedlich).

Regeln im H5E

Um dem Anwender später eine Eingabe für ein Feld zu gewähren, kann ein Text-Element eine Regel erstellt werden. Dafür muss das Element ausgewählt werden. Über die Elementeigenschaften kann im Tab "Daten" die Eigenschaft "Eingabe" gefunden werden. Mit einem Klick auf das Code-Symbol hinter diesem Wort öffnet sich eine neue Seite, in der Sie Regeln konfigurieren können. Hier haben Sie die Möglichkeit alle verknüpfte Felder als Variable auszuwählen. Das Dann-Argument macht die Ausgabe, Beispielsweise wird bei einem Eintrag [1] im Dann-Feld, der Wert in der Variable 1 (im Frontend dann der Wert im Feld) ausgegeben, bzw. in der PDF angezeigt. Das passiert jedoch nur wenn die Wenn-Bedingung zutrifft oder keine Wenn-Bedingung existiert.

Um mehrere Wörter nacheinander anzeigen zu lassen, z.B. Vorname dann Nachname (diese mit einem Leerzeichen getrennt), werden diese durch zwei Anführungszeichen mit einem Leerzeichen darin, getrennt. Zusätzlich benötigen wir jeweils einen . als Trennung zwischen Variable und String. Angenommen wir hätten zwei Felder, Feld 1 ist das Vorname-Feld und Feld 2 für den Nachnamen und wir wollen die beiden Wörter mit Leerzeichen dazwischen darstellen, dann wäre die Regel dafür folgende:

[1] . " " . [2]

Regeln in DOCX

Wenn Sie Benutzereingaben mit Text in einem Word-Dokument wollen brauchen Sie im Word-Dokument nur den Feld-Identifikator zwischen 2 Dollar-Zeichen zu schreiben. Wenn Sie beispielsweise ein Feld mit dem Identifikator "vorname" haben, bekommen Sie den Vornamen in das Word-Dokument, in dem Sie $vorname$ hineinschreiben (Voraussetzung ist natürlich, dass das Feld in einer Formularmaske an das Print-Template der Word-Datei verknüpft ist). Wenn Sie Regeln für Bilder zuweisen wollen, können Sie in DOCX eins hochladen. Klicken Sie dann mit Ihrer rechten Maustaste auf das Bild um wählen Sie "Alternativtext bearbeiten". Dort haben Sie die Möglichkeit genau wie bei den Texten den Identifikator zwischen zwei Dollar-Zeichen einzugeben.

Konfiguration unterschiedlicher Editoren

HTML5 Editor 

Um einen HTML5 Editor zu konfigurieren, legen Sie eine Vorlage an. Geben Sie als Editor "H5E" an und wählen Sie "kein Ausgabeformat" aus. Ein Print-Template wird ebenfalls benötigt, welches als Eingabeformat "HTML5-Editor" besitzt.

Beim Öffnen des Print-Templates können nun Text-, Bild-Elemente und weitere über den Reiter "Einfügen/Ersetzen" platziert werden. Einstellung für diese Elemente, sind bei den Elementeigenschaften möglich. Die wichtigsten Einstellungen können jeweils oben links vorgenommen werden, sofern das Element ausgewählt ist. Mit den 3 Checkboxen "Statisches Element", "Statischer Inhalt" und "Statische Box" kann gewählt werden, in wie fern der Benutzer im Frontend das Element bearbeiten darf. Wird z.B. die Checkbox "Statische Box" aktiviert, kann das Element zwar nicht mehr verschoben werden, der Text ist jedoch immer noch änderbar. "Statisches Element" ist eine Kombination aus beiden Checkboxen. Art, Größe und Farbe der Texte kann ebenfalls angepasst werden. Rechts neben den Elementeigenschaften befindet sich der Elementbaum. Hier können Sie Elemente in eine andere Reihenfolge/Ebene verschieben. Je höher die Zahl, welche vor dem Typ des Elements steht, desto höher liegen die Elemente (für eine andere Hintergrundfarbe kann eine Farbfläche mit der höchsten Zahl im Elementbaum gesetzt werden). Im Frontend sieht es ungefähr so aus:

Einfaches Formular mit HTML5 Konfiguration 

Zuerst wird eine Vorlage benötigt, welche folgende Einstellungen besitzt.

Diese Vorlage braucht außerdem noch eine Verknüpfung zu einem Artikel, indem der Editor verwendet werden soll. Als nächstes wird eine Formularmaske und ein Feld angelegt. Verknüpfen Sie das Feld an die Formularmaske. Danach kommt die Konfiguration des Print-Templates. Hier wird zusätzlich zu dem Eingabeformat auch die Formularmaske vergeben, sodass das erstellte Feld verwendet werden kann.

Das Print-Template wird an die Vorlage verknüpft. Als nächstes kann das Print-Templates über den blauen Button des Datensatzes, das Template bearbeitet werden. Im Template haben Sie die Möglichkeit über den Reiter "Einfügen/Ersetzen" am oberen Bildschirmrand neue Text-, Farbflächen- oder Bildelemente anzulegen. Diese können nach Ihrem Ermessen an eine richtige Stelle geschoben werden. Für genaue Positionierung auf dem Template kann über die Elementeigenschaften die X und Y-Position manuell eingetragen werden.

Wird im Frontend etwas in das Feld eingegeben, wird der Text in die PDF gesetzt.

Einfaches Formular mit JSON Konfiguration 

Legen Sie zuerst eine Vorlage mit "Standard-Ausgabeformat" und Editor "Formular (einfach)" an. Folgend brauchen Sie ein Print-Template mit dem Eingabeformat "JSON". Im Print-Template wird das JSON-Dokument hochgeladen. Ihre JSON-Datei könnte ungefähr so aussehen:

{
  "name": "JSON Template",
  "meta": {
    "optimize": "false",
    "destination": "fitwindow",
    "pagelayout": "twocolumnright"
  },
  "properties": {
    "width": 210,
    "height": 150,
    "cropbox": "",
    "topdown": true,
    "margin": {
      "top": 10,
      "left": 10,
      "right": 25,
      "bottom": 25
    }
  },
  "elements": [
    {
      "type": "text",
      "properties" : {
        "value" : "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.",
        "width": 100,
        "height" : "auto",
        "font": {
          "family": "arial",
          "style": "regular",
          "size": 16,
          "leading": 20,
          "alignment": "left",
          "color": {
            "c": 1,
            "m": 0.02,
            "y": 0.01,
            "k": 0.03
          },
          "firstLineDist": "capheight"
        },
        "position" : {
          "origin": "absolute",
          "x" : 20,
          "y" : 30
        }
      }
    },
    {
      "type": "pdf",
      "properties" : {
        "file" : "share/public/client-1/domain-1/ordner/musterfirma_logo.pdf",
        "width": 80,
        "height": 45,
        "fitmethod": "meet",
        "rotation": 0,
        "position" : {
          "origin" : "absolute",
          "x" : 120,
          "y" : 20
        }
      }
    }
  ]
}

Im Frontend bekommen Sie von dieser JSON-Datei folgende Vorschau:

Verschachteltes Formular mit HTML5 Konfiguration 

Im verschachtelten Editor ist es möglich, mehrere kleine Seiten (Bausteine) auf einer großen zu platzieren. Während das erste Print-Template nur zur Seitengröße gilt und damit leer bleibt, können die Print-Templates in den einzelnen Bausteine unterschiedliche Größen haben. Einen kompletten Aufbau mit einer Seite und mehreren Bausteinen können Sie im folgenden Diagramm sehen (Im nachkommenden Absatz wird nur beschrieben wie man einen Baustein auf eine Seite setzt. Wollen Sie mehrere Bausteine, können Sie einfach einen weiteren Baustein an die verschachtelte Seite (in der Grafik "Baustein (Seite1)" genannt) verknüpfen).

Zuerst brauchen Sie eine Vorlage mit dem Ausgabeformat "Verschachteltes PDF" und als Editor "Formular (verschachtelt)". Legen Sie nun ein Print-Template an und geben Sie diesem eine Größe ihrer Wahl, diese Größe ist später die Größe der gesamten PDF. Da dieses Print-Template die Größe der kompletten PDF definiert und die anderen Seiten nur darauf platziert werden, hat dieses Print-Template keinen Inhalt. Verknüpft wird es trotzdem an die Vorlage. Als nächstes legen Sie eine verschachtelte Seite (Baustein) an. Wenn Sie den Nullpunkt nicht in der linken oberen Ecke haben wollen, geben Sie andere X und Y Koordinaten an. Verknüpfen Sie es an das leere Print-Template. Danach brauchen Sie wieder eine verschachtelte Seite (Baustein). Diese verschachtelte Seite wird nun an die vorherige verschachtelte Seite verknüpft. Jetzt folgt wieder ein Print-Template mit dem Eingabeformat "HTML5-Editor" und der Formularmaske für das Feld/die Felder. Das Print-Template wird an den zweiten Baustein verknüpft. Nach einer Gestaltung dieses Templates und einer Regel ist der Editor nun im Frontend funktionsfähig.

Verschachteltes Formular mit DOCX Konfiguration 

Legen Sie als erstes eine Vorlage mit dem Ausgabeformat "Verschachteltes Word-Dokument" und als Editor "Verschachteltes Formular" an. Danach brauchen Sie ein DOCX-Dokument mit Inhalt zum Hochladen in das Print-Template. Wie weiter oben schon beschrieben, können Sie Regeln in DOCX mit Dollar-Zeichen definieren. So könnte Ihr DOCX-Dokument aussehen:

Legen Sie ein Print-Template mit dem Eingabeformat "DOCX" an und laden Sie ein leeres DOCX-Dokument in diesem Print-Template hoch. Legen Sie danach eine verschachtelte Seite (Baustein) an, geben Sie dort die Größe der Seite an und verknüpfen diese an das Print-Template. Legen Sie eine weitere verschachtelte Seite (Baustein) an und verknüpfen Sie diese an die vorherige verschachtelte Seite. Danach  folgt das Print-Template in welches Sie Ihr angefertigtes DOCX-Dokument hochladen. Auch dieses Print-Template bekommt als Eingabeformat "DOCX". Die Feld-Identifikatoren, welche Sie in der DOCX als Regel angeben, müssen selbstverständlich in einer Formularmaske an dieses Print-Template verknüpft werden.

Verschachteltes Formular mit JSON Konfiguration 

Der Aufbau dieses Editors ist gleich, wie der Editor "Verschachteltes Formular mit HTML5 Konfiguration", der einzige Unterschied ist, dass das Eingabeformat in den Print-Templates innerhalb den verschachtelten Seiten "JSON" sein muss. Da Sie die Möglichkeit haben mehrere Bausteine zu verwenden, können Sie im ersten Baustein ein Print-Template mit einer JSON-Datei aus dem Editor "Einfaches Formular mit JSON Konfiguration" übernehmen, und für das Print-Template im zweiten Baustein, ein anderes anfertigen. Da Sie nun zwei Bausteine haben, können diese auch nochmal über die Baustein-Tabelle mit X und Y Position angepasst und an die richtige Position verschoben werden.

Verschachteltes Formular ohne Vorschau 

In diesem Beispiel wird dieser Editor als Kontaktformular verwendet. Die Daten, welche der Benutzer eingibt, werden nach dem Freigeben, in die Datenpool Tabelle geschrieben.

Als erstes werden Felder angelegt (Ein E-Mail Feld sollte zusätzlich angelegt werden). Danach wird mit diesen Feldern eine pim-Tabelle und damit ein Datenpool angelegt. Die Vorlage hat folgende Konfiguration im screenshot, wobei für datapool die Datenpool-ID angegeben wird, für fieldMail das Feld wo die E-Mail Adresse eingegeben werden soll und für repository der Identifikator der pim-Tabelle. Wichtig ist, das die Checkbox "Nur Formulare darstellen" angehakt ist.

Danach wird wie beim Editor "Verschachteltes Formular mit HTML5 Konfiguration" weitergemacht. Leeres Print-Template mit Eingabeformat "H5E" → Verschachtelte Seite (Baustein) → Verschachtelte Seite (Baustein) → Print-Template mit Eingabeformat "H5E" und Formularmaske der Felder in der pim-Tabelle. Das zweite Print-Template kann ebenfalls leer sein, da sowieso keine Ausgabe erscheint. Beim Absenden des Formulars wird eine E-Mail mit einem Double-OptIn Link an die im fieldMail hinterlegten E-Mail Adresse gesendet. Erst wenn auf den Link geklickt wird und Sie die Meldung sehen, dass das Formular erfolgreich bestätigt wurde, wird ein neuer Datensatz im Datenpool angelegt, dessen ID in der Vorlage definiert wurde. So könnte dann Ihr Datensatz aussehen.

HTML5 mit Formular (einfach) 

Bei diesem Editor kann man zwischen dem einfachen Formular und dem HTML5 Editor wechseln, und diese parallel bearbeiten. Um solch einen Editor zu konfigurieren, brauchen Sie eine Vorlage mit den Ausgabeformat "Kombiniertes Ausgabeformat aus Strict und H5E" und als Editor "HTML5 mit Formular (einfach)". Das dazugehörige Print-Template bekommt als Eingabeformat "HTML5-Editor". Da hier auch Regeln für den Formular-Bereich möglich sind, haben Sie hier die Möglichkeit Ihre Formularmaske mit Feldern anzugeben. Sie können bei der Template Gestaltung auch HTML5 Element-Eigenschaften ändern (Beispiel: "Statische Box" aktivieren, dann kann nur noch der Inhalt des Elements bearbeitet und dieses nicht mehr verschoben werden). Im Frontend haben Sie für den Formular-Bereich folgende Ansicht:

Der HTML5-Bereich unterscheidet sich kaum vom normalen HTML5-Editor:

Sie können im HTML5-Bereich auch Farbflächen und weitere Elemente platzieren. Die im Formular über Felder eingegebenen Texte werden auch in den HTML5-Bereich übernommen, jedoch nicht umgekehrt. Nur Text-Elemente welche Sie im HTML5-Editor bearbeitet haben, werden im Formular auch angezeigt. Neue Text-Elemente oder andere Elemente werden nicht übernommen. Im HTML5-Editor hinzugefügte Elemente werden nicht gelöscht, sondern nur ausgeblendet im Formular. Nach einem Wechsel zurück in den HTML5-Editor sind diese wieder sichtbar.

Mehrzeiliges Formular mit XLSX Konfiguration 

Zum Konfigurieren brauchen Sie eine Vorlage mit dem Editor "Formular mehrzeilig" und dem "Standard-Ausgabeformat". Das dazugehörige Print-Template besitzt als Eingabeformat "XLSX". Die Konfiguration funktioniert genau wie im Editor "Einfaches Formular mit HMTL5 Konfiguration".

Im Frontend kann der Anwender eine XLSX-Datei hochladen, die ungefähr so aussehen würde:

Die Werte im Excel-Dokument werden dann für jede Zeile in ein separates Print-Template rein geschrieben. Über das Auswahlfeld, wie im folgenden Bild am oberen Rand zu sehen, können die verschiedenen Templates ausgewählt werden.

Upload Editor 

Im Upload Editor kann eine Datei hochgeladen und durch bestellt werden. Dies könnte beispielsweise eingesetzt werden, wenn Kunden ihr Template selbst extern anfertigen und dieses gedruckt haben wollen. Um den Editor zu konfigurieren, braucht dieser lediglich eine Vorlage mit dem Editor "Upload" und eine Verknüpfung zu einem Artikel. Hier wird kein Ausgabeformat und kein Print-Template benötigt.