Skip to Content
Introduction

Hello Everybody, while I was building the how-to paper on Visual Composer

and BI Document Storage I was using quite a bit of portal eventing. In this

how-to in order to upload additional files and associate the files with

meta, master or transactional data their needed to be some sort of

mechanism to perform a file upload from within the Visual Composer. In

order to successfully accomplish this particular task I had to link a BSP

application into a Visual Composer application. The linking was done via

portal eventing.

One of the most tedious parts of linking these two technologies into a

single application was receiving and parsing the Visual Composer event

string from within ABAP. I decided to develop a utility in order to parse

the string for you! So, if you are linking a Web Dynpro for ABAP or a BSP

into a Visual Composer Application or vice versa you can very easily

leverage this tool to speed up your development very quickly. See another example of how this is used in Combining ABAP and Visual Composer.

In order to demonstrate the use of this utility we will do something quite

a bit more simple than the BI Document Store / Visual Composer Integration. We will simply print out a table of parameters passed from

the VC Event String using my utility.

How do we use the utility?: Setting up the VC application

First things first…

1/  Login to the Visual Composer and create an

application. Give the application a name, for example ParseMyString.

Figure 1.1

image

2/ Create an iView within your model, give the iView a

name such as SendToBSP. Once you have successfully done this add a

Start Connector and a Form Component to your Storyboard.

Figure 1.2

image

3/ Give the Form Component the name Address Information

and create the following UI Elements on the Form Component.

Field Name

UI Control

Data Type

First Name

Input Field

Text

Middle Initial

Input Field

Text

Last Name

Input Field

Text

Street Number

Input Field

Numeric

Street Name

Input Field

Text

City

Input Field

Text

State

Input Field

Text

Zip Code

Input Field

Numeric

Print Label

Button

N/A

Figure 1.3

image

Figure 1.3A

image

4/ We now need to add an action to the Submit

button that was just created. In order to do this we need to right click on

the button and hit Properties. From the Control Properties modal

dialog box click on the Action tab. Select the Action type +System

action+ and choose System action Submit and Apply to Self.

You can now close the modal dialog box. Save your model.

Figure 1.4

image

5/ Navigate to the design area of your Visual Composer

model and select the output port and drag and drop onto your storyboard.

You will now see a variety of options of different connectors that can be

automatically generated for you. Choose the Signal Out Connector. You will

be prompted to Select Output Fields, select all except printlabel

and click on the OK button.

Figure 1.5

image

6/ Highlight the link between the Form component and the

Signal Out connector. On the right hand side of Figure 1.6 you can see the

Event name defaulted to evt1, change this to submit.

Figure 1.6

image

Figure 1.6A

image

7/ Right click on the Signal Out connector and click on

the Configure Element button. From within the right upper corner of the

Storyboard (see Figure 1.7A) change the output signal name to

eventstring. We are not done configuring the VC application.

Figure 1.7

image

Figure 1.7A

image

8/ Deploy the Application!

Figure 1.8

image

How do we use the utility?: Setting up the BSP application

9/ Login to your SAP system where you will create your BSP application. Navigate to transaction SE80 and create a new

BSP application. Give the application a name Z_REC_VC_EVENT and a short description.

Figure 1.9

image

10/ Go ahead and associate the BSP with a transport and a development package. You should now see the properties of the

BSP application on the very first page you see there is a checkbox available that has the text Supports Portal Integration make

sure you select this box.

Figure 2.0

image

11/ Now go ahead and create a page with flow logic for you BSP application. Give it a name.

Figure 2.1

image

12/ Now that we have a page created navigate to the layout tab and copy and paste in the following code.

Code Segment 1.0

13/ Save your code. Navigate to transaction se37 and create a new Function Module. Name the Function Module

Z_BAPI_ASCII_CODE_TO_CHAR. Copy and paste the code below into your new function module. Save and Activate!

Code Segment 1.1

FUNCTION Z_BAPI_ASCII_CODE_TO_CHAR.

*”—-


“Local Interface:

*”  IMPORTING

*”     VALUE(HEX_STRING) TYPE  STRING

*”  EXPORTING

*”     VALUE(CHAR_STRING) TYPE  STRING

*”—-


  class cl_abap_conv_in_ce definition load.

  data:

      result_wa type match_result,

      l_temp type string,

      l_char_string type string,

      l_code(2) type x value is initial,

      l_result type c,

      l_offset type i,

      l_place type i.

  find first occurrence of ‘%’ in hex_string results result_wa.

  if sy-subrc eq 0.

    l_offset = result_wa-offset.

    l_temp = hex_string+l_offset(3).

    shift l_temp left.

    l_code = l_temp.

    shift l_code right in byte mode.

    try.

      call method cl_abap_conv_in_ce=>uccp

        exporting

          uccp = l_code

        receiving

          char = l_result.

      l_place = l_offset + 3.

      if l_result ne space.

        concatenate hex_string(l_offset) l_result hex_string+l_place into char_string.

      else.

        concatenate hex_string(l_offset) hex_string+l_place into char_string separated by space.

      endif.

      call function ‘Z_BAPI_ASCII_CODE_TO_CHAR’

        exporting

          hex_string  = char_string

        importing

          char_string = char_string.

    endtry.

  else.

    char_string = hex_string.

  endif.

