- SAP Managed Tags:
Hi, this is my first blog.
There are many great blogs about APC. Here I just want to show how to get notification in a bsp application using APC without refreshing the web page.
to understand APC better please go through the following series of blogs by masoud.aghadavoodijolfaei
first
- Here I just want to concentrate on the application part more than explanation part it was explained briefly in that blog.
- So I'm going to create APC, AMC and a bsp application
- Procedure:
- Create an APC( ABAP Push Channel):
- Execute t-code sapc right click create on the context menu. Enter 'zapc_test' in the popup and push continue.
- Select local object.
- Enter Description and click on the generate class and service.
- click on the continue button for the information popup.
- double click on the class and click enter into the class.
- Now redefine on_start and on_message methods of the class.
- leave those methods empty for now
- and active both the class and the APC.
- Create an AMC:
- Execute t-code samc and click on the create in the context menu. Enter 'zamc_test' in the input and click on the continue.
- click the local object when the next popup shows up.
- Enter some description in the description field (eg: AMC test).
- under channels enter your channel as '/ping' and click on enter.
- In the Channel details channel will be updated and now enter Message Type ID as TEXT,then Activity scope as system.
- Under Authorized program give the class which you generated for the APC and prog. type as CLAS and under the activity select the Receive via APC Websocket.
- Now activate the AMC.
- Double click on the class and navigate into the generated class.
- now click on the on_start method.
- click on the display<->change button or press cntl+f1 make it into change mode.
- Paste the following code in the method
TRY.
i_context->get_binding_manager(
)->bind_amc_message_consumer(
i_application_id = 'ZAMC_TEST'
i_channel_id = '/ping' ).
CATCH cx_apc_error INTO DATA(exc).
MESSAGE exc->get_text( ) TYPE 'X'.
ENDTRY.
- click on pretty printer and activate the code.
- Open on_message method and paste the following code.
TRY.
DATA(lv_msg) = i_message->get_text( ).
CAST if_amc_message_producer_text(
cl_amc_channel_manager=>create_message_producer(
i_application_id = 'ZAMC_TEST'
i_channel_id = '/ping' )
)->send( i_message = lv_msg ) ##NO_TEXT.
CATCH cx_amc_error cx_apc_error INTO DATA(lref_exc).
MESSAGE lref_exc->get_text( ) TYPE 'X'.
ENDTRY.
Create a report for sending the content to bsp application:
- execute t-code se38 and create a report with name 'zapc_message_send'.
- Enter some title and type as Executable program. select status as Test program and click on save.
- Select local object and click on continue.
- paste the following code.
PARAMETER:p_bar1 TYPE string,
p_bar2 TYPE string,
p_bar3 TYPE string.
DATA: lv_text TYPE string.
CLASS lcl_demo DEFINITION.
PUBLIC SECTION.
CLASS-METHODS main.
ENDCLASS.
CLASS lcl_demo IMPLEMENTATION.
METHOD main.
TRY.
CONCATENATE p_bar1 p_bar2 p_bar3 INTO lv_text SEPARATED BY '~'.
CAST if_amc_message_producer_text(
cl_amc_channel_manager=>create_message_producer(
i_application_id = 'ZAMC_TEST'
i_channel_id = '/ping' )
)->send( i_message = lv_text ) ."|Static text| ).
CATCH cx_amc_error INTO DATA(lref_text_exc).
cl_demo_output=>display( lref_text_exc->get_text( ) ).
ENDTRY.
ENDMETHOD.
ENDCLASS.
START-OF-SELECTION.
lcl_demo=>main( ).
Create a BSP application:
- Execute t-code se80 and create a bsp application with some application name 'ZAPC_TEST'. give some short description and save.
then from the context menu of the bsp application, create a page.
- When the next popup shows up enter your page name as start.bsp and some description and select page type as page with flow logic and click on continue,
- In the start.htm page remove the default code and paste the following code in it.
<%@page language="abap"%>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://rawgit.com/lampieg/LiveGraph/master/jquery.livegraph.js"></script>
<script type="text/javascript">
<%
CONSTANTS lv_path TYPE string VALUE `/sap/bc/apc/sap/zapc_test`.
DATA(lv_location) = cl_http_server=>get_location( application = lv_path ).
IF lv_location CS 'https'.
REPLACE FIRST OCCURRENCE OF 'https' IN lv_location WITH 'wss'.
ELSE.
REPLACE FIRST OCCURRENCE OF 'http' IN lv_location WITH 'ws'.
ENDIF.
* CONCATENATE lv_location lv_path '?amc=x' INTO DATA(lv_url).
CONCATENATE lv_location lv_path INTO DATA(lv_url).
CONDENSE lv_url.
%>
var gv_values;
var ws ;
function WebSocketDemo(para)
{
if ("WebSocket" in window)
{
if (para == "open" )
{
ws = new WebSocket("<%=lv_url%>");
};
if (para == "send" )
{
ws.send( document.getElementById("messageInput").value );
};
if (para == "close" )
{
ws.close( );
};
ws.onmessage = function (evt)
{
var inputMessage = evt.data;
gs_values = inputMessage.split("~");
var lv_tab1 = Number(gs_values[0]);
var lv_tab2 = Number(gs_values[1]);
var lv_tab3 = Number(gs_values[2]);
var updateData = {
tb1: {
value: lv_tab1
},
tb2:{
value: lv_tab2
},
tb3:{
value: lv_tab3
}
};
$('#page').liveGraph('update', updateData);
};
ws.onclose = function()
{
alert("WebSocket closed");
};
}
else
{
alert("Browser does not support WebSocket!");
}
}
</script>
<style>
div[bar="tb3"] span {
background-color: #fff877;
} /* ONLY MATCHES THE FIRST BAR */
div[bar="tb2"] span {
background-color: #9356ff;
} /* ONLY MATCHES THE SECOND BAR */
div[bar="tb1"] span {
background-color: #c3ff4e;
}
</style>
</head>
<body style="font-family:arial;font-size:80%;" onload = "WebSocketDemo('open')">
<div id="page"></div>
<script type="text/javascript">
$(document).ready(function() {
var originalData = {
tb1: {
label: "Bar 1",
value: 50
},
tb2: {
label: "Bar 2",
value: 20
},
tb3: {
label: "Bar 3",
value: 90
}
};
$('#page').liveGraph({
height : 350,
barWidth : 100,
barGapSize : 2,
data : originalData
});
});
</script>
</body>
</html>
- Activate the complete bsp application.
- Open the AMC 'ZAMC_TEST' and click on the insert line under the Channel Details section.
- give authorized Program as ZAPC_MESSAGE_SEND , prog. type as REPS and activity as SEND.
- activate your amc.
Now we are almost done we just need to create a report to run the bsp application. It is possible to execute the bsp application directly but it open the bsp application in the internet explorer, but we have to run the bsp application in chrome browser. so make sure that your default browser is chrome.
Creating a report to run the bsp application:
- Run the t-code SE38 and give input as ZBSP_EXECUTE and click on create.
- In the next popup provide some title, select type as Executable program and status as test program.
- Click on the save button
- Paste the following code in the report
DATA: lv_url TYPE string,
lv_urlc(4096) TYPE c,
lt_parms TYPE tihttpnvp.
*-- Create URL to BSP Application
CALL METHOD cl_http_ext_webapp=>create_url_for_bsp_application
EXPORTING
bsp_application = 'ZAPC_TEST'
bsp_start_page = 'START.HTM'
bsp_start_parameters = lt_parms
IMPORTING
abs_url = lv_url.
*-- Call the BSP Application in the default Browser
lv_urlc = lv_url.
CALL FUNCTION 'CALL_BROWSER'
EXPORTING
url = lv_urlc
window_name = 'BSP'
new_window = ' '
EXCEPTIONS
frontend_not_supported = 1
frontend_error = 2
prog_not_found = 3
no_batch = 4
unspecified_error = 5
OTHERS = 6.
IF sy-subrc <> 0.
MESSAGE ID sy-msgid TYPE sy-msgty NUMBER sy-msgno
WITH sy-msgv1 sy-msgv2 sy-msgv3 sy-msgv4.
ENDIF.
- Now run the report 'ZBSP_EXECUTE' and 'ZAPC_MESSAGE_SEND'.
- first report open your chrome browser show a bar graph.
- second report gives you three paramenters.
- try to give some three values and execute the report (press f8).
- Graph in the browser should get automatically updated without any refresh.
I hope that helps. I'm open for your comments, suggestions, question and all. Please leave your comments.
Thanks,
Santosh.
2 Comments
| User | Count |
|---|---|
| 5 | |
| 5 | |
| 3 | |
| 2 | |
| 2 | |
| 2 | |
| 2 | |
| 1 | |
| 1 | |
| 1 |
