Sap Guixt

There are two techniques available for displaying data in an HTML view in tabular format:

• You can use an HTML template with a table that contains script variable names with the ###-notation.  In this case GuiXT generates the table using the  script variable values.  Please see Display complex business objects using html for an example.
   
• Or you use a fixed HTML page (not a template) with a JavaScript routine that builds up the table. You invoke the JavaScript routine with the connectHTML interface. Please see Automation of HTML pages, last example.

In our example we use the template-functionality, not the connectHTML. This choice is not relevant for the rest of the article. The template-approach is somewhat simpler with regard to the JavaScript that is needed, but the connectHTML approach is more flexible with regard to the final table layout.

The complete script files and the HTML file for the example are contained in this zip file. Unpack the zip file to a suitable script directory for your own tests.

The application looks as follows:

 We add a pushbutton “Contact persons” in transaction VAP1, initial screen

 With a button click, the contact persons for this customer are displayed. The user can change one or several phone numbers.

When the user presses the “Save” button, the phone numbers are passed to an InputScript that updates the phone numbers via transaction VAP2.

Step 1: Add the new pushbutton

The pushbutton starts the InputScript “display_contacts.txt” that sets a flag V[display_contacts] and returns.

Step 2: Read the phone numbers

The BAPI BAPI_CUSTOMER_GETCONTACTLIST is called in the GuiXT script to read the contact information with the phone numbers.  We have to add leading zeros to the given customer number since the BAPI does not convert the external format (without leading zeros) into the internal format.

Step 3: Set the script variables for the template

The HTML template expects indexed variables, e.g. cont_1, cont_2,… to build up the table rows.

The variables cont_1, cont_2,… are now a copy of the tables rows returned by the BAPI, with structure BAPICONTACT_ADDRESSDATA:

GuiXT allows us to address the components symbolically, e.g. V{cont_1](BAPICONTACT_ADDRESSDATA-TEL1NUMBR) for the phone number. We can use this notation in the HTML template:

The HTML coding above, used in the template for the View command,  generates the scrollable table body:

We add a title, column headers and two buttons: one in the upper right corner to close the display, and a “Save” button that will update the phone numbers:

The small “close” button is defined as follows:
 

When clicked, it starts the JavaScript function “close_contacts()”

…. that calls up the InputScript “close_contacts.txt”:

The “Return” command reprocesses the GuiXT script for this screen and, since the flag variable V[display_contacts] is no longer set, will remove the HTML view from the screen.

The “Save” script is a little bit more complicated. The “Save” button calls up a JavaScript function “save_contacts()” that builds up a long string of all phone numbers, separated form each other by ‘|’. For safety reasons, the routine first eliminates any existing ‘|’ character in the phone numbers, which clearly should not occur, but would break the script logic if present. The whole string is then passed to an InputSc
ript “save_contacts.txt”:

An alternative would be to pass only the changed phone numbers together with a row number. If more than one table column could be changed by the user, we would pass one string for each column.

The InputScript “save_contacts.txt” now needs to update the changed phone numbers in the SAP system. We could do this with a function call, but no appropriate BAPI seems to exist and we would have to implement our own suitable function module for this purpose. In our sample implementation we do not use a function call, but run through the normal SAP transactions to update the changed phone numbers. The parsing of the phone number string is a little bit tricky; the rest is straightforward: