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:
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:
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.
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:
<%@page language="ABAP" %>
<%@page language="abap" %>
<%@extension name="htmlb" prefix="htmlb" %>
<%@extension name="xhtmlb" prefix="xhtmlb" %>
<%@extension name="crm_bsp_ic" prefix="crmic" %>
<%@extension name="thtmlb" prefix="thtmlb" %>
<%@extension name="chtmlb" prefix="chtmlb" %>
<%@extension name="bsp" prefix="bsp" %>
<link href="https://blogs.sap.com/sap/bc/bsp/sap/zbp_head/jquery.cluetip.css" rel="stylesheet" type="text/css" />
<link id="urstyle" href="https://blogs.sap.com/sap/public/bc/ur/Design2002/themes/sap_tradeshow/ur/ur_nn7.css?6.0.17.0.0" type="text/css" rel="stylesheet">
</link>
<script src="/sap/bc/bsp/sap/zbp_head/jquery-1.4.2_min.js" type="text/javascript"></script>
<script src="/sap/bc/bsp/sap/zbp_head/jquery.hoverIntent.js" type="text/javascript"></script>
<script src="/sap/bc/bsp/sap/zbp_head/jquery.cluetip.js" type="text/javascript"></script>
<script src="/sap/public/bc/ur/Design2002/js/sapUrMapi_nn7.js?6.0.17.0.0" language="JavaScript" type="text/javascript"></script>
<script src="/sap/public/bc/ur/Design2002/js/popup_nn7.js?6.0.17.0.0" language="JavaScript" type="text/javascript"></script>
<script src="/sap/bc/bsp/sap/zbp_head/custom_scripts.js" type="text/javascript"></script>
<script type="text/javascript">
var $j=jQuery.noConflict();
function LoadMyJs(myElement){
$j(myElement).cluetip({
cluetipClass: 'jtip',
width: 450,
arrows: true,
attribute: 'rel',
dropShadow: false,
hoverIntent: false,
sticky: true,
mouseOutClose: true,
closePosition: 'title',
showTitle:false,
topOffset:85
});
}
function populateIframe(id,path)
{
var ifrm = document.getElementById(id);
ifrm.src = "/sap/bc/bsp/sap/zbp_head/data.htm?file_id="+path;
}
</script>
<%
data lv_partner type bu_partner.
lv_partner = controller->GET_SELECTED_PARTNER( ).
%>
<a id="detail-link"
href="#"
rel="/sap/bc/bsp/sap/zbp_head/detail.htm?param1=<%= lv_partner %>"
onmouseover="LoadMyJs(this)" >
<%-- LoadMyJs(this) --%>
<b>Relationship Linkage</b>
</a>
   
<a id="att-link"
href="#"
rel="/sap/bc/bsp/sap/zbp_head/attachments.htm?partner=<%= lv_partner %>"
onmouseover="LoadMyJs(this)" >
<b>Attachments</b>
</a>
Some notes on this page:
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.
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
36 | |
7 | |
5 | |
5 | |
5 | |
4 | |
4 | |
4 | |
3 | |
3 |