Skip to Content

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 Aghadavoodi Jolfaei

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.

/wp-content/uploads/2015/01/first_634169.png

  • Select local object.
  • Enter Description and click on the generate class and service.

second.PNG

  • 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.

third.PNG

  • 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.     fourth.PNG
  • 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.
  • fifth.PNG
  • 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.

sixth.PNG

then from the context menu of the bsp application, create a page.

/wp-content/uploads/2015/01/seventh_634569.png

  • 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,

eighth.PNG

  • 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.

ninth.PNG

  • give authorized Program as ZAPC_MESSAGE_SEND , prog. type as REPS and activity as SEND.
  • activate your amc.

tenth.PNG

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 sysubrc <> 0.

   MESSAGE ID symsgid TYPE symsgty NUMBER symsgno

           WITH symsgv1 symsgv2 symsgv3 symsgv4.

ENDIF.

  • Now run the report ‘ZBSP_EXECUTE’ and ‘ZAPC_MESSAGE_SEND’.
  • first report open your chrome browser show a bar graph.

twelfth.PNG

  • second report gives you three paramenters.

thirteenth.PNG

  • 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.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. Masoud Aghadavoodi Jolfaei

    Hi Santosh,

    thanks for the blog. Just to give an advise I highly recommend to use the Push Channel Protocol (PCP) if you want to use APC in productive manner in an application. The PCP JavaScript library for usage in BSP and Web Dynpro applications is available with the note  2050139 – SAP Push Channel Protocol (PCP) JavaScript library for ABAP Push Channel (APC). With the PCP we are able to transfer meta data in addition to the pure message. This will help us to go into direction (reusable) service oriented APC applications and also provide an extensible supportability. I plan to write a dedicated blog to this subject.

    Cheers,

    Masoud

    (0) 
  2. Pratibha Aggarwal

    Hi Santosh,

    I have replicated all the above mentioned steps for the bar graph but bar graph is coming with default values not getting refreshed with the values i am passing from Z report i.e. the bar1, bar2,bar3 values.Please suggest what to do so that my values gets refreshed.

     

    Regards,

    Pratibha Aggarwal

    (0) 

Leave a Reply