Two approaches to trigger ABAP backend event via Javascript

[JerryWang]

• Approach1 - trigger via calling click() method of a hidden button


• Approach2 - trigger via function htmlbSubmitLib

In CRM Office integration scenarios, Javascript together with ActiveX are widely used. For example, in webclient UI component view, version of the local installed Word application is got via ActiveX using Javascript and then this version is sent back to ABAP side, then application could work with different version accordingly.

This document explains two approaches to trigger ABAP backend event via Javascript with two simplest example:

Approach1 - trigger via calling click() method of a hidden button

1. define a hidden button, bind its onClick event to an ABAP event ( line 6 ~ 9 )

Please note that the event name is Case sensitive - When you create the ABAP event in UI workbench, the correct event name you input must be exactly "Refresh" as line 8 ( although afterwards you see the upper case EH_ONREFRESH in workbench )

2. store the runtime button ID into ABAP variable refresh_button_id ( line 10 ~ 13 )

3. when the page is loaded, get the html element of button via its runtime id and call its click method. ( for simplicity reason I don't consider whether method click still works in other browsers )

when you launch the test page, the event handler for Refresh will be called:

Approach2 - trigger via function htmlbSubmitLib

this approach could not only trigger ABAP event via Javascript but also could pass the value of Javascript variable to ABAP backend.

This approach also needs a hidden button. I use ActiveX to retrieve three attributes of the word application installed in my laptop: version, user name and installation path. The event trigger is done via function htmlbSubmitLib.

 

<div style="display:none;">

<thtmlb:button id      = "Refresh"

               onClick = "Refresh" />

</div>

<%

  DATA: refresh_button_id type string.

  refresh_button_id = controller->get_id('Refresh').

%>

<script>

   var app;

   try {

      app = GetObject("", "Word.Application");

   } catch(e) {

      app = new ActiveXObject("Word.Application");

   }

   var wordVersion = app.Version;

   var username = app.UserName;

   var path = app.Path;

   htmlbSubmitLib('htmlb',this,'bsp:htmlbEvent:EVENT:null','myFormId',"<%= refresh_button_id %>",

      'REFRESH',3,wordVersion, username, path);

</script>​

in Chrome development tool we can find the function htmlbSubmitLib is implemented in script file events.js, and its MIME path /bc/bsp/sap/thtmlb_scripts.

Also you could find its signature and source code in Chrome debugger. Since I have totally three parameter to pass so I specify paramCount as 3,

and param1, param2 and param3 as wordVersion, username and path accordingly.

Here are the three attributes observed in Javascript debugger which will be passed to backend:

And implement the event handler in ABAP as below, in the runtime it is triggered:

And all three attributes are available in ABAP now:

Using process monitor I have observed the word application process which is started via ActiveX ( via option /Automation -Embedding ).