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 (http://www.1stwebdesigner.com/css/stylish-jquery-tooltip-plugins-webdesign/) 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: ** [clueTip Plugin page | http://plugins.learningjquery.com/cluetip/] Also have a look at the licensing information at Licensing Info Page (http://jquery.org/license/) (http://jquery.org/license/). Here is how the tool tip looks on the Accounts Overview page: Media Description: Link: http://www.divulgesap.com/media/userfiles/flash/CRM_UI_Hover_Tooltip.swf *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-1.4.2_min.js
- jquery.cluetip.css
- jquery.cluetip.js
- jquery.hoverIntent.js (not mandatory)
Here is how your BSP application will look:
Comments