In diesem Beitrag möchten wir Ihnen näher bringen, wie Sie Ihre ersten Schritte planen können um mit einer HTML-Datei erste Ergebnisse innerhalb der Oberfläche der BüroWARE zu erzielen.
Sie finden eine erste Vorlage mit dem grundsätzlich notwendigen Informationen innerhalb Ihrer Installation unter: Vorlagen\HTMLEditor\JWHtmlVorlage.html
Diese Vorlage können Sie dann bereits in index.basis.source.html umbenennen und danach in den jeweiligen Unterordner von Vorlagen\STDERFASSUNG in das Verzeichnis „990“ kopieren. Sie können die Datei aber auch bei Bedarf in einem anderen Verzeichnis ablegen.
Damit müsste sich dann in diesem Verzeichnis die erwähnte index.basis.source.html befinden. Eine index.basis.html wird zusätzlich erzeugt sobald Sie innerhalb der BüroWARE das erste Mal den gewünschten HTML Bereich aufgerufen haben.
Zum Abschluss fehlt Ihnen hier nur noch die index.basis.SEvariablen.json (Liegt am Partner FTP unter /INTERN/Entwickler/jens.simon/HTMLRahmen)
In dieser Datei legen Sie fest, welche Variablen Sie an das HTML übergeben wollen. Ein kurzer Auszug aus der Beispiel Datei, um den Ablauf zu verdeutlichen:
{
„VAR„: [
{
„ID„: „EINGABE„,
„FELDER„: „0_10, 10_30, 40_60, 100_8“
},
Mit „VAR“ geben Sie an, dass es sich hier um eine SoftENGINE Variable handelt. Die allgemeine „ID“ für eine Variable wäre aktuell „EINGABE“ und unter „FELDER“ definieren Sie die genauen Positionen, die Sie dem jeweiligen Bereich der BüroWARE entnehmen.
Falls Ihnen der genaue Bereich nicht bekannt ist, oder Sie alle Felder angezeigt bekommen wollen, können Sie statt den einzelnen Felder die Angabe „*“ nutzen.
Bei Bedarf kann auch noch ein „ALIAS“ frei gewählt werden, um den Aufbau später übersichtlicher zu halten, oder um sich danach in der Suche innerhalb des HTMLs leichter zu tun.
Weitere Beispiele wie der Aufbau für andere Bereiche wie Tabellen, GET_RELATIONs und co. funktioniert, finden Sie in der index.basis.SEvariablen.json
Die wichtigsten Bereiche innerhalb des HTMLs
Wenn Sie mit Ihrem Grundaufbau der erwähnten Dateien zufrieden sind und bereits erste Bereiche über die .json Dateien übergeben können, geht es als nächsten Schritt an die Anpassung des HTMLs.
Direkt nach der ersten Zeile „/*–SOFTENGINE-VAR!JWHtmlStart–*/“ können Sie schon mit den ersten Eingaben innerhalb der index.basis.source.html loslegen.
Zum Beginn empfiehlt es sich mit Tags zu beginnen um Ihre ersten Module zu definieren. Ein Beispiel dazu:
<SEToggle setitle=“Beispiel“ id=“1Toogle“>
<SEFeldListe id=“Beispiel“></SEFeldListe>
</SEToggle>
<SEToggle setitle=“Beispiel2″ id=“2Toogle“>
<SEFeldListe id=“Beispiel2″></SEFeldListe>
</SEToggle>
Diese werden später in einem separaten <script> Bereich mit Daten befüllt und erzeugt. Jedes einzelne Tag braucht eine eindeutige Erkennung id=““
Im Script sind dann folgende Funktionen essenziell:
InitialisiereSchnittstelle();
->Verbindung initialiseren ERP -> HTML (Darüber wird die .json Datei zugesandt)
function Erstellen(){
-> Wird aufgerufen wenn ein neues JSON Objekt empfangen wurde
ResetDataBasis()
-> Setzt bereits erstellte Module zurück -> Wenn Daten aktualisiert werden, würden ohne diese Funktion zwar Daten hinzugefügt werden, aber nicht vorher geleert
InitialisiereDatenBasis();
-> Manche Module benötigen eine spezielle Datenstruktur, diese Funktion prüft alle Tags und initialisiert deren Struktur
Zusätzlich gibt es noch folgende Erzeugungsfunktionen:
ContentToggle.CreateToggles();
FeldListe.CreateFeldListen();
Textfeld.CreateTexte();
Hiermit entstehen aus den gewählten Tags mit den jeweiligen Daten dann Module.
Zu guter Letzt gibt es aktuell noch folgende Funktion FeldListe.AddListeDaten mit bis zu 11 Parametern:
1.ID des Moduls
2.Text Links
3.Text Rechts
4.link
5.Überschrift (Text)
6.J/N -> Nur Text Rechts anzeigen
7.breite (100) -> setzt die Breite für die erste Spalte fest
8.bild (../test.png)
9.bildhöhe (12px)
10. style -> custom style (Font-weight:bold)
11 J/N -> Anzeigen Ja/Nein
Mehr Details zu den einzelnen Parametern finden Sie hier: https://wiki.softengine.de/34931/
Durch die Anwendung der bisher hier erwähnten Informationen, würde dann Ihr erstelltes Beispiel wie folgt in der Oberfläche aussehen:
Nachdem wir ja bereits in der .json Datei angegeben haben, wo das HTML nach Informationen suchen soll, kann man jetzt direkt im betroffenen HTML Rahmen innerhalb der BüroWARE auf Rechtsklick „Untersuchen“ wechseln und im nächsten Schritt auf das Menü „Konsole“.
Dort angekommen geben Sie „SEDATA“ ein und schon müsste der jeweilige PFAD oder auch ein eigener ALIAS, den Sie in der .json Datei vergeben haben innerhalb der Struktur aufscheinen. Sobald Sie den genauen Wert den Sie suchen gefunden haben, erhalten Sie dort per Rechtsklick die Möglichkeit den Eigenschaftspfad zu kopieren.
Wenn Sie final dann diesen Pfad mit SEDATA davor (SEDATA.Daten.Var.EINGABE.EINGABE_42_10.WERT) innerhalb der index.basis.source.html passend ergänzen:
<script>
InitialisiereSchnittstelle();
function Erstellen(){
ResetDataBasis()
InitialisiereDatenBasis();
FeldListe.AddListeDaten(„Beispiel“, „Beispielwert“, SEDATA.Daten.Var.EINGABE.EINGABE_42_10.WERT);
ContentToggle.CreateToggles();
FeldListe.CreateFeldListen();
Textfeld.CreateTexte();
}
</script>
Müsste das Ergebnis dann korrekt nach einem erneuten Aufruf der jeweiligen Oberfläche aufscheinen:
