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
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
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
Figure 1.3A
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
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
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
Figure 1.6A
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
Figure 1.7A
8/ Deploy the Application!
Figure 1.8
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
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
11/ Now go ahead and create a page with flow logic for you BSP application. Give it a name.
Figure 2.1
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
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
Figure 2.3A
Figure 2.3B
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
19/ Create a Portal page that contains the two iViews in our folder structure you see above.
Figure 2.5
20/ Click on the preview button to see the event string parsed and dumped out into an HTML table!
Figure 2.6
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!
1 Comment
