This is Part 4 of the below series of blogs:
- Real-time notifications and workflow using ABAP Push Channels (websockets) Part 1: Creating the APC and AMC
- Real-time notifications and workflow using ABAP Push Channels (websockets) Part 2: Broadcasting the message via Workitem exits
- Real-time notifications and workflow using ABAP Push Channels (websockets) Part 3: Creating a UI5 Application for receiving notifications
- Real-time notifications and workflow using ABAP Push Channels (websockets) Part 4: Creating a Web Dynpro ABAP Application for receiving notifications
Now we are going to create a similar application to what we did in Part 3, however this time we are going to use APC (websockets) in a Web Dynpro ABAP application. We do this using a fairly new feature called HTML Islands.
Create a new Web Dynpro ABAP component called ZWDC_WF_INBOX_MINI
In the Component Controller create a new Node
Enter the following:
Node Name: WORKITEMS
Dictionary structure: SWR_WIHDR
Cardinality: 0..n
Init. Lead Selection: No
Then press the Add Attributes from Structure button
Select the WI_TEXT, WI_CD and WI_CT attributes and press the green tick
Create a new method GET_USER_WORKITEMS is the Component Controller and put the following code in it:
METHOD get_user_workitems .
DATA: lo_nd_workitems TYPE REF TO if_wd_context_node.
DATA: lt_workitems TYPE wd_this->elements_workitems.
lo_nd_workitems = wd_context->get_child_node( name = wd_this->wdctx_workitems ).
CALL FUNCTION 'SAP_WAPI_CREATE_WORKLIST'
TABLES
worklist = lt_workitems.
SORT lt_workitems BY wi_id DESCENDING.
lo_nd_workitems->bind_table( new_items = lt_workitems set_initial_elements = abap_true ).
ENDMETHOD.
Then add the following code to the WDDOINIT Method:
METHOD wddoinit .
wd_this->get_user_workitems( ).
ENDMETHOD.
In the V_MAIN View, go to Context and map WORKITEMS to CONTEXT by dragging and dropping it from the right side to the left side.
Go into Layout tab and start by changing the ROOTUIELEMENTCONTAINER Layout to a RowLayout:
Right click on ROOTUIELEMENTCONTAINER and click Insert Element.
Enter the following:
ID: WS_HTML_ISLAND
Typ: HtmlIsland
Select WS_HTML_ISLAND and change the height and width to 0px as we do not want this HTML Island to be visible.
Now right click on WS_HTML_ISLAND and click on Insert Event.
Give the Event a name ON_MESSAGE and the press the Create button next to onAction to Create an event handler.
Enter the Action name as ON_MESSAGE and make sure to tick Transfer UI Event Parameters, then press the green tick.
Double click on the ON_MESSAGE action created to forward navigate into the method. Then paste in the code below
METHOD onactionon_mesage .
DATA: lo_api_controller TYPE REF TO if_wd_controller.
lo_api_controller ?= wd_this->wd_get_api( ).
* report message
lo_api_controller->get_message_manager( )->report_message( message_text = data
message_type = if_wd_message_manager=>co_type_info
is_permanent = abap_false ).
* refresh work items
wd_comp_controller->get_user_workitems( ).
ENDMETHOD.
Go back into the Layout tab and right click on WS_HTML_ISLAND again and add a script this time.
Enter in websocket_wf_notify.js in the source field. We wil create and upload this javascript file afterwards.
Save the following source to a file name websocket_wf_notify.js and upload it as a MIME object for the webdynpro.
Source code:
var MySocket = {
init: function(callback){
//Save the call back object to this object
this.callback = callback;
var that = this;
var hostLocation = window.location, socket, socketHostURI, webSocketURI;
if (hostLocation.protocol === "https:") {
socketHostURI = "wss:";
} else {
socketHostURI = "ws:";
}
socketHostURI += "//" + hostLocation.host;
webSocketURI = socketHostURI + '/sap/bc/apc/sap/zapc_wf_notify';
try {
socket = new WebSocket(webSocketURI);
socket.onopen = function() { };
var that = this;
//Create function for handling websocket messages
socket.onmessage = function(wfNotify) {
// When a message is received fire an event to call the web dynpro code to post the message and
// refresh the worklist
that.callback.fireEvent('ON_MESSAGE', wfNotify.data);
};
socket.onclose = function() {
};
} catch (exception) {
}
}
};
Right click on the web dynpro component and go to Create->Mime Object->Import.
Select the file you created in the previous step websocket_wf_notify.js and click open.
Then press save.
Right click on ROOTUIELEMENTCONTAINER again and Insert Element.
And enter MESSAGE_AREA and select MessageArea as the Type.
Make sure ROOTUIELEMENTCONTAINER is selected and then press the Wizard button
Select Table and press Continue.
Press Context to select the WORKITEMS context:
Select WORKITEMS and press the green tick.
No Need to change anything on the next screen, just press the green tick.
In the table properties change design to Alternating and set visibleRowCount to 25.
Now go into the Methods tab and select the WDDOMODIFYVIEW method.
And enter the following code to initialise the web socket when the view first loads:
METHOD wddomodifyview .
DATA: lo_html_island TYPE REF TO cl_wd_html_island.
IF first_time EQ abap_true.
lo_html_island ?= view->get_element( `WS_HTML_ISLAND` ).
lo_html_island->add_script_call( cl_wd_html_script_call=>new_call( )->variable( `MySocket` )->function( `init` )->add_callback_api( ) ).
ENDIF.
ENDMETHOD.
Right click on ZWDC_WF_INBOX_MINI and go to Create->Web Dynpro Application.
Enter an application name and Description and press the green tick.
Save and activate everything then right click the Web Dynpro application to run.
Now open the window next to the SAP GUI and create a new parked journal, which will go to my inbox for approval. On saving the Parked Journal document, the notification is immediately displayed in my browser window and the list is automatically refreshed.
Before saving:
After Saving - Inbox updated with new document automatically and notification displayed:
