A CIC transaction of type HTML operation allows you to launch an HTML page to be displayed in an HTML control of the Application Area component. You can:

• Pass data from the Business Data Display into the HTML page
• Pass data from the HTML page back into the Business Data Display
• Parameterize and launch the Action Box transaction from inside your HTML page

The following sections describe the steps necessary to design an HTML page that takes advantage of the features listed above.

When you set up a transaction in an Action Box Profile, you also define a data flow into the called transaction. If this transaction is of type HTML operation, the called HTML page needs a mechanism to process the passed parameters. The parameters are actually part of the URL of the call. As long as you do not make any other settings in the HTML operation, the core URL is separated by a '?' from the block of arguments. The name-value pair of one argument is separated from the name value pair of another argument by a ';'. For example, such an URL could look like this:

http://pages/createServiceNotification.HTML?NOTIF_TYPE=S1;CUSTOMER=CB;

In this example, the parameters 'NOTIF_TYPE' and 'CUSTOMER' are passed to the page createServiceNotification.HTML.

To process these parameters from your page there is a JavaScript object SapUrlArgs. This object is defined in the JavaScript include CIC.JS which you can find in the R/3 Web Repository (transaction SMW0) in the development class CCMA. If you want to use the functionality you must include this code in your page by specifying the SRC argument of the <SCRIPT> tag.

SapUrlArgs provides the method getArg to access the parameters easily, as seen in the following code:

<script SRC="CIC1.JS">
var args = new SapUrlArgs;
...
</script>
...
<h2>Customer: <script>args.getArg("CUSTOMER_ID");</script></h2>

In the above, we first instantiate the object args of type SapUrlArgs. Then we call its method getArg to retrieve the value of the argument "CUSTOMER_ID". Please note that you can also access multi-line parameters with this method. You just specify an index as a second optional argument for the method call. This index starts at 0 (rather than 1 as it is in the ABAP language).

The following are methods available with the SapUrlArgs object:

There are basically two situations when you want to transfer data from your HTML page to the CIC:

• Launching an Action Box transaction
• Putting data into the Business Data Display before leaving the HTML operation

In both cases the principle is the same: you define an HTML form, assign a specific method and action, and trigger the submission of this form.

Assume that you want to launch an Action Box transaction 'Create service notification' called CSNO from your HTML page. Further assume that you just want to pass two parameters to the transaction: a CUSTOMER_ID and a TEXT which is a multi-line parameter. An Action Box profile defining the transaction CSNO also exists and is associated with the respective HTML configuration. To make the example more realistic the value of the customer is passed as an argument from the Business Data Display. Then your HTML form could look like this:

<script SRC="CIC1.JS">

var args = new SapUrlArgs;

...

</script>

<form name="params" method=post

action="SAPEVENT:SUBMIT_FORM_AS_POST_METHOD" >

<input type=hidden name="SapCallId" value="CSNO">

<td align="right"><font face="arial" size="2" color="navy">

<b>Customer</b> </font>

</td>

<td align="left"><font face="arial" size="2" color="navy">

<script>document.write(args.getArg("CUSTOMER_ID"));</script>

</td>

<td valign="top" align="right"><font face="arial" size="2"

color="navy"><b>Problem description</b></font>

</td>

<td align="left"><textarea name="TEXT" wrap="physical"

ROWS="3" COLS="40"> </textarea>

</td>

<button name=Send type="button" value="Send" onClick="createNotif();"

<p>Send</p>

</button>

<button name=Exit type="button" value="Exit" onClick="exit();"

<p>Exit</p>

</button>

</form>

The above code just displays the customer number and an editable text area along with two buttons for submission and exiting the form. When a button is clicked the functions createNotif() and exit() respectively are called. The action value "SAPEVENT:SUBMIT_FORM_AS_POST_METHOD" has the effect that the form data will be transferred to the CIC application. You always have to specify 'post' as the form method. Please also note the hidden field SapCallId holding the Action Box transaction code (CSNO in this case). This form variable is predefined. The CIC expects the transaction code in this variable.

Now let's take a look at the JavaScript function CreateNotif().

function CreateNotif() {

// set customer which was passed from CIC

document.params.CUSTOMER.value = args.getArg("CUSTOMER_ID");

//submit form

document.params.submit();

}

This function sets the value of the CUSTOMER_ID variable and submits the form. The way CIC handles the multi-line element TEXT is the following: The text lines in the HTML text area are separated by a <CarriageReturn><LineFeed> sequence. After submission the CIC

interprets such a sequence as a delimiter between the lines of a multi-line element. Please note that the variables CUSTOMER_ID and TEXT have to be defined in the section 'Internal parameters' of the configuration of this HTML operation.

After execution of the transaction the default behavior of the CIC is to terminate the workspace representing the HTML operation. If this behavior is not desired you can set a form variable SapExit to the value empty string (""). This causes the CIC to return to the HTML page that has launched the Action Box transaction. With this setting the page could go on to handle further user interactions after calling the transaction. The HTML statement would look like this:

<input type=hidden name="SapExit" value="">

In general, any submission of a form that does not have a non-initial value for the variable SapCallId is interpreted by the CIC as a request to exit the HTML page. All other variables in the submitted form that correspond to the export elements in the section 'External parameters' of the HTML configuration can be passed back into CIC components by using the standard data flow. If you do not want to pass any data to the CIC it is sufficient just to submit an empty form. Consequently you could realize your exit routine like this:

<form name="empty"> </form>

<script> document.empty.submit(); </script>

The names of the interface elements defined in the configuration of an HTML operation are case sensitive. E.g. if you specify an import parameter in the section 'External parameters' with the name 'Customer_id', you also have to use exactly this string to access an argument by using the respective JavaScript function (e.g. args.getArg("Customer_id"). A call like args.getArg("CUSTOMER_ID") or args.getArg("customer_id") would fail.