This article explains how to use an custom extension web item to combine a standard query with simple HTML and demonstrate the advantages to have access to the BW backend.
Scenario
We want to insert a Title bar which corresponds to the corporate identity of our company. The standard text item can’t support the formatting, but HTML can.
By a click on the button the font family can be influenced. In addition the user should be able to see his authorization roles.
Next to this extensions the standard analysis grid must be displayed
Settings in the Web Template
Create a web template with a button group item, custom extension web item and a analysis item (with a suitable Dataprovider). The web template should be similar to this:
Settings of the custom extension web item
Button Group Item
The Button Group item should change the value of the property “FONT” in the custom extension web item. In my example I used the font family “ARIAL” and “FUTURA”.
ABAP Class
Now the interesting stuff comes…
Based on the custom extension web item a abap class in the BW Backend is adressed. The ABAP class will receive the properties and the query data as an XML.
The ABAP Class will then do whatever it dos and return the results as an XML String back to the SAP WAD which then will be converted to HTML.
Web Template setting
Definition what data provider information will be transferred:
Access variables container
You use this parameter to determine whether to pass variable values to the ABAP class. You get the variable values using the I_XML parameter of the ABAP EXECUTE method.
Access navigational state
Select this parameter if you want to pass the navigational state (for example, filter values, drilldown state, axes information) to the ABAP class.
Access result set
Select this parameter if you want to pass the data cells (numbers) to the ABAP class.
Source: SAP Help
In my example the setting above can be used since we don’t need the data provider data.
Creation of the ABAP Class
…by copying CL_BICS_CONS_WEBITEM_SAMPLE to ZWAD_CUSTOM_EXTENSION
The *SAMPLE Abap Class is a delivered ABAP Class for the Custom Extension Web Item. All necessary methods interfaces etc. are already defined in this class.
ABAP Interface IF_BICS_CONS_WEBITEM_CUST_EXIT
The interface provides the framework for the ABAP Class like the ABAP methods needed etc.
Source: SAP Help
The attribute P_PROPERTIES can be used to store your HTML. It is a global attribute and can be used in all methods:
Method: INITIALIZE
The method Initialize is called in the first step of the ABAP Class and can be used to read out the name/value pairs which are defined in the custom extension web item.
The parameter I_T_PROPERTIES is an internal table which contain all name/value pairs.
In my example I use this method to generate my HTML since only in this method the properties of the web item can be accessed. The following coding is used:
DATA: l_s_name_value TYPE rsbolap_s_name_value,
user TYPE XUBNAME,
lw_agr_users TYPE AGR_USERS,
i TYPE n,
lt_agr_users TYPE STANDARD TABLE OF AGR_USERS.
* assemble a heading
* ======================================================================
CLEAR p_properties.
* Select User Roles
* ======================================================================
SELECT * FROM AGR_USERS INTO TABLE lt_agr_users
WHERE UNAME EQ sy-uname.
* assemble name/value lines
* ======================================================================
LOOP AT i_t_properties INTO l_s_name_value.
* Create “Title”
* ======================================================================
CONCATENATE p_properties ‘<p style=”font-family:’ l_s_name_value-value ‘,Times,serif”><font family=”Century Gothic” color=red> This text is written in: ‘ l_s_name_value-value ‘</font></p>’ INTO p_properties.”#EC NOTEXT
* Create HTML table with User Roles
* ======================================================================
CONCATENATE p_properties ‘<h3>Your Authorization roles</h3>’ INTO p_properties.
CONCATENATE p_properties ‘<table cellspacing=”0″ border=”1″ bordercolorlight=”#ffffff”>’ INTO p_properties.
CONCATENATE p_properties ‘<tr>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:13px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties ‘No’ INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:13px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties ‘Role’ INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:13px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties ‘from’ INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:13px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties ‘to’ INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘</tr>’ INTO p_properties.
i = 1.
LOOP AT lt_agr_users INTO lw_agr_users.
CONCATENATE p_properties ‘<tr>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:11px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties i INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:11px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties lw_agr_users-AGR_NAME INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:11px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties lw_agr_users-FROM_DAT INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘<td style=”font-family:Arial,sans-serif; font-size:11px; padding:2px”>’ INTO p_properties.
CONCATENATE p_properties lw_agr_users-TO_DAT INTO p_properties.
CONCATENATE p_properties ‘</td>’ INTO p_properties.
CONCATENATE p_properties ‘</tr>’ INTO p_properties.
i = i + 1.
ENDLOOP.
CONCATENATE p_properties ‘</table>’ INTO p_properties.
ENDLOOP.
Method: FREE
This ABAP method is called in the following cases:
● Closing the application
● Logging off from the system
● Changing the Web template
It can be used to develop ABAP which is executed for these special events.
Method: EXECUTE
The method is used to transfers the ABAP Class results back to the Custom Extension Web Item.
Depending on the settings in the web item, the parameter i_xml contains the navigational state and/or the result set.
So in this method you can basically access all data from the query and it’s navigation state, work with it in ABAP and give it back to the web template to generate your own HTML (incl. BI WAD web items).
The result is stored in an XML structure (E_XML)
In my example the HTML in P_PROPERTIES must be converted back to E_XML so that the Web Template can handle it. To achieve this I used the following coding:
DATA:
l_xml TYPE string,
l_string TYPE string.
CLEAR e_xml.
TRY.
* The following section assemble a small HTML snippet to be returned
* to the UI
* ==================================================================
* name/value pairs
l_string = p_properties.
* heading
* The customer exit returns HTML data to be displayed.
* The result HTML needs to be stored in E_XML using UTF-8 encoding.
* You can convert simple ABAP-strings to UTF-8 by calling the
* following the method:
* ==================================================================
CALL METHOD cl_bics_cons_webitem_util=>string_2_utf8_xstring
EXPORTING
i_string = l_string
RECEIVING
r_utf8_xstring = e_xml.
CATCH cx_bics_cons_webitem_error.
* exception handling
ENDTRY.
Debugging
Since the web template and the abap class is executed in the web, we can’t use the standard abap debugger. To control your coding in case of an error you can use the FM “RRMS_MESSAGE_HANDLING” with the following parameters:
I_CLASS = BRAIN
I_TYPE = S
I_NUMBER 143
Source: SAP Help
also published on http://sap-user-blog.com