Many companies use custom Web reporting table interface classes to modify presentations and data sets. For example, a customer may need a high-level metrics dashboard containing one or multiple metrics summary reports (tables) with active exceptions (colored light bulbs). Each key figure in each table has a different icon. When you click on any one of them, a different detailed report displays. Each report has a different template and possibly a different data provider that may be restricted by a different combined characteristic filter based on the row you select. In the current practice, you hard code the key figure name, template ID, and data provider name, special icons path, and similar details in your table interface class. Therefore, you need to change the code when a requirement changes, but this process is tedious and time consuming.

I’ll introduce you to an innovative one-size-fits-all technique using object-oriented ABAP (ABAP Objects). No matter how often your business requirements change, you can avoid changing the coding in your table interface class by building a filtering string, JavaScript functions, and a hyperlink string, as well as changing a data cell dynamically. This one table interface class fits all needs. This technique works for BW 3.x.

Figure 1 shows a digital cockpit report with several icons such as line chart and information. (Note that this and all figures here contain demo data and do not represent actual company performance.) The icons in Figure 1 link users from a high-level report to a more detailed graph or report. This linkage occurs at the level of the hierarchy to which users have drilled down. Click on the information icon  to go directly to the detailed report for Plant 1002/100: BRK STERILIZ VAC characteristic.

Figure 1

Click on the information icon to go directly to the detailed report for Plant 1002/100: BRK STERILIZ VAC characteristic

The technique that I’ll describe accomplishes several main tasks with no hard coding. First, you set up the handshake between the template and the table interface class. This tells the table interface class what the Web template wants to do. Then you dynamically build the following:

• A filtering string to retrieve only the data that you want
  
  
• JavaScript functions to perform certain activities such as opening windows and linking to data providers
  
  
• A hyperlink string in the data cell content so that the users see the specified icons and can perform actions on the Web report

The tricky part is how to tell the table interface class what you want to do from the Web template. Specifically, it conveys information including which key figures should have a special icon; which icons you want to allow users to click on; which data provider to use; and which template to open.

The name of the table item (an item in the template) is a perfect communicator between the table interface class and Web template. Since it is a string type, you can easily establish the handshake or language between the interface class and template by using some special characters (i.e., XX, YY, &&, *…. The details are in step 2 below). You need to establish the handshake before the development in table interface class.

My technique includes these eight steps that I’ll explain in detail with examples:

Step 1. In the main template in Web Application Designer (Web AD), put all data providers in the main template

Step 2. Use the table item name in the main template to communicate between the template and the table interface class

Step 3. Create the new custom ABAP Objects class inherited from class CL_RSR_WWW_MODIFY_TABLE and redefine START, CAPTION_CELL, STRUCTURE_CELL, CHARACTERISTIC_CELL, and DATA_CELL methods

Step 4. In the START method, make a JavaScript coding string to dynamically build JavaScript functions to launch a template with a data provider and a filter

Step 5. In the CAPTION_CELL method, parse the communication string to an internal table based on the communication with the main template

Step 6. In the STRUCTURE_CELL method, fill in the X coordinate for all key figures that you are enhancing

Step 7. In the CHARACTERISTIC_CELL method, dynamically build a filtering string based on the Web Application Programming Interface (API) filter command structure

Step 8. In the DATA_CELL method, dynamically change cell content based on information in the internal table it_comm.

Step 1. In the main template in Web AD, put all data providers in the main template. The main template passes the data providers to the subtemplates. Make sure the data provider for the details page contains all of the row characteristics in the data provider for the main page to pass the filter string from the main page to the detail page dynamically. The detail page may contain more characteristics than the main page. I’ll show you how to perform this step.

Go to BEx Query Designer and open the query ZM_WEB_QM_MULTI_REG in the data provider for the main page (Figure 2). Also in BEx Query Designer, open the query ZM_WEB_QM_BSRDT in the data provider for the details page (Figure 3). The Rows area circled in Figures 2 and 3 have four characteristics in common: Region, Plant, MRP Controller, and Material. Because both data providers contain these characteristics, the main page can pass the filters in any combinations of these four rows to the details page.

Figure 2

Open the query in the data provider for the main page

Figure 3

Open the query in the data provider for the details page

Figure 4

Three data providers in template ZTPL_QM_WEB_REGION_TAB_V4 in Web AD and their relationship with queries

Figure 5

Query for all plants trending per region

Figure 6

Query for all MRP controllers trending per plant

Figure 7

Query for all materials trending per MRP controller

Step 2. Use table item name in the main template to communicate between the template and the table interface class. This is the centerpiece of this technique because you can direct the table interface class through this communication string. For instance, you can say which key figures you want to have, when to include a special icon, which icons users can click on, which data provider you want to use, which template you want to open, and which JavaScript function you want to call. You can use some special characters to establish the handshake or language between the interface class and template.

