Datenerfassung mit html und Javascript

Sap Guixt
Tutorials GuiXT und AddOns
Tutorial Viewer
Datenerfassung mit html und Javascript

Viewer Tutorial Allgemeines 1 2 3 4 5 Datenerfassung mit html und Javascript 6 7
Weiter

Mit dem GuiXT Viewer und dem InputAssistant, Version 2000 Q4 oder höher können Sie in Kombination mit HTML und Java Script eine vollkommen neue Benutzerschnittstelle für R/3 Transaktionen erstellen. Sie können einen HTML Editor Ihrer Wahl verwenden (z.B. MS Frontpage), um die neue Benutzerschnittstelle genau auf Ihre Anforderungen zuzuschneiden.

Lassen Sie uns zuerst als einfaches Beispiel eine “Material anlegen” Transaktion betrachten. Unser Ziel ist es, eine völlig neue Benutzerschnittstelle in den R/3 Standard Bildschirm (MM01 Einstiegsbild) zu integrieren, so wie es auf dem Bild weiter unten zu sehen ist. Dieses kleine Beispiel ist höchstwahrscheinlich zu einfach, um es in der Realität verwenden zu können, aber Sie können ganz leicht weitere Felder und weitere Verarbeitungsschritte hinzufügen.

Drei Schritte sind nötig:

1 Schreiben Sie ein GuiXT Skript, das die Verbindung zu Ihrer HTML + JavaScript Anwendung herstellt

2 Erstellen Sie die HTML + Java Script Anwendung (dies geschieht völlig ohne R/3 Zugang)

3 Schreiben Sie ein InputScript das das Update im R/3 System vollzieht.

1 Das folgende Beispiel basiert auf R/3 Version 4.5. Für andere R/3 Versionen (3.1-4.6) sind geringfügige Veränderungen im InputScript nötig, die HTML Schnittstelle kann gleich bleiben.

Der Anwender ruft die Standard Transaktion MM01 in R/3 auf. Ihre Anwendung kann dann in den R/3 Standard Bildschirm integriert sein:

Sap Guixt javatrans1 Datenerfassung mit html und Javascript

Sie können Ihre Html Schnittstelle allerdings auch in einem separaten Fenster öffnen, wie es im nächsten Bild zu sehen ist. Das ist sinnvoll, wenn nur wenig Platz auf dem R/3 Bild verfügbar ist oder wenn Sie dem Anwender die Möglichkeit geben möchten, das Html Fenster getrennt zu vergrößern.

Sap Guixt javatrans3 Datenerfassung mit html und Javascript

Der einzige Unterschied ist die “-floating” Option im GuiXT Skript:

View (6,0) (22,76) “Material_anlegen.html”

für den ersten Fall und

View (6,0) (22,76) “Material_anlegen.html” “-floating”

für den zweiten Fall.

Eine dritte Möglichkeit besteht darin, einige Buttons auf dem Standardbildschirm zu platzieren. Durch Mausklick auf jeweils einen Button wird die Html Anwendung in einem getrennten Browser Fenster aufgerufen. Durch Klick auf den “Sichern” Button im Browserfenster gelangt man wieder zu R/3 zurück und setzt die eigentliche MM01 Transaktion mit einem InputScript fort.

Das GuiXT Skript sieht in diesem Fall folgendermaßen aus:

Image (12,00) “button_desktop.gif” Start=“Materialanlegen_desktop.html” “-plain”
Image (12,18) “button_notebook.gif” Start=“Materialanlegen_notebook.html” “-plain”
Image (12,36) “button_server.gif” Start=“Materialanlegen_server.html” “-plain”
Image (12,54) “button_speicher.gif” Start=“Materialanlegen_speicher.html” “-plain”

2 Die Html Schnittstelle können Sie entweder manuell oder mit einem geeigneten Html Editor erstellen:

Alle Eingabefelder und die Gruppen der Radiobuttons (Auswahlknöpfe) müssen Namen haben, beispielsweise MaterialText oder MaterialTyp, die in den Java Script Funktionen verwendet werden.

Das Ereignis “Anwender klickt auf den Sichern Button” wird durch eine Java Funktion so umgesetzt, dass alle Werte zu R/3 gesendet werden: onclick=”save();” . Die Java Funktion verwendet hierfür eine Funktion ToGuiXT die die URL aufbaut, die für die Kommunikation mit GuiXT gebraucht wird. (Diese Funktion ist in dem unten aufgeführten HTML Code enthalten).