endfunction.

14/ Create another function module in the same transaction. Name the new Function Module Z_BAPI_VC_PARAMS. Cut and paste

the code below into the Function Module editor. Save and Activate the code.

Code Segment 1.2

FUNCTION Z_BAPI_PARSE_VC_PARAMS.

*”—-


“Local Interface:

*”  IMPORTING

*”     VALUE(I_PARAM_STRING) TYPE  STRING OPTIONAL

*”  EXPORTING

*”     VALUE(ET_PARAMS) TYPE  SDOKPROPTYS

*”—-


  data:

        l_string type string,

        lt_rows type table of string,

        lt_row type table of string,

        lt_param type table of string,

        l_row type string,

        l_param type string,

        l_temp type string,

        ls_param type sdokpropty,

        l_name type string,

        l_value type string.

  call function ‘Z_BAPI_ASCII_CODE_TO_CHAR’

    exporting

      hex_string  = i_param_string

    importing

      char_string = l_string.

  split l_string at ‘Row’ into table lt_rows.

  loop at lt_rows into l_row.

    if sy-tabix eq 1. continue. endif.

    split l_row at ‘” ‘ into table lt_row.

    loop at lt_row into l_param.

      if l_param eq space. continue. endif.

      split l_param at ‘=’ into l_name l_value.

      if l_value ne space.

        ls_param-name = l_name.

        replace all occurrences of ‘”‘ in l_value with ”.

        ls_param-value = l_value.

        insert ls_param into table et_params.

      endif.

    endloop.

  endloop.

endfunction.

15/ Navigate back to transaction se80 and re-open the Z_REC_VC_EVENT BSP application. Double-click on the default.htm

page that we created. Navigate to the Event Handler tab. Select the OnInputProcessing event. Cut and paste the code below into the

event screen. Save and activate.

Code Segment 1.4

  • event handler for checking and processing user input and

  • for defining navigation

class cl_htmlb_manager definition load.

data:

    event type ref to cl_htmlb_event,

    ex_event type ref to if_htmlb_data,

    event_dataobject type string,

    lt_proptys type sdokproptys.

  • Optional: test that this is an event from HTMLB library.

if event_id = cl_htmlb_manager=>event_id.

  event = cl_htmlb_manager=>get_event( request ).

  ex_event = cl_htmlb_manager=>get_event_ex( runtime->server->request  ).

  if ex_event is bound.

    if ex_event->event_name eq ‘portalEvent’.

      event_dataobject = ex_event->event_server_name.

      if ex_event->event_id eq ‘urn:com.sap.vc:epcm:eventstring’.

        call function ‘Z_BAPI_PARSE_VC_PARAMS’

          exporting

            i_param_string = event_dataobject

          importing

            et_params      = lt_proptys.

        props = lt_proptys.

      endif.

    endif.

  endif.

endif.

16/ Save and activate the BSP Application. Make sure of course that all three of the newly created objects are in fact

activated.

Figure 2.2

image

How do we use the utility?: Creating the Portal Components

17/ Login to the portal and navigate the folder structure in which you want to create your iViews and Page. Right Click

on the folder follow the context menu path to create a new SAP BSP iView pointing to the new BSP Application Z_REC_VC_EVENT that we

created.

Figure 2.3

image

Figure 2.3A

image

Figure 2.3B

image

18/ Next Copy and Paste as a Delta link the VC iView we created in the first part of this exercise into the same folder

as the BSP iView.

Figure 2.4

image

19/ Create a Portal page that contains the two iViews in our folder structure you see above.

Figure 2.5

image

20/ Click on the preview button to see the event string parsed and dumped out into an HTML table!

Figure 2.6

image

Summary

What the Event String parser essentially does is when the Z_BAPI_PARSE_VC_PARAMS function module is called the event string is then

passed to the Z_BAPI_ASCII_CODE_TO_CHAR function module that converts all of the hexadecimal characters in the string back into their

representative characters. The string format is then parsed and placed into a table of type SDOKPROPTYS which contains two fields; NAME

and VALUE. The name field as suggested by the name contains the name of the parameter and the value contains the parameter value itself.

So by simply calling this function module from either a web dynpro as can be seen in Thomas Jung’s blog or in a BSP as you can see here

you can very easily utilize the values passed to you from within the Visual Composer!

To report this post you need to login first.

1 Comment

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

Leave a Reply