Developing Content Rich Tool tips in CRM UI using jQuery
Tool tips showing at glance information of a particular object is one quick and easy time-saver that you can use in a web application. Ever wondered just hovering mouse on a link in your CRM UI will show the entire relationship linkage of an Account in the tool tip. This blog is about my experiences of building a content rich tool tip using jQuery in CRM UI. Web based CRM applications such as salesforce.com provide fancy tool tips. When you hover on link for “Leads” on the Account Overview page, the tool tip shows the leads for this account in a fancy table and can be further navigated. We had a similar request from our user community to build a fancy tool tip to show the entire Relationship Linkage of an Account on hovering over the link in Account Overview page in SAP CRM UI. The only way I could think of building this feature was by using ready to use jQuery plugins in a BSP page. I started looking for jQuery plugins available for building fancy tool tips and found out this link which has 30 different plugins available. Out of all them clueTip seemed to fancy and simple to implement. Here are some links for further information:
Here is how the tool tip looks on the Accounts Overview page:
CRM UI Configuration
We are going to create a new empty view in the Accounts Overview page to display two links. When you hover on these links this tool tip is triggered. Here are the basic CRM UI configuration steps performed:
- Enhance the component BP_HEAD from transaction BSP_WD_CMPWB with your Enhancement set.
- Create a new empty view, say ZHOVER.
- In the Runtime Repository Editor add this new empty view ZHOVER to the ViewSet BP_HEAD/BPHEADOverview under the ViewArea OverviewPage.
- Now configure your viewset BP_HEAD/BPHEADOverview to display the empty view ZHOVER on the top Assignment block.
Here is the screen shot of my Viewset assignment block configuration:
We are done with the UI configuration now. When this empty view is created, the system creates a new BSP application ZBP_HEAD with a view ZHOVER.htm and a controller ZHOVER.do.
Now you can work on this BSP application from SE80.
First step is download jQuery and clueTip plugins from the links mentioned before. Include the following JS and CSS files required for displaying the tool tip into the MIME Repository of the BSP application.
- jquery.hoverIntent.js (not mandatory)
Here is how your BSP application will look:
Another better approach is to add these files in MIME repository under path /SAP/PUBLIC/<FOLDER>. This way you can reuse these files in any BSP application.
Now, in the ZHOVER.do controller class add a new method called GET_SELECTED_PARTNER. This method is used to retrieve the BP number displayed in the overview page. This method will have an exporting parameter EV_PARTNER TYPE BU_PARTNER. This method will be called from the view and BP number will be passed to the JS. Here is the code for this method:
Now, let’s see the layout of the view “ZHOVER.htm”. This page will have two links “Relationship Linkage” and “Attachments”. When you mouse-over on “Relationship Linkage” link the content of the page “detail.htm” is shown as tooltip. In the same way the content of page “attachments.htm” is shown as tooltip for “Attachments” link.
I have used HTMLB tree to display relationship linkage of an account in detail.htm page. My detail.htm page has an auto page attribute “param1” which is the BP number. The BP number is passed to this page as a URL parameter from ZHOVER.htm page. In the same the way attachments.htm page is developed using HTMLB tags. I have not included the coding for these pages. You can develop your our own detail.htm page.
Here is complete coding for ZHOVER.htm page:
Some notes on this page:
- Include all the scripts and styles with their full path as this page is going to be a fragment inside the overview page and the absolute path can’t be accessible at that level. For example instead of using href=”jquery.cluetip.css” simply use full path href=”/sap/bc/bsp/sap/zbp_head/jquery.cluetip.css”.
- The way the clueTip creates the tooltip is, it just creates a “<div>” element in the Overview page with the detail.htm page content using jQuery Ajax calls. Also, as mentioned earlier, I had used htmlb:Tree tag in detail.htm page to display the Relationship view in a tree. As our “Overview” page is built with CRM UI specific tags such as thtmlb, tajax etc., it can’t render a htmlb:Tree. So we need to include the JS and CSS required for htmlb in “head” tag part of “hover” page. If some one has a better idea than including the JS and CSS files for HTMLB, please write them in the comments section of this blog.
- LoadMyJS() function calls the clueTip plugin to create tooltip. There are various options for clueTip which can be found in the link above. As you can observe anchor tags in this page have the required URL in “rel” attribute and the same is passed in options part of clueTip.
- For sticky tooltip I have used options sticky: true and mouseoutclose: true in the clueTip plugin.
- In order to avoid jQuery JS library to conflict with other HTMLB JS libraries, make sure jQuery.noConflict() is called.
Another approach is to create a nice BSP extension using clueTip and jQuery. Use this BSP extension where ever you need to generate this kind of tooltip.
Last but not the least, I would like to thank my lead Gautam Mandal who had given me the base idea for building this.
I hope this blog will help SAP CRM UI developers to develop nice content rich tool tips in SAP CRM at par with other browser based CRM applications.