Web Page Customization Table Interface Handshake

Now I’m going to explain the handshakes that the code uses to communicate between the template and table interface class. Figure 8 shows an example of code for the table item name that includes several characters with different meanings.

Figure 8

Table item name

In Figure 8, the first two characters tell how to show the data cell content. Table 1 shows the possible options for the first two characters. You must pick only one combination of these characters. The third character of the table item name denotes the three options to tell how to search the key figures, as shown in Table 2. You must choose only one option for this character. The fourth character allows you to choose from four different options that determine the type of icon to display. See Table 3 for these options. Note that you must choose only one option or use none of the options. Table 4 shows the special characters for different types of separators. You can you use these characters together based on how many key figures, definitions, and so on that you need to enhance. Finally, the six special characters in Table 5 appear after XXXX in the item name in Figure 8. They allow you to choose which JavaScript functions you want to call.

Developers need to consider a couple of items when making handshakes and writing the code. Sometimes, key figures’ descriptions contain special characteristics (CR, <>) that the item name cannot accept. The solution is to use a partial name with * pattern instead of the full name. In addition, your code in method STRUCTURE_CELL needs corresponding changes from read table …. with key to loop at with CP pattern string comparison or use the X coordinate (the position of the X coordinate of a key figure) instead of the key figure’s description.

Also, a 256-character limit exists for the length of the item name. To overcome this limitation, you can enhance your interface class to take the prior key figure’s definitions as its default if they are same. You should make all data providers’ name as short as possible.

Step 3. Create the new custom ABAP Objects class inherited from class CL_RSR_WWW_MODIFY_TABLE and redefine START, CAPTION_CELL, STRUCTURE_CELL, CHARACTERISTIC_CELL, and DATA_CELL methods.

To complete this one-time process, start Class Builder in transaction SE24 (Figure 9). Enter ZCL_RSR_WWW_MODIFY_TABLE in the Object type field. Click on the Create button to see the screen in Figure 10. Click on the create inheritance icon and the Superclass field shows up (Figure 11). Enter CL_RSR_WWW_MODIFY_TABLE in the Superclass field and save it.

Figure 9

Start Class Builder

Figure 10

Enter CL_RSR_WWW_MODIFY_TABLE in the Class field

Figure 11

Enter CL_RSR_WWW_MODIFY_TABLE in the Superclass field

Then, the Class Builder: Change Class screen automatically appears. Select the Methods tab (Figure 12). Select the CAPTION_CELL method and click on the redefine icon near the right of the toolbar. Then you can enter the ABAP code in the method. The SAP how-to document “How to … Enhance your Web Query with the Table Interface” provides all of the detailed steps to create an inheritance class and redefine the methods.

Figure 12

Redefine methods START, CAPTION_CELL, STRUCTURE_CELL, CHARACTERISTIC_CELL, and DATA_CELL

Repeat this step for the START, STRUCTURE_CELL, CHARACTERISTIC_CELL, and DATA_CELL methods. For steps 4 through 8 below, you need to click on the Methods tab in Class Builder, select each method, and then add the code. You can download the entire methods to use in your system by clicking this link.

After you redefine the methods, you also need to create an internal table called it_comm to communicate with the Web template. To do this, switch to the Attributes tab. Click on the direct type entry icon (Figure 13). Then, type the code shown in Figure 8 in the Private section of the screen in Figure 14. The code defines the type t_comm and internal table it_comm.

Figure 13

Click on the direct type entry icon

Figure 14

Structure of internal table it_comm

Step 4. In the START method, make a JavaScript coding string to dynamically build JavaScript functions to launch a template with a data provider and a filter. You must perform this step because this kind of function doesn’t exist in SAP business content. The DATA_CELL method, which is available via this link, uses these functions as a part of hyperlink string so that when you click on this icon, a specified page opens. Table 6 shows the JavaScript functions.

When you build JavaScript functions, you need to use Web API’s command sequence. A command sequence allows you to add new commands to an original command, which means you can change several objects in different ways with commands — for example, in this case, filtering a data provider for different criteria. The APPLY_CMD_ON_TARGET = "X" allows you to choose whether to use the subsequent commands in a new page created by the main command. See Figure 15 for details.

* Make javascript coding string for functions, Launch a tem
 plate with passing DP and filter in a different window 
