|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.
Three steps are required for implementing this application:
2 Write the HTML + Java Script application (this can be done without any access to R/3)
3 Write an InputScript that performs the update in the R/3 system
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 theHTML user interface can remain the same.
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 is 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,
View (6,0) (22,76) “CreateMaterial.html” “-floating”
in the second.
A third possibility is to add some pushbuttons in 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”
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 function is contained in the HTML code below).
Here is the whole HTML code for our example:
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 you send the data 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.