Thank you, Robert. This is a common requirement for companies. The CRM WebClient UI was introduced with SAP CRM 2006s and has become the de-facto UI technology in all SAP CRM releases after SAP CRM 2005.

Figure 1 shows the standard Task toolbar. I will explain how to enhance this toolbar to add a new Print button. Although I used an SAP CRM 7.0 system for this article, the process also applies to SAP CRM 2007 and SAP CRM 2006s. You should be familiar with ABAP objects to implement this enhancement. In addition, ensure that you already have a package created in the customer namespace in the Object Navigator (transaction SE80) where you store all your enhanced objects.

Figure 1

The standard Task toolbar

Step 1. Create a new enhancement set in your SAP CRM system with view cluster BSPWDVC_CMP_EXT using transaction SM34. I created the enhancement set ZTEST for this example (Figure 2).

Note
For more information on creating an enhancement set, refer to SAP Help.

Figure 2

Create the new enhancement set

Step 2. Add the new enhancement set to a client. Use transaction SM30 to edit view BSPWDV_EHSET_ASG. Here you add your enhancement set to your current development client. I added the ZTEST enhancement set to my client 200 (Figure 3). Select your client by clicking the drop-down menu in the Client field.

Figure 3

Assign the enhancement set to a client

Step 3. Enhance the standard UI component. Use the component workbench transaction BSP_WD_CMPWB. As shown in Figure 4, I decided to enhance the task component (BT125H_TASK). Click the Display button.

Figure 4

Enter the UI component to enhance

In the next screen, enhance the component by clicking the Enhance Component button (Figure 5). In the pop-up screen that appears, enter the enhancement set you created in step 1 and then press Enter.

Figure 5

Enter the enhancement set you created in step 1

The system prompts you for the custom application name. You can enter a Business Server Page (BSP) application name using the customer namespaces such as Z or Y. I decided to store all my enhancements as part of application ZBT125H_TASK (Figure 6). Press Enter and then click the Yes button when you are prompted to create a new BSP application.

Figure 6

Enter the custom application name

The system asks you to enter the repository name. You can keep the runtime repository name the same as the original — it becomes a copy of the runtime repository as in the original application. I kept the same name in my example (Figure 7).

Figure 7

You can use the existing runtime repository name Repository.xml

Next, a series of pop-up windows appears. One asks you to enter your custom package to store your enhancements. I used the package ZENH_PACKAGE to store all my enhanced objects. Another shows you which objects are created in this process. The system creates the Internet Communication Framework (ICF) service for your new BSP application. ICF entries are required to make the BSP application run in the Internet browser. You can use transaction SICF to check out the service created with the same name as your custom BSP application. Keep pressing Enter in these pop-up windows.

After you have entered everything, you see a message in the bottom information bar that the UI component has been successfully enhanced. You can see the component you just enhanced, such as my task component (Figure 8). Simply expand the views node (on the left pane of the workbench) to see the different view names that constitute the screens you see in the browser.

Figure 8

View the enhanced component

Step 4. Select the view for your custom toolbar button. In my example, I want to enhance the view BT125H_TASK/TaskOVView set in the Component Structure Browser to include a Print button in the toolbar. Double-click it to get the view details (such the view controller name) on the right pane in the UI workbench as shown (Figure 9). To find the correct overview page to enhance, look for the views with a suffix of OVViewSet (this is usually the case in all components be it task, partner, or opportunity) and then check the GET_BUTTONS method in the corresponding view controller class. This tells you if the overview page you are looking at is the right one to enhance. Another way is to use the F2 key on the actual view rendered in the browser.

Figure 9

Select the view to enhance

Step 5. Enhance BT125H_TASK/TaskOVViewset to add a new button. Double-click the class name circled in Figure 9. In my case, I view the GET_BUTTONS method of view controller class CL_BT125H_T_TASKOVVIEWSET_IMPL (Figure 10) to see code similar to the code in Figure 11.

Figure 10

Select GET_BUTTONS

Figure 11

Code for the method GET_BUTTONS

My objective is to add a new Print button between the Back and Save buttons in the Task toolbar in Figure 1. To add the new button, I have to enhance the view named BT125H_TASK/TaskOVViewset. You can enhance views by right-clicking the view name and selecting Enhance from the context menu.

