Communication from the Client to the Web Dynpro Back End

The JavaScript callback API has the following methods:

fireEvent	Triggers a Web Dynpro action on the client.
addEventListener	Registers an event handler on an event in the client (for example, pressing the right mouse button to open the context menu). The event handler is called when the event occurs.
removeEventListener	Deletes the event registration

Triggering Web Dynpro Events in the Browser

Add the EVENTS aggregation to your Web Dynpro UI element HTMLIsland or HTMLContainer, specify for example myEvent for the Name property, and implement an onAction event handler method.

To call this event on the client, a reference to the callback API must first be passed as a parameter of a JavaScript call.

          
wd_this->m_html_island->add_script_call(
          
cl_wd_html_script_call=>new_call(
          
)->variable( ` MyHTMLIsland `
          
)->function( `setCallbackAPI`
          
)->add_callback_api( )
          
).

The client-side JavaScript object must have a function setCallbackAPI with a parameter that contains the reference to the callback API. To trigger a Web Dynpro action, you can use the following reference in your JavaScript file:

callback.fireEvent('myEvent','dataString');

Adding a User-Defined Context Menu

You can deactivate the unified rendering context menu, and instead display a user-defined context menu or the context menu provided by the browser.

To do this you call the addEventListener method in the JavaScript file:

callback.addEventListener('contextmenu', fHandler )

In the addEventListener method, specify the contextmenu parameter. This registers the function on the event for opening the context menu when the right mouse button is clicked.

The second parameter, fHandler, references the function to handle the event. This function is called, when the user calls the context menu.

In the function implementation (fHandler = function (e) { ... }) you define how the application reacts when the event is triggered. For example, you can specify a user-defined context menu.

When the function is called, the browser event e is passed as a parameter.

In parameter e you can set function cancelBubble to value true:

e.cancelBubble = true;

In this case, bubbling is deactivated and the unified rendering context menu is no longer displayed.