With GuiXT Viewer plus
InputAssistant, version 2000 Q4 and upwards, in combination with html and Java Script, you
are able to build a completely new user interface for R/3 transactions. You can use any
html editor you like (e.g. MS Frontpage) to design an interface that is optimized for your
user community. |
Let us look at an example, the implementation of a simple "Create Material" transaction. Our goal is to integrate a completely new user interface in the R/3 standard screen (MM01 start screen), as shown in the image below. The user interface shown here is probably too simple to be used in reality, but you can easily add more fields and more logic.
The example is based on R/3 4.5. For other R/3 releases (3.1-4.6), some minor changes in the InputScript are required, but the html user interface can remain the same.
Three steps are required for implementing this application:
1 Write a GuiXT script that links to your html + JavaScript application
The user starts the standard transaction MM01 in R/3. Your new application can be embedded in the R/3 standard screen:
Instead of embedding the html interface in the R/3
screen, you can use a separate window (see below).
This makes sense if there is little space left on the existing R/3 screen, or if it
important for the user to be able to resize the html window separately:
The only difference in the implementation is the "-floating" option in the GuiXT script:
View (6,0) (22,76) "CreateMaterial.html"
in the first case,
and
View (6,0) (22,76) "CreateMaterial.html" "-floating"
in the second.
A third possibility is to add
several pushbuttons to the R/3 screen. When the user clicks on one of these buttons he
starts the html application in a separate browser window.
He can then enter the material data.
When he presses the "Save" button in the html application he goes back to R/3
and performs the original MM01 transaction via an InputScript.
GuiXT script in this case:
Image (12,00) "button_desktop.gif" "Start=CreateMaterial_desktop.html"
"-plain"
Image (12,18)
"button_notebook.gif" "Start=CreateMaterial_notebook.html"
"-plain"
Image (12,36)
"button_server.gif" "Start=CreateMaterial_server.html"
"-plain"
Image (12,54)
"button_storage.gif" "Start=CreateMaterial_storage.html"
"-plain"
2 You can write the html user interface manually or with a suitable html editor:
All entry fields and radio button goups must have names (e.g., MaterialText or MaterialType) that are used in the Java Script functions.
The event "user clicks on the Save button" is handled by a Java function that sends all values to the GuiXT InputScript: onclick="save();" . The Java function uses a function ToGuiXT that builds the URL needed for the communication with GuiXT (this funtion is contained in the html code below).
Here is the whole html code for our example:
3 Finally, an InputScript is needed to pass all data to the R/3 application.
If any error occurs during InputScript processing, the user sees the error information on the R/3 screen where he started. You can also specifiy the "No return on error" option in the InputScript. In this case the system shows the R/3 screen where the error occurs, and the user can correct the value there.
As a design goal, your html application should perform data integrity checks as soon as the user enters the values, or when he clicks on the "Save" button, before the data is sent to R/3. This is not always possible (since you might need other R/3 data that is not available), but all data integrity checks are performed in this case by R/3 as well, before the database is updated.