function save() { loc = “”; ToGuiXT(“U[ParMaterialText]“, document.all.Materialtext); ToGuiXT(“U[ParMaterialType]“, document.all.Materialart); ToGuiXT(“U[ParBaseUnit]“, document.all.Basismengeneinheit); ToGuiXT(“U[ParGrossWeight]“, document.all.Bruttogewicht); ToGuiXT(“U[ParNetWeight]“, document.all.Nettogewicht); ToGuiXT(“U[ParWeightUnit]“, document.all.Gewichtseinheit); window.location = “SAP://” + loc + “OK:process=Material_anlegen.txt”; }

Hier ist nun der gesamte HTML Code für unser Beispiel (Material_anlegen.html):

<html> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″> <meta name=”GENERATOR” content=”Microsoft FrontPage Express 2.0″> <title>Material anlegen</title> </head> <body bgcolor=”#DEF7FE”> <form method=”POST”> <div align=”left”><table border=”1″ cellpadding=”5″ cellspacing=”5″ bgcolor=”#DEF7FE”> <tr> <td colspan=”2″ bgcolor=”#ADCEDE”><p align=”center”><script language=”JavaScript”></script><font color=”#400040″ size=”4″><strong>Standard Material anlegen</strong></font></p> </td> </tr> <tr> <td valign=”top”><font size=”2″><em><strong>Materialtext</strong></em></font><br> <input type=”text” size=”27″ maxlength=”60″ name=”MaterialText”><p><font size=”2″><em><strong>Materialart</strong></em></font><em><strong><br> </strong></em><input type=”radio” checked name=”Materialart” value=”FERT”>Fertigerzeugnis<br> <input type=”radio” name=”Materialart” value=”HALB”>Halbfertigerzeugnis <br> <input type=”radio” name=”Materialart” value=”ROH”>Roh material<br> </p> <p><img src=”http://d2nwkt1g6n1fev.cloudfront.net/helpmax/wp-content/uploads/sub/sap-guixt/de/source/save.gif” width=”175″ height=”63″ onclick=”save();” </a></p> </td> <td valign=”top”><font size=”2″><em><strong>Basismengeneinheit</strong></em></font><em><strong><br> </strong></em><input type=”radio” checked name=”Basismengeneinheit” value=”KAN”>Kanister<em><strong><br> </strong></em><input type=”radio” name=”Basismengeneinheit” value=”Kar”>Karton<em><strong><br> </strong></em><input type=”radio” name=”Basismengeneinheit” value=”Ki”>Kiste<em><strong><br> </strong></em><input type=”radio” name=”Basismengeneinheit” value=”L”>Liter<p><font size=”2″><em><strong>Bruttogewicht </strong></em></font><br> <input type=”text” size=”9″ name=”Bruttogewicht”><br> <font size=”2″><em><strong>Nettogewicht</strong></em></font><br> <input type=”text” size=”9″ name=”Nettogewicht”><br> <font size=”2″><em><strong>Gewichtseinheit</strong></em></font><br> <input type=”text” size=”3″ name=”Gewichtseinheit”></p> </td> </tr> </table> </div> </form> </body> </html>

3 Zum Schluß brauchen Sie noch ein InputScript (Material_anlegen.txt), um alle Daten an R/3 zu übergeben.

Parameter ParMaterialType Parameter ParMaterialText Parameter ParBaseUnit Parameter ParGrossWeight Parameter ParNetWeight Parameter ParWeightUnit Set [Branche] “C” Set [Materialart] “&[ParMaterialType]” Screen SAPLMGMM.0070 Set C[Grunddaten 1] “X” Enter Screen SAPLMGMM.4000 Set #[2,12] “&[ParMaterialText]” Set F[Basismengeneinheit] “&[ParBaseUnit]” Set F[Bruttogewicht] “&[ParGrossWeight]” Set F[Nettogewicht] “&[ParNetWeight]” Set F[Gewichtseinheit] “&[ParWeightUnit]” Enter “/11″

Wenn ein Fehler während der Laufzeit des InputScript auftritt, erhält der Anwender eine Meldung auf dem Ursprungsbildschirm, von dem er gestartet ist. Sie können auch die “No return on error” Option in Ihrem InputScript angeben. In diesem Fall zeigt das System den R/3 Bildschirm an, auf dem der Fehler aufgetreten ist. Der Anwender kann dann dort die Eingabe korrigieren.

Anzustreben ist es, dass Ihre HTML Anwendung die Datenintegrität überprüft, sobald die Werte eingegeben werden oder wenn der Anwender auf den “Sichern” Button klickt, bevor die Daten an R/3 geschickt werden. Das ist allerdings nicht immer möglich, (z.B. wenn Sie zusätzliche R/3 Daten benötigen, die nicht verfügbar sind). Die Datenintegrität wird aber in diesem Fall auch durch R/3 überprüft, bevor die Datenbank aktualisiert wird.

Sap Guixt

Datenerfassung mit html und Javascript

Sap Guixt > Datenerfassung mit html und Javascript

Sap Guixt