Example: Specific Form Elements in HTML Templates (SAP Design) (SAP Library

Example: Specific Form Elements in HTML Templates (SAP Design)

To execute the output of error messages, you call the JavaScript function SAPBodyOnload() in the body tag:

<body onload="SAPBodyOnload()">

After the two statements necessary for the definition of the form:

<form id="myForm" name="myForm" action="`wgateURL()`" method="post">

`include(~service="sr_library", ~theme="99", ~language="", ~name="ISR_Template_Library_Plain_Html.html")`

there is the part of the HTML template that is specific to the scenario.

You can use the following functions to define the form elements for the request.
The functions are defined in the sr_library Internet Service.

Recommendation

To study the functions, load the form elements in the SAP@Web-Studio, or display the SR_LIBRARY internet service in the Web Application Builder. You find the functions using the syntax check.
For more information, see the SAP Library under Basis ® SAP Internet Applications ® SAP@Web Studio or Basis ® BC-ABAP Workbench ® Integration of Internet Services ® Web Application Builder.

Form Elements

getLabel(name)
This returns the name of the description of a special or general characteristic.
Example:
`myLabel = getLabel(name="BUILDING_TO")`
Result:
The myLabel variant defined by assignment contains the text "To building".

getSize(name, maxwidth)
This returns the name length of a characteristic. To enter a maximum length, you use the optional parameter maxwidth.
Example:
`mySize = getSize(name="ISR_HEADER-NOTIF_TYPE")`
Result:
The mySize variant defined by assignment contains the value 2.

getName(name, index)
This returns the name of the characteristic. To specify a row index for access to tables, you can use the optional parameter index.
Example:
`myName = GetName(name="BUILDING_TO")`
Result:
The myName variant defined by assignment contains the text "To building".

Disabled(name)
This sets the display mode for the name to correspond to the request mode (create, display, change). You use this function in the HTML tag <input type="text" ...> <input type="radio" ...> <input type="checkbox" ...> und <select …>.
Example:
<input type="text" name="BUILDING_TO" value="`BUILDING_TO`" `Disabled("BUILDING_TO")`>
Result:
The input field is ready for input in the Create and Change request modes only, not in Display mode.

Readonly(name)
This sets the display mode for the name to correspond to the request mode (create, display, change). You use this function in the HTML tag <textarea...>.
Example:
<textarea wrap="physical" rows="12" cols="65" name="`GetTextAreaName("MY_TEXT",65)`" `readonly("MY_TEXT")`>
Result:
The text field is ready for input in the Create and Change modes only, not in Display mode.

Selected(name, value)
This sets the correct entry in a dropdown list box dependent on the name value. You use this function in the HTML tag <option...>.
Example: Dropdown list box (variant 1)
<select id="COLOR" name="COLOR" size=1 `disabled("COLOR")`>

<option value="red" `Selected("COLOR","red")` > you like the red color?

<option value="green" `Selected("COLOR","green")`> or the green color?

<option value="blue" `Selected("COLOR","blue")`> or the blue color?

</select>
Result:
If you chose the "or the green color?" entry, the value "green" is assigned to the characteristic "COLOR". If you call up the sent form in display mode, the "or the green color?" entry is displayed automatically.

SetOptions(name, options, labels)
This enables you to set up a dropdown list box for the name characteristic using the corresponding options and labels. You use this function after the HTML tag <select...>.
Example: Dropdown list box (variant 2)
`COLOR_Option[1] = "red";

COLOR_Option[2] = "green";

COLOR_Option[3] = "blue";

COLOR_Label[1] = "you like the red color?";

COLOR_Label[2] = "or the green color?";

COLOR_Label[3] = "or the blue color?";`

<select id="COLOR" name="COLOR" size="1" `disabled("COLOR")`>

`SetOptions("COLOR","COLOR_OPTION","COLOR_LABEL")`

</select>

Result:
If you chose the "or the green color?" entry, the value "green" is assigned to the characteristic "COLOR". If you call up the sent form in display mode, the "or the green color?" entry is displayed automatically.

Checked(name, index, value)
This sets the correct selection for radio buttons and checkboxes dependent on the name value. You use this function in the HTML tags <input type="radio" ...> and <input type="checkbox" ...>.
Example: Radio buttons
<input name="COLOR" value="red" type="radio" `checked("COLOR",1,"red")` `disabled("COLOR")`>you like the red color?<br>

<input name="COLOR" value="green" type="radio" `checked("COLOR",1,"green")` `disabled("COLOR")`>or the green color?<br>

<input name="COLOR" value="blue" type="radio" `checked("COLOR",1,"blue")` `disabled("COLOR")`>or the blue color?<br>
Result:
If you chose the "or the green color?" entry, the value "green" is assigned to the characteristic "COLOR". If you call up the sent form in display mode, the "or the green color?" entry is selected automatically.

CheckboxProlog(name, index)
Necessary prolog for the implementation of checkboxes. This sets the correct entry in checkboxes dependent on the name value. You use this function directly before the HTML tag <input type="checkbox" ...>.
Example: Checkbox
`CheckboxProlog("COLOR[1]")`

<input name="COLOR[1]" value="red" type="checkbox" `Checked("COLOR",1,"red")` `disabled("COLOR")`>you like the red color? <br>

`CheckboxProlog("COLOR[2]")`

<input name="COLOR[2]" value="green" type="checkbox" `Checked("COLOR",2,"green")` `disabled("COLOR")`>and the green color? <br>

`CheckboxProlog("COLOR[3]")`

<input name="COLOR[3]" value="blue" type="checkbox" `Checked("COLOR",3,"blue")` `disabled("COLOR")`>and the blue color? <br>
Result:
If you chose both the "and the green color?" and "and the blue color?" entries, the values "green" and "blue" are assigned to the characteristic "COLOR" in the second and third rows respectively. If you call up the sent form in display mode, the "and the green color?" and "and the blue color?" entries are selected automatically.

getTextAreaName(name, width)
Returns the name and the width.
Example:
<textarea wrap="physical" rows="5" cols="75" name="`GetTextAreaName("ISR_TEXT",75)`" `readonly("ISR_TEXT")`>

getTextAreaContent(name)
Returns the name.

Caution

Normally you use both ISR_NEW_TEXT, for the entry of new comments, and ISR_TEXT, for the display of existing comments (see examples 1 + 2 below). The comments are logged chronologically in the long text for the message.

Example 1: Output field for ISR long text

`if ( ISR_MODE != "CREATE" );`
<textarea wrap="physical" rows="5" cols="75" name="`GetTextAreaName("ISR_TEXT",75)`" `readonly("ISR_TEXT")`>

`GetTextAreaContent("ISR_TEXT")`

</textarea>
`end`

Example 2: Input field for ISR long text

`if ( ISR_MODE != "DISPLAY" );`
<textarea wrap="physical" rows="5" cols="75" name="`GetTextAreaName("ISR_NEW_TEXT",75)`" `readonly("ISR_NEW_TEXT")`>

`GetTextAreaContent("ISR_NEW_TEXT")`

</textarea>
`end`