Show TOC

Quick Guide to the HTML GeneratorLocate this document in the navigation structure

Use

When you create HTML templates, the Web Application Builder generates HTML code that mimics your SAP system screens in an HTML page. The generated code consists of standard HTML code and HTMLBusiness statements.

However, since the HTML generator cannot always know exactly what logic you require for your template, you must modify the generated code to suit your requirements.

The following table summarizes the HTMLBusiness statements required to implement various screen or ABAP elements in SAP system:

SAP system Element

HTMLBusiness

Function keys

Not supported, but you can use the function keys F21 to F24 to implement scrolling.

Menus

Not supported.

I/O fields

 
<input type=text  name="R/3-field-name"
  value="`R/3-field`"
  maxlength=" " size=" ">

Text fields

 
<p> `textfield.label` </p>

Text areas

Checkboxes

 
<input type="hidden"   name="option_1"
   value=" ">
<input type="checkbox" name="option_1"
   value="X"
  `if ( option_1 == "X" )` checked `end` >
  ...

Radio buttons

 
<input type="radio"   name="options"
   value="rb_option1">
<input type="radio"   name="options"
   value="rb_option2">
<input type="radio"   name="options"
   value="rb_option3">
 ...
options="rb_option2"
...

Pushbuttons

 
<input type=submit  name="~OkCode=(R/3FctCode)"
   value="`R/3-buttonname.label`">

Step loops

 
<table>
 `repeat with i from 1 to 'EMPLOY-ENAME'.dim`
  <tr>
   <td>`EMPLOY-TEL01 [i]` </td>
   <td>`EMPLOY-TEL02 [i]` </td>
   <td>`EMPLOY-GEBNR [i]` </td>
   <td>`EMPLOY-ZIMNR [i]` </td>
  </tr>
 `end`
</table>

Table controls

To specify table control to be processed:

wgateUrl(~event="EventName" ~control="TableName"

To display table control data in an HTML page and page through using two pushbuttons:

<FORM ACTION="~wgateUrl()" METHOD="POST">
 <TABLE>
  <THEAD>
   <TD>Account Number</TD>
   <TD>Account Description</TD>
  </THEAD>
  `repeat with i from Table.firstVisible to Table.lastVisible`
  <TR>
   <TD>`ACCOUNT-NUMBER[i]`</TD>
   <TD>`ACCOUNT-DESCR[i]`</TD>
  </TR>
 `end`
        <INPUT TYPE="SUBMIT"
    NAME="~Event=PrevPage, ~Control=Table"
    VALUE="Previous Page">
  <INPUT TYPE="SUBMIT"
    NAME="~Event=NextPage, ~Control=Table"
    VALUE="Next Page">
 <TABLE>
</FORM>

See also Implementing Table Controls.

Tabstrip controls

Not supported.

Dropdown boxes

Input help for example.

Icons

Use the mimeURL function to embed icons in HTML templates manually

Subscreens

In the main screen, code declaring subscreens could be:

<frameset>
<frame name="SUBSCREEN1"
    src="`wgateURL(~FrameName="SUBSCREEN1")`"
    scrolling="auto">
<frame name="SUBSCREEN2"
    src="`wgateURL(~FrameName="SUBSCREEN2")`"
    scrolling="auto">
</frameset>

In the subscreen, the HTML generator produces:

<FORM ACTION="`wgateURL()`" METHOD="post">

To specify the target frame, you must manually add a target parameter to the wgateURL call, for example: ~target=SUBSCREEN1.

Group boxes

OK to use, but the generated HTML depends on the SAP system release:

  • In releases prior to 4.0, a group box in an SAP system screen signalled a subscreen frame. For each SAP system group box, the HTML generator produced a frame in the base HTML template.

  • From Release 4.0, a group box in an SAP system screen has no equivalent in HTML, so no group box is generated.

Dialog boxes

Not supported. To implement dialog boxes, you need to set the service file parameter ~popups.

Field help (F1)

Not supported.

Input help (F4)

To implement input help for a field, modify standard HTML using the searchhelp macro

<FORM ACTION="~wgateUrl()" METHOD="POST">
   `RMMG1-MATNR.label`
   <INPUT TYPE="TEXT" NAME="RMMG1-MATNR"
       VALUE="`RMMG1-MATNR`">
   `searchhelp(~fieldname="RMMG1-MATNR")`
</FORM>