concatenate
  ‘function exec_template_dpfilter( DP, template, filter) {‘ CRLF
  ‘chart_url=”’ url ‘“ + “‘
  ‘&CMD=RELEASE_DATA_PROVIDER’
  ‘&TEMPLATE_ID=” + template + “‘
  ‘&DATA_PROVIDER=” + DP + “‘
  ‘&APPLY_CMD_ON_TARGET=X’
  ‘&CMD_1=DATA_PROVIDER=DP_INTERFACE’
  ‘&FILTER_COLLAPS=’
  ‘“ + filter;’ CRLF
  ‘openWindow(chart_url,””,”dependent=no”,”800”,’
      ‘“600”,”true”)’  ‘ }’ CRLF
   into l_coding.
* create javascript function
call method set_javascript_function
  exporting
    i_name = ‘exec_template_dpfilter’
    i_coding = l_coding.

Step 5. In the CAPTION_CELL method, parse the communication string to an internal table based on the communication with the main template. N_ITEM_NAME equals the item name I use to communicate with the main template. Because it contains my long communication string that methods can’t easily read, you need to parse, or split, it to the readable internal table it_comm you created in step 3. The parsing process is based on the handshake you made in step 2 (Tables 2 and 4) to separate the information of the entire table for each key figure by YY and separate the information of the key figure to each definitions (key figure description, data provider, template, icon, and function) by XX. Then the parsing process keeps the key figures in the communication internal table it_comm for the STRUCTURE_CELL and DATA_CELL methods to use. Figure 16 shows the coding details.

split N_ITEM_NAME at ‘YY’ into TABLE it_string.
 LOOP AT it_string INTO w_string.
     check sy-tabix > 1.
     split w_string at ‘XX’ into w_comm-tx w_comm-dp w_comm-tpw_comm-gn w_comm-fn.
*If no DP or templateid or function is defined, take the priorKF’s DP or templateID or function as the 
default.
      if w_comm-dp <> ‘’.
        w_dp = w_comm-dp.
      else.
        w_comm-dp = w_dp.
      endif.
……………..
* check  by X Coordinate or description
   if N_ITEM_NAME+2(1) = ‘X’.
        w_comm-xx = w_comm-tx.
   elseif N_ITEM_NAME+2(1) = ‘F’ or N_ITEM_NAME+2(1) = ‘P’.
        CONDENSE w_comm-tx NO-GAPS.
        TRANSLATE w_comm-tx TO UPPER CASE.
   endif.

Note
Command RELEASE_DATA_PROVIDER is a Web API command that displays a copy of the status of data provider DP in a new window with the template. For detailed information about these commands, reference SAP documentation of Web API. Go to https://service.sap.com/bi and click on Documentation. Then, select SAP BW 3.5 Documentation Enhancements>3.5 Web API Reference.

Step 6. In the STRUCTURE_CELL method, fill in the X coordinate for all key figures that you are enhancing. First, search the key figure you are enhancing with the condition based on the handshake for the third character of N_ITEM_NAME you made in step 2, and then fill in the X coordinate in it_comm-XX for each key figure that you just found (meet the condition). The DATA_CELL method, which available for download via this link, uses the X coordinate of the key figures to locate the hyperlink string on the correct cell. See Figure 17 for the coding details.

w_string = I_TEXT.
  CONDENSE w_string NO-GAPS.
  TRANSLATE w_string TO UPPER CASE.
* if decription is provided, X Coordinate needs tobe filled
  if N_ITEM_NAME+2(1) = ‘F’.
* Fill in the X Coordinate for these keyfigs
    read table it_comm into w_comm with key tx = w_string.
    if sy-subrc = 0.
      w_comm-xx = I_X.
      modify it_comm from w_comm index sy-tabix.
    endif.
* if decription is provided, X Coordinate needs tobe filled
  elseif N_ITEM_NAME+2(1) = ‘P’.
* Fill in the X Coordinate for all keyfigs which contains the patten in w_comm-tx
    loop at it_comm into w_comm where xx = 0.
      if w_string cp w_comm-tx.
        w_comm-xx = I_X.
        modify it_comm from w_comm index sy-tabix.
        exit.
      endif.
    endloop

Step 7. In the CHARACTERISTIC_CELL method, dynamically build a filtering string based on the Web API filter command structure. In this step, dynamically build filter strings for each characteristic and its value depending on the active row to filter a data provider for different criteria for later DATA_CELL method using the filter command structure FILTER_IOBJNM_N=IObjName to specify the technical name of the characteristic and FILTER_VALUE_N=CharValue to set the filter value. If you use hierarchy nodes, you need to specify the node characteristic name as 0HIER_NODE, i.e., FILTER_NODE_IOBJNM_1=0HIER_NODE. For detailed information about these commands, reference the Web API SAP documentation referred to earlier. See Figure 18 for the coding details.

