Tabular input with Viewer

The View command allows you to display tabular data. In this article we describe how you can let the user enter data into the table cells and add a “Save” button that saves the changed data via an InputScript.

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:

Sap Guixt viewtableupdate01 Tabular input with Viewer
 We add a pushbutton “Contact persons” in transaction VAP1, initial screen

 

 

Sap Guixt viewtableupdate02 Tabular input with Viewer
 With a button click, the contact persons for this customer are displayed. The user can change one or several phone numbers.

 

Sap Guixt viewtableupdate03 Tabular input with Viewer
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

Sap Guixt viewtableupdate16 Tabular input with Viewer

The pushbutton starts the InputScript “display_contacts.txt” that sets a flag V[display_contacts] and returns.
Sap Guixt viewtableupdate05 Tabular input with Viewer

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.

Sap Guixt viewtableupdate04 Tabular input with Viewer

 

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.

Sap Guixt viewtableupdate06 Tabular input with Viewer

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

Sap Guixt viewtableupdate07 Tabular input with Viewer

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:

Sap Guixt viewtableupdate08 Tabular input with Viewer


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

Sap Guixt viewtableupdate09 Tabular input with Viewer

 

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:

Sap Guixt viewtableupdate10 Tabular input with Viewer

The small “close” button is defined as follows:
 

Sap Guixt viewtableupdate11 Tabular input with Viewer

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

Sap Guixt viewtableupdate12 Tabular input with Viewer

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

Sap Guixt viewtableupdate13 Tabular input with Viewer

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”:

 

  Sap Guixt viewtableupdate14 Tabular input with Viewer

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:

 

Sap Guixt viewtableupdate15 Tabular input with Viewer

Tabular input with Viewer