Keep selecting OK in the ensuing pop-up windows that inform you that the view controller and context class of the view have now been enhanced. Once the view is enhanced, you can see that that the enhanced view is no longer grayed out. Also, the view controller and context (ending with CTXT) class names now begin with a prefix ZL_*(Figure 12).

Figure 12

The view controller and context class names now begin with ZL

Step 6. Redefine the view controller class method GET_BUTTONS. The enhanced view controller class is inherited from the SAP view controller class for this view. You can verify this by opening the class Properties tab in Figure 10 and selecting the Super class field.

For my example, I again double-click on the enhanced view controller ZL_BT125H_T_TASKOVVIEWSET_IMPLon the right-hand pane (Figure 12). Then, I redefine the GET_BUTTONS method of the new view controller class ZL_BT125H_T_TASKOVVIEWSET_IMPL (which is a subclass of CL_BT125H_T_TASKOVVIEWSET_IMPL) by clicking the redefine icon in edit mode (Figure 13).

Figure 13

Click the redefine icon to redefine GET_BUTTONS

Next, you need to insert your own method implementation in GET_BUTTONS. The code in Figure 14 is an example of how to add the Print button. I also redefined the view controller method GET_NUMBER_OF_VISIBLE_BUTTONS to allow seven buttons to be visible by default in the toolbar instead of the standard six buttons (Figure 15).

method IF_BSP_WD_TOOLBAR_CALLBACK~GET_BUTTONS.
  data:
    ls_button     type crmt_thtmlb_button_ext.

  CALL METHOD SUPER->IF_BSP_WD_TOOLBAR_CALLBACK~GET_BUTTONS
    RECEIVING
      RT_BUTTONS = rt_buttons.

* Insert the new button at position 2 of the toolbar
  ls_button-text = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_BT/PRINT' ).
  ls_button-tooltip = cl_wd_utilities=>get_otr_text_by_alias( 'CRM_UIU_BT/PRINT' ). "#EC NOTEXT
  ls_button-on_click = 'PRINT_TASK'.                            "#EC NOTEXT
  ls_button-page_id  = me->component_id.
  ls_button-enabled  = abap_true.
  INSERT ls_button INTO rt_buttons INDEX 2.

endmethod.

method IF_BSP_WD_TOOLBAR_CALLBACK~GET_NUMBER_OF_VISIBLE_BUTTONS.

   rv_result = 7.

endmethod.

Add Functionality to the New Button

You should now see the new Print button in the UI. To add functionality to the button, you need to create an event handler for the button event name you defined in Figure 14.

In my example, I use the event name to be called when the Print button is clicked as PRINT_TASK as defined in the code statement:

ls_button-on_click =  'PRINT_TASK' .                            

In Figure 9, right-click Event Handler and select Create. Enter your event name as shown in Figure 16. The system creates an event handler method EH_ONPRINT_TASK in the view controller class.

Figure 16

Enter the event name to create the new event

Depending on your requirement, you could also assign actions to your button functionality such as using Smart Forms for printing. You would have to add code in your event handler method for that.

After the checking for any syntax errors in the view controller class (ZL_BT125H_T_TASKOVVIEWSET_IMPL) by pressing Ctrl-F2, all you need to do is activate the controller class by pressing Ctrl-F3. When complete, re-launch your CRM WebClient UI in the browser to see your new button in the toolbar (Figure 17).

Figure 17

The new Print button is now in the toolbar

Sudipta Sarma

Sudipta Sarma is a senior SAP CRM consultant with The Principal Consulting Inc. (TPC). He has more than six years of SAP CRM technical and functional experience in various industries. Before joining TPC, he served as an expert developer in SAP Labs India besides working in several key consulting positions. Having expertise in CRM consulting as well as in product development, he has worked in several successful SAP CRM implementation projects in the roles of solution architect and technical lead. He is a frequent blogger in SAP Developer Network (SDN).

You may contact the author at sudipta.sarma@TPCus.com.

If you have comments about this article or publication, or would like to submit an article idea, please contact the editor.