* Build a filter string for Data_Cell
  CONCATENATE ‘=’ I_IOBJNM ‘&’ INTO W_STR.
  IF l_filter CS W_STR .
    W_FDPOS = SY-FDPOS + 1.
    l_filter = l_filter+0(W_FDPOS).
    W_FDPOS = SY-FDPOS - 1.
    l_iobjNo = l_filter+W_FDPOS(1).
    concatenate l_filter I_IOBJNM
      ‘&FILTER_VALUE_’  l_iobjNo ‘=’ I_CHAVL
     into l_filter.
  ELSE.
* If IObj name not exist in filter string, increase 1 on Index n andcontinue to build filter string
    l_iobjNo = l_iobjNo + 1.
    concatenate l_filter  ‘&FILTER_IOBJNM_’ 
l_iobjNo ‘=’ I_IOBJNM  ‘&FILTER_VALUE_’  
l_iobjNo ‘=’ I_CHAVL  into l_filter.
  ENDIF.
* if it is a hierarchy
  IF I_HRY_ACTIVE = ‘X’ AND I_NODE_IOBJNM = ‘0HIER_NODE’.
     concatenate l_filter ‘&FILTER_NODE_IOBJNM_’  
l_iobjNo ‘=0HIER_NODE’ into l_filter.
  ENDIF.
* If * at the front of TemplateID, 
Template = TemplateID_HierarchyLevel & W_LEVNM = HierLevel
  W_LEVNM = I_IOBJNM.

Step 8. In the DATA_CELL method, dynamically change cell content based on information in the internal table it_comm. First, change cell content from standard exception color to color light bulbs if the item’s name starts with EZ or DZ, or keep the standard color depending on your requirements. See Figure 19 for the coding details.

IF N_ITEM_NAME+1(1) = ‘Z’.
  path = ‘mime/Customer/Images/’.
  IF N_ITEM_NAME+0(1) = ‘D’.
    l_num = ‘’.    “ remove 0s for dashborad
  ELSE.
    IF C_CELL_CONTENT CS ‘’ .
      W_FDPOS2 = SY-FDPOS + 1.
    ENDIF.
    IF C_CELL_CONTENT CS ‘“>’ .
      W_FDPOS1 = SY-FDPOS + 2.
    ENDIF.
    W_LEN = W_FDPOS2 - W_FDPOS1 - 1.
    IF W_FDPOS1 > 0 AND W_LEN > 0.
      L_NUM = C_CELL_CONTENT+W_FDPOS1(W_LEN).
    ELSE.
* For precalculated query which keyfigs has no context menu
      L_NUM = C_CELL_CONTENT.
    ENDIF.  ENDIF.
* Replace exception colors to color light bulbs

Secondly, get information from communication internal table it_comm, build the hyperlink string dynamically with a JavaScript call and with the specified icon, then replace the cell content with it for the key figure that you are enhancing. For example, add a calling JavaScript function exec_template_dpfilter with data provider w_comm-dp, template w_comm-tp, and filter parameter coding. Replace the key figure’s cell content with this long hyperlink string so that when you click on this icon, a specified page opens. See Figure 20 for the coding details.

read table it_comm into w_comm with key xx = I_X.
check sy-subrc = 0.
* && = Separator for multiple DPs / Templates / Icons / Functions
split w_comm-dp at ‘&&’ into TABLE it_dp.
……………………………………….
LOOP AT it_tp INTO w_tp.
  w_TABIX = sy-TABIX.
  read table it_dp into w_dp index w_TABIX.
…………………………………………………………….
  w_comm-dp = w_dp.
………………………………………………………………
  if strlen( w_comm-dp ) > 1.
* If * at the front of DP, means DP = DP_HierarchyLevel, i.e. DP_ZPRODH1
    IF w_comm-dp+0(1) = ‘*’ and W_LEVNM <> ‘’.
      w_comm-dp = w_comm-dp+1.
      if W_LEVNM ca ‘__’ .
        w_pos = strlen( W_LEVNM ) - 3.
        do w_pos times.
          if W_LEVNM+w_pos(2) = ‘__’.
            w_pos = w_pos + 2.

Figure 21 shows the result in the main metrics dashboard. When you click on the information icon on the right side of green light bulb on the third row, the detailed report is open just for plant 1002/100.

Figure 21

Show exceptions as colored lights

More Examples

You can change the standard exception colors to light bulbs as shown in Figure 21. Alternatively, you can keep the standard exception colors as shown in the highlighted boxes in Figure 22.

Figure 22

Keep the standard exception colors

In addition, you can have many hyperlinks with any specified icons for any key figure (Figure 23). You can also have many hyperlinks with any specified icons without key figures (Figure 24).

Figure 23

Hyperlinks with specified icons with key figures

Figure 24

Hyperlinks with specified icons